Bottom Bar Not Visible on Mobile Without Scrolling

[Bonapara]

Current Behavior

The bottom bar is not directly visible on mobile. To see it, I have to scroll the page by placing my finger at the extreme edge of the screen.

RPReplay_Final1717576568.MP4

Desired Behavior

The bottom bar should always be visible. Use LVH or other modern CSS viewport units to account for the browser's collapsing navbar.

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To ensure the bottom bar is always visible on mobile devices, follow these steps:

1. File: src/components/DefaultLayout.tsx

   • Locate the bottom bar component within the layout.
   • Ensure it uses modern CSS viewport units like lvh.

2. File: src/components/TopBar.tsx

   • Adjust the styling to ensure it does not interfere with the bottom bar visibility.

3. File: src/hooks/responsive/useIsMobile.ts

   • Utilize this hook to apply conditional styling for mobile devices.

4. CSS Adjustment:

   • Update the relevant styled components to use lvh units for height calculations.

Example:

bottom-bar {
  height: 10lvh;
  position: fixed;
  bottom: 0;
  width: 100%;
}

References

[OHSOHYEON00]

Hi, Can I work on this? @Bonapara

[Bonapara]

Sure @OHSOHYEON00, thanks for contributing (Again!) :)

[Bonapara]

Hi @OHSOHYEON00, are you still working on this? I'm unassigning you, but let me know if you still want to handle it!

[dhruvdabhi101]

Hey, If no one is working, then can you please assign this issue? i might want to give it a try. Thanks : )

[Bonapara]

Sure @dhruvdabhi101, thanks for contributing!