BusDetailsCard component is not responsive for tablets & small laptops screen.

[Pratik2026]

Describe the bug

The BusDetailCard component is overflowing out of its designated area. Also, the Divider becomes invisible in 768px-1024px, which is unexpected behavior according to the written code logic.

Steps To Reproduce

1. Click the see schedule button
2. Click on Book ticket

Expected Behavior

• The divider should be visible for small laptop screen sizes.
• The BusDetailsCard component should be responsive.

Screenshots/Videos

No response

What device are you using?

Desktop

Operating System

Linux

What browsers are you seeing the problem on?

Chrome

Additional context

No response

[Aayushsinghal294]

@Pratik2026
I would like to work on this issue. This issue can be solved by setting up the media queries for the dimensions of tablets and small laptops , and make it responsive using css.

[Zapper9982]

@Pratik2026 sir ,I would like to work on this issue , the simple fix for this can be by placing the overall card component in another Box , which makes it responsive with different screen sizes

[bravichandra12]

@Pratik2026 sir ,I would like to work on this issue. Just by adding sm in font size and icon width in provided MUI makes it responsive.

[Pratik2026]

@Aayushsinghal294, you can start working on it. However, setting up the media query might not be the exact solution. You need to identify the specific code causing the overflow, which is resulting in the divider being hidden.

[Aayushsinghal294]

ok sir

[Aayushsinghal294]

@Pratik2026
sir should the divider be visible for very small screen devices like mobile too ?

[Pratik2026]

@Aayushsinghal294 No the divider should be visible in tablets & laptop screen size only

[Aayushsinghal294]

Sorry sir their are internal files mix up I am facing with my pc so that I am not able to push it to github , So currently I would not be able to complete this issue, So You can transfer this issue to someone else , btw this is the improved code that makes it responsive and solves divider problem . Thank you sir and sorry.

`import { useTheme, Typography, styled, Box } from '@mui/material';
import busIcon from '../../assets/bus-icon.svg';
import arrowIcon from '../../assets/arrowIcon.svg';
import scheduleIcon from '../../assets/schedule-icon.svg';
import { useOrderStore } from '../../store/orderStore';

const Icon = styled('img')`
width: 40px;
height: 40px;

@media (max-width: 600px) {
width: 30px;
height: 30px;
}
`;

function BusDetailsCard() {
const theme = useTheme();
const time = useOrderStore((state) => state.time);
const source = useOrderStore((state) => state.source);
const destination = useOrderStore((state) => state.destination);

return (
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: 'center',
gap: { xs: '10px', md: '2rem' },
maxWidth: '100%',
overflow: 'hidden',
padding: { xs: '10px', md: '20px' },
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: { xs: '5px', md: '10px' },
maxWidth: '100%',
}}
>


<Typography
variant="h6"
fontSize={{ xs: '0.8rem', md: '1rem' }}
color={theme.palette.common.black}
>
From

<Typography
variant="h4"
fontSize={{ xs: '1.25rem', md: '1.5rem' }}
color={theme.palette.secondary.main}
sx={{ wordBreak: 'break-word' }}
>
{source}



<img src={arrowIcon} alt="Arrow Icon" style={{ maxWidth: '100%' }} />
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: { xs: '5px', md: '10px' },
maxWidth: '100%',
}}
>


<Typography
variant="h6"
fontSize={{ xs: '0.8rem', md: '1rem' }}
color={theme.palette.common.black}
>
To

<Typography
variant="h4"
fontSize={{ xs: '1.25rem', md: '1.5rem' }}
color={theme.palette.secondary.main}
sx={{ wordBreak: 'break-word' }}
>
{destination}

  <Box
    sx={{
      width: '2px',
      height: '5vh',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      margin: { xs: '0', sm: '0 2rem' },
      display: { xs: 'none', sm: 'block' },
    }}
  />

  <Box
    sx={{
      display: 'flex',
      alignItems: 'center',
      gap: '10px',
      maxWidth: '100%',
    }}
  >
    <Icon src={scheduleIcon} alt="Schedule Icon" />
    <Box>
      <Typography
        variant="h6"
        fontSize={{ xs: '0.8rem', md: '1rem' }}
        color={theme.palette.common.black}
      >
        Date and Time
      </Typography>
      <Typography
        variant="h4"
        fontSize={{ xs: '1.25rem', md: '1.5rem' }}
        color={theme.palette.secondary.main}
      >
        {time}
      </Typography>
    </Box>
  </Box>
</Box>

);
}

export default BusDetailsCard;
`

[Vaibhavsahu2810]

@Pratik2026 sir,I would like to work on this issue. I can resolve this issue using MUI's Box component to handle CSS properties related to overflow and ensuring responsive styles are applied correctly using the sx prop in MUI.

[Pratik2026]

@Aayushsinghal294 No problem next time just make sure to set up the project properly before taking up an issue.
Also, it's not appropriate to put the entire code of the file within the comments. So, I've removed your comment.

[Pratik2026]

@Zapper9982, You can start working on this issue.

[Zapper9982]

sure sir