CSS hover highlight doesn't cover parent component

I'm trying to create a languages option component. It has language codes placed vertically in a parent component as such:

When I hover over the language options, it highlights the letter codes (a separate styled component). I can't figure out how to get it to cover the width of the parent component.

Here's the code:

Styling:

import styled, { css } from 'styled-components';


export const LanguagesWrapper = styled.div`
  background-color: #b0b2b7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Add flex-grow property to expand vertically */
  padding: 0.3rem;
  gap: 0.8rem;
  
`;

export const StyledLanguagesTitle = styled.p`
  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;
  }
`;

import {useState} from 'react';
import {
  ButtonForReferenceLink,
  LanguagesWrapper,
  StyledLanguagesTitle,
} from './styles';
import {LanguageOptionsProps, ReferenceLinkProps} from './types';
import openNewTab from '../ModalsContent/References/utils/openNewTab';

const ReferenceLink = ({
  handleMouseOver,
  handleMouseOut,
}: ReferenceLinkProps) => {
  return (
    <ButtonForReferenceLink
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      icon={'/images/arrow-up-right-from-square-solid.svg'}
      /* onClick={() => openNewTab(link)} */
    />
  );
};

const LanguageOptions = ({languages, link}: LanguageOptionsProps) => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseOver = () => {
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
  };

  return (
    <>
      {!isHovering && (
        <ReferenceLink
          handleMouseOver={handleMouseOver}
          handleMouseOut={handleMouseLeave}
        />
      )}

      {isHovering && (
        <LanguagesWrapper
          onMouseOver={handleMouseOver}
          onMouseLeave={handleMouseLeave}>
          {languages.map((language, index) => (
            <StyledLanguagesTitle onClick={()=>openNewTab(link)
            } key={index} >
              {language}
              
            </StyledLanguagesTitle>
          ))}
        </LanguagesWrapper>
      )}
    </>
  );
};

export default LanguageOptions;

I tried playing around with the CSS but no avail

The problem here is that you have a padding: 0.3rem applied in your LanguagesWrapper. This padding will push any children of the LanguagesWrapper 0.3rem units inside of it, meaning the children will fill the width of its parent minus the 0.3rem on each side.

To make the hover effect fill the full width of the parent, you need to declare the padding: 0.3rem on your StyledLanguagesTitle component instead.

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;
  }
`;

In the provided code snippet, I have made the necessary adjustment. The LanguagesWrapper now only handles the background color, border radius, flex properties, and gap between the children. The StyledLanguagesTitle component has the padding: 0.3rem declaration and the hover effect styles.

Please note that you may need to adjust the padding value based on your specific requirements, as it might lead to excessive space if applied to all language titles like "EN", "FR", "DE", "IT".

I hope this clarifies the issue for you.