Making home Page responsive #287
Conversation
WalkthroughUI-only updates in eduaid_web/src/pages/Home.jsx adjust Tailwind classes for alignment, spacing, rounding, sizing, and responsive behavior of the Features section and cards. No data flow, hooks logic, or exports changed. Minor formatting edits applied to imports and long lines. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesPoem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
I fix this issue |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
eduaid_web/src/pages/Home.jsx (1)
99-110: Don’t nest button inside Link (invalid HTML and a11y)Make the Link the interactive element and style it as a button.
-<Link to="/question-type" className="w-full sm:w-auto"> - <button className="w-full sm:w-auto items-center text-lg flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300"> - Let’s get Started - <img src={arrow} width={24} height={24} alt="arrow" /> - </button> -</Link> +<Link + to="/question-type" + className="w-full sm:w-auto items-center text-lg flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300" +> + Let’s get Started + <img src={arrow} width={24} height={24} alt="" aria-hidden="true" /> +</Link>-<Link to="/history" className="w-full sm:w-auto"> - <button className="w-full sm:w-auto items-center text-lg flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300"> - Your previous Work! - <img src={arrow} width={24} height={24} alt="arrow" /> - </button> -</Link> +<Link + to="/history" + className="w-full sm:w-auto items-center text-lg flex justify-center gap-3 text-white px-6 py-3 border-gradient hover:wave-effect rounded-md transition-all duration-300" +> + Your previous Work! + <img src={arrow} width={24} height={24} alt="" aria-hidden="true" /> +</Link>
🧹 Nitpick comments (9)
eduaid_web/src/pages/Home.jsx (9)
3-3: Prefer consistent camelCase for asset importsRename for consistency/readability.
-import logo_trans from "../assets/aossie_logo_transparent.png"; +import logoTransparent from "../assets/aossie_logo_transparent.png";And update usage:
-<img src={logo_trans} alt="logo" className="w-24 my-4 sm:my-6" /> +<img src={logoTransparent} alt="AOSSIE logo" className="w-24 my-4 sm:my-6" />
15-17: Abort GitHub fetch on unmount; add Accept headerPrevents hung requests and minorly future-proofs API usage.
- const response = await fetch( - "https://api.github.com/repos/AOSSIE-Org/EduAid" - ); + const response = await fetch( + "https://api.github.com/repos/AOSSIE-Org/EduAid", + { signal, headers: { Accept: "application/vnd.github+json" } } + );Outside this hunk (for context), pass the signal and clean up in effect:
// change signature async function fetchGitHubStars(signal) { /* ...as above... */ } // in useEffect const controller = new AbortController(); fetchGitHubStars(controller.signal) .then(/* ... */) .catch(() => setError("Failed to fetch stars")); return () => controller.abort();
32-38: Explicit radix for parseInt to avoid implicit baseAlso apply to stars parsing.
- !isMoreThanOneDayOld(parseInt(storedTime)) + !isMoreThanOneDayOld(parseInt(storedTime, 10)) ) { - setStars(parseInt(storedStars)); + setStars(parseInt(storedStars, 10));
75-75: Use CSS grid for predictable responsive card layoutFlex + justify-between can create uneven spacing; grid cleanly handles 1→3 columns.
-<div className="flex flex-col items-center gap-4 mt-8 sm:flex-row sm:justify-between sm:items-center lg:gap-6"> +<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6 mt-8 items-stretch">
81-83: Avoid index as React keyUse stable identifiers to prevent unnecessary re-renders when list order changes.
- <div - key={i} + <div + key={feature}
83-83: Width constraints can be simplified with gridIf you adopt grid above, these width/max-w constraints are redundant.
- className="flex items-center rounded-2xl px-4 py-2 sm:px-6 sm:py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-3 sm:gap-4 w-full sm:w-fit max-w-sm sm:max-w-none" + className="flex items-center rounded-2xl px-4 py-2 sm:px-6 sm:py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-3 sm:gap-4 w-full"
85-89: Add intrinsic dimensions and hide decorative icon from ATReduces CLS and avoids redundant announcements.
- <img - src={starsImg} - className="h-6 w-6 sm:h-8 sm:w-8" - alt="" - /> + <img + src={starsImg} + width={24} + height={24} + className="h-6 w-6 sm:h-8 sm:w-8" + alt="" + aria-hidden="true" + />
90-92: Preserve full label when truncated on small screensExpose the full text via title to improve UX.
- <div className="text-white text-sm sm:text-base lg:text-xl font-medium truncate sm:whitespace-normal"> + <div className="text-white text-sm sm:text-base lg:text-xl font-medium truncate sm:whitespace-normal" title={feature}>
123-131: Add loading fallback and format star countImproves perceived performance and readability for large numbers.
- {stars !== null ? ( - <> - {stars} - <FaGithub size={32} /> - </> - ) : ( - <span>{error}</span> - )} + {stars !== null ? ( + <> + {stars.toLocaleString()} + <FaGithub size={32} /> + </> + ) : error ? ( + <span>{error}</span> + ) : ( + <span>Loading…</span> + )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
eduaid_web/src/pages/Home.jsx(4 hunks)
1 participant
This PR fixes the responsiveness of the home page .
Fixes #284
Summary by CodeRabbit