Skip to content

fix: mobile view#811

Merged
CodeWithCJ merged 1 commit intoCodeWithCJ:mainfrom
Sim-sat:main
Mar 1, 2026
Merged

fix: mobile view#811
CodeWithCJ merged 1 commit intoCodeWithCJ:mainfrom
Sim-sat:main

Conversation

@Sim-sat
Copy link
Contributor

@Sim-sat Sim-sat commented Mar 1, 2026

Description

Fixes the mobile view navigation.

Related Issue

PR type [ ] Issue [x] New Feature [ ] Documentation
Linked Issue: #

Checklist

Please check all that apply:

  • [MANDATORY for new feature] Alignment: I have raised a GitHub issue and it was reviewed/approved by maintainers
  • Tests: I have included automated tests for my changes.
  • [MANDATORY for UI changes] Screenshots: I have attached "Before" vs "After" screenshots below.
  • [MANDATORY for Frontend changes] Quality: I have run pnpm run validate (especially for Frontend).
  • Translations: I have only updated the English (en) translation file (if applicable).
  • Architecture: My code follows the existing architecture standards.
  • Database Security: I have updated rls_policies.sql for any new user-specific tables.
  • [MANDATORY - ALL] Integrity & License: I certify this is my own work, free of malicious code(phishing, malware, etc.) and I agree to the License terms.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! 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 an issue with the mobile view navigation by refining how CSS grid column classes are applied. It introduces a new utility function for generating grid classes and updates the main layout component to use this function, ensuring a more consistent and correct layout on mobile devices.

Highlights

  • Grid Class Refactoring: Refactored grid class generation by introducing a new utility function, getGridClassNormal, in utils/layout.ts to provide standard grid-cols-X classes.
  • Layout Component Update: Updated MainLayout.tsx to utilize the new getGridClassNormal function for calculating grid column classes for both standard and mobile tab layouts, replacing the previous getGridClass usage.
  • Mobile View Fix: Ensured that grid classes are applied consistently across different screen sizes to resolve reported issues with mobile view navigation.
Changelog
  • SparkyFitnessFrontend/src/layouts/MainLayout.tsx
    • Updated the import statement to use getGridClassNormal instead of getGridClass.
    • Modified the gridClass and mobileGridClass assignments to call getGridClassNormal.
  • SparkyFitnessFrontend/src/utils/layout.ts
    • Added a new exported function getGridClassNormal which returns grid-cols-X classes based on the number of columns.
Activity
  • No specific activity (comments, reviews, or progress updates) has been recorded for this pull request yet.
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.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request fixes the mobile navigation layout by introducing and using a new utility function, getGridClassNormal, to correctly apply grid classes without responsive prefixes. The fix is effective. My review includes a suggestion to refactor the new utility function to improve code maintainability by reducing duplication.

Comment on lines +24 to +45
export const getGridClassNormal = (cols: number) => {
switch (cols) {
case 1:
return 'grid-cols-1';
case 2:
return 'grid-cols-2';
case 3:
return 'grid-cols-3';
case 4:
return 'grid-cols-4';
case 5:
return 'grid-cols-5';
case 6:
return 'grid-cols-6';
case 7:
return 'grid-cols-7';
case 8:
return 'grid-cols-8';
default:
return 'grid-cols-7';
}
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This function duplicates the logic from getGridClass. To improve maintainability and avoid code duplication, you could use a map object for the class names. This makes the code more concise. The same refactoring could then be applied to getGridClass to keep the implementation consistent and DRY.

export const getGridClassNormal = (cols: number) => {
  const classMap: Record<number, string> = {
    1: 'grid-cols-1',
    2: 'grid-cols-2',
    3: 'grid-cols-3',
    4: 'grid-cols-4',
    5: 'grid-cols-5',
    6: 'grid-cols-6',
    7: 'grid-cols-7',
    8: 'grid-cols-8',
  };
  return classMap[cols] || 'grid-cols-7';
};

@CodeWithCJ CodeWithCJ merged commit 967d5b1 into CodeWithCJ:main Mar 1, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants