Fixed respecting safe area around the ios navigation bar

[mr-woodapple]

Reopened the PR here with additional style fixes: #739

[gemini-code-assist]

Summary of Changes

Hello @mr-woodapple, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a display issue on iOS devices where the mobile navigation bar might overlap with system UI elements. It introduces a dedicated CSS class to manage safe area insets and applies this fix to the main layout's mobile navigation, ensuring proper visual presentation and accessibility of UI components.

Highlights

• iOS Safe Area Handling: Introduced a new CSS class, .apple-safe-area, which utilizes env(safe-area-inset-bottom) to provide appropriate padding for iOS devices, preventing UI elements from being obscured by system bars.
• Mobile Navigation Bar Fix: Applied the new .apple-safe-area class to the mobile navigation bar in MainLayout.tsx to ensure it correctly respects the safe area, improving the user experience on iOS.

Changelog

• SparkyFitnessFrontend/src/index.css
  • Added a new CSS class .apple-safe-area that sets padding-bottom using env(safe-area-inset-bottom).
  • Included a comment explaining the purpose of the new class for handling Apple safe areas.
• SparkyFitnessFrontend/src/layouts/MainLayout.tsx
  • Wrapped the existing mobile navigation content within a new div element.
  • Applied the newly created apple-safe-area class directly to the nav element for mobile navigation.
  • Adjusted styling classes on the nav and the new inner div to accommodate the safe area padding and maintain layout.

Activity

• This pull request is a re-opening of a previous pull request (Fixed respecting safe area around the ios navigation bar #739) and includes additional style fixes.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request addresses the issue of respecting safe areas around the iOS navigation bar by introducing an apple-safe-area CSS class and applying it to the mobile navigation component. This is a good step towards improving the user experience on iOS devices. However, some styling properties related to spacing and padding were inadvertently removed during the refactoring of the mobile navigation component, which could lead to minor layout inconsistencies.

[gemini-code-assist]

The refactoring of the mobile navigation component removed the gap-1, py-2, and px-2 classes that were previously responsible for spacing between navigation items and vertical/horizontal padding. These are important for maintaining the intended layout and visual appeal of the navigation bar on mobile devices. Restoring them to the inner div will ensure consistent spacing and padding.

Suggested change

	className={`h-14 grid ${mobileGridClass} items-center justify-items-center`}
	className={`h-14 grid gap-1 py-2 px-2 ${mobileGridClass} items-center justify-items-center`}

[mr-woodapple]

Not true, because the introduced items-center justify-items-center classes will distribute the available icons across the screen. We'll probably have other issues before that's relevant.