Fixed home page responsiveness

[Shanukeshri]

This PR resolves a responsiveness issue on the home page, ensuring the layout adapts correctly across different screen sizes. The changes improve the user experience on mobile and desktop devices while maintaining the existing design

Resolves Issue #284

NOTE: This is a duplicate pull request of issue #283
I have closed the prior pull request so that no conflicts happens

Summary by CodeRabbit

• Style

  • Updated Home page responsive layout for improved small-screen behavior.
  • Adjusted feature section alignment to better distribute space and maintain consistent spacing across breakpoints.
  • Enhanced feature cards with refined spacing, centering, and rounded corners on smaller viewports.
  • Minor formatting cleanups with no impact on functionality.

• Refactor

  • Non-functional code formatting for readability; no changes to data fetching or local storage behavior.

[coderabbitai]

Walkthrough

UI/layout-only updates to Home.jsx with formatting changes. No functional or logic alterations; data fetching and localStorage behavior remain the same. Responsive Tailwind classes adjusted to modify alignment, spacing, width distribution, and rounding on small screens.

Changes

Cohort / File(s)	Summary
Home page responsive/layout tweaks eduaid_web/src/pages/Home.jsx	Reformatted imports and URL lines; adjusted Tailwind classes for features container and items (alignment, spacing, flex growth, rounding). No changes to fetch logic, localStorage usage, or control flow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

• Fix responsiveness issue on home page #284 — Adjusts responsive classes and spacing in Home.jsx, aligning with the issue’s responsiveness fixes.

Poem

A whisk of CSS, a hop through the dom,
I nudged the flex, made corners less glum.
Stars still fetched, no logic astray—
Just smoother burrows for screens that sway.
With twitching ears I test and grin:
Responsive trails for users to hop in. 🐇✨

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 Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

eduaid_web/src/pages/Home.jsx (4)

14-16: LGTM: Multiline fetch formatting only. Consider extracting the repo URL to a constant.

Minor nit: hoisting the GitHub repo URL to a top-level constant (or env/config) improves readability and makes it easier to update or test.

---

31-35: Specify radix for parseInt to avoid edge cases.

Using parseInt without a radix is error-prone. Prefer parseInt(storedTime, 10) or Number(storedTime).

Apply this diff:

-      !isMoreThanOneDayOld(parseInt(storedTime))
+      !isMoreThanOneDayOld(parseInt(storedTime, 10))

Additionally, consider doing the same for storedStars at Line 36 for consistency: parseInt(storedStars, 10).

---

74-76: Verify mobile alignment: items-end right-aligns feature chips on small screens.

With flex-col and w-fit on children, items-end will right-align the chips on narrow screens. If the intent is to center them on mobile (common for CTAs/badges), switch to items-center.

If centering is desired, apply:

-            className="flex flex-col items-end mt-8 gap-4 sm:flex-row sm:items-stretch sm:justify-between">
+            className="flex flex-col items-center mt-8 gap-4 sm:flex-row sm:items-stretch sm:justify-between">

---

83-85: Corner rounding may look asymmetric on mobile.

rounded-l-2xl on base + sm:rounded-2xl at sm may cause odd visuals when stacked vertically. If consistent pill-like cards are desired on mobile too, use rounded-2xl at base.

Apply this diff:

-                className="flex items-center rounded-l-2xl px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-4 w-fit
-             sm:flex-1 sm:justify-center sm:rounded-2xl"
+                className="flex items-center rounded-2xl px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] gap-4 w-fit
+             sm:flex-1 sm:justify-center sm:rounded-2xl"

If the asymmetric rounding is intentional for the gradient effect, feel free to keep as-is.

📜 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 settings in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 122eefb and f9175fc.

📒 Files selected for processing (1)

• eduaid_web/src/pages/Home.jsx (4 hunks)

🔇 Additional comments (1)

eduaid_web/src/pages/Home.jsx (1)

3-3: LGTM: Import formatting change is harmless.

No functional impact; keeping asset imports explicit is good.