I am encountering an issue with a hover component that is causing distortion in its parent component when displayed. Essentially, I need to prevent the hover component from affecting the layout of its container. Below is the code snippet:
Styling for LanguageOptions (hover component):
import styled from 'styled-components';
export const LanguagesWrapper = styled.div`
// removed padding: 0.3rem;
background-color: #b0b2b7;
border-radius: 5px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Add flex-grow property to expand vertically */
gap: 0.8rem;
`;
export const StyledLanguagesTitle = styled.p`
padding: 0.3rem; // added padding here;
font-size: ${({theme}) => theme.typography.fontSize.medium};
cursor: pointer;
transition: background-color 0.3s;
&:hover {
background-color: #526d82;
}
`;
export const ButtonForReferenceLink = styled.button<{
icon: string;
}>`
position: relative;
width: 1.3rem;
height: 1.3rem;
background-image: url(${({icon}) => icon});
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: transparent;
border: none;
cursor: pointer;
:first-of-type {
height: 1.1rem;
}
`;
Styling for References:
import styled, { css } from 'styled-components';
export const StyledWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-width: 200px;
width: 98%;
margin: auto;
padding: 0 5px 0 5px;
gap: 0.5rem;
`;
export const StyledTitle = styled.h2<{type: boolean}>`
font-size: ${({theme}) => theme.typography.fontSize.mediumLarge};
margin-bottom: 1rem;
color: ${({theme, type}) => (type ? '#e0e0e0' : theme.colors.blue)};
`;
export const StyledInnerWrapper = styled.div<{type: boolean}>`
width: 100%;
max-height: 30rem;
padding-right: 1.3rem;
overflow-y: scroll;
margin-bottom: 1rem;
::-webkit-scrollbar {
width: 10px;
background-color: rgba(
0,
0,
0,
0.2
);
}
::-webkit-scrollbar-thumb {
background-color: ${({type}) =>
type
? '#ff6363'
: '#779199'};
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #c70000;
}
`;
export const ReferenceItem = styled.div<{darkMode: boolean}>`
display: flex;
background-color: ${({theme, darkMode}) =>
darkMode ? 'grey' : theme.colors.blueWithOpacity};
padding: ${({theme}) => theme.spacing.small};
border-radius: 0.6rem;
width: 100%;
height: fit-content;
margin-bottom: 0.5rem;
gap: 1rem;
`;
export const Content = styled.div`
width: 100%;
padding-left: 0.3rem;
`;
export const ButtonsWrapper = styled.div`
display: flex;
justify-content: start;
flex-direction: column;
min-height: 3rem;
height: 100%;
padding: 0.3rem;
gap: 0.8rem;
`;
export const StyledText = styled.p<{small?: boolean, darkMode:boolean}>`
font-size: ${({theme, small}) =>
small
? theme.typography.fontSize.small
: theme.typography.fontSize.mediumSmall};
${({small}) =>
small &&
css`
font-style: italic;
padding-top: 0.5rem;
padding-bottom: 0.4rem;
`}
${({theme}) => theme.breakpoints.up('sm')} {
font-size: ${({theme, small}) =>
small
? theme.typography.fontSize.small
: theme.typography.fontSize.medium};
}
color: ${({theme, darkMode}) =>
darkMode ? 'white' : 'black' };
`;
export const ButtonForReferenceLink = styled.button<{icon: string}>`
position: relative;
width: 1.3rem;
height: 1.3rem;
background-image: url(${({icon}) => icon});
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: transparent;
border: none;
cursor: pointer;
:first-of-type {
height: 1.1rem;
}
`;
Gif:https://i.stack.imgur.com/dXwQI.gif
I attempted some CSS tweaks without success in resolving the issue.