ui improvement

[Nachiket-Roy]

closes #4779
This improves : More consistent ui across different pages and section

Summary by CodeRabbit

• Style
  • Improved card layouts with bottom-aligned action buttons across hackathons and blog sections for better visual hierarchy
  • Enhanced spacing and margins throughout the interface for improved readability
  • Better text truncation and alignment in contributor and user profile cards
  • Repositioned map attribution for improved clarity

[coderabbitai]

Walkthrough

This PR improves website template UI/UX consistency across five files by implementing flexbox-based card layouts for better bottom-aligned call-to-action alignment, adjusting spacing and margins, applying text truncation with tooltips to user/contributor names, reorganizing map attribution placement, and refining overall visual hierarchy.

Changes

Cohort / File(s)	Summary
Card Layout & Flex Structure website/templates/home.html, website/templates/hackathons/list.html	Restructured Recent Hackathons and Latest Blog Posts cards to use flexbox (flex, flex-col, flex-grow, mt-auto) for improved vertical space distribution and consistent bottom-aligned CTAs; replaced static button positioning with flex-driven layout.
Text Styling, Alignment & Truncation website/templates/users.html, website/templates/github_issues.html	Added text centering and truncation with title tooltips for contributor names, usernames, and roles; updated text sizing by removing text-sm class; ensured full-width layout for discounted rate blocks.
Spacing, Margins & Attribution website/templates/map.html	Adjusted outer container and map element margins (mb-8 and mb-2); relocated inline attribution text to a new right-aligned attribution container above the map.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

• Flex layout restructuring in cards (home.html, hackathons/list.html): Verify bottom-aligned CTA behavior, flex-grow distribution, and responsive spacing across breakpoints.
• Text truncation and tooltip implementation (users.html): Confirm truncation triggers correctly and title attributes display consistently on different viewport sizes.
• Attribution relocation (map.html): Ensure the new attribution container placement does not overlap or obscure map elements and maintains proper alignment.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The title 'ui improvement' is vague and generic, using non-descriptive terms that do not convey meaningful information about the specific changes.	Provide a more specific title like 'Improve UI consistency in hackathons, blog posts, badges, and map sections' to better describe the scope.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	All code changes align with the objectives from issue #4779: spacing improvements in BACON Rewards section, consistent flex-based card layouts in hackathons and blog posts, improved map attribution alignment, and enhanced user/contributor card alignment.
Out of Scope Changes check	✅ Passed	All changes are within scope of issue #4779, targeting only template modifications for spacing, alignment, and readability across the specified pages.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• 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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

website/templates/users.html (1)

70-72: Contributor name truncation and centering look good, but consider accessibility.

The addition of truncate with a title attribute is a good visual improvement for consistent spacing. However, screen reader users won't benefit from the tooltip, and touch-device users can't hover to reveal truncated text.

Consider documenting this pattern or exploring ARIA labels (aria-label) as a complementary approach for better accessibility coverage.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between acd33e0 and 4ddd199.

📒 Files selected for processing (5)

• website/templates/github_issues.html (2 hunks)
• website/templates/hackathons/list.html (3 hunks)
• website/templates/home.html (6 hunks)
• website/templates/map.html (1 hunks)
• website/templates/users.html (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (4)

• website/templates/hackathons/list.html
• website/templates/github_issues.html
• website/templates/home.html
• website/templates/map.html

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Run Tests
• GitHub Check: docker-test

🔇 Additional comments (3)

website/templates/users.html (3)

116-120: Username truncation with structural change — verify hover state behavior.

You've restructured the username from a direct anchor to a div wrapper with an internal anchor. The group-hover:text-[#e74c3c] class on line 116's div should propagate to the anchor (line 118), but verify that the hover color transition works as intended across all browsers.

Additionally, like the contributor name (line 70), the reliance on title attributes for accessibility could be improved with supplementary ARIA attributes for screen reader users.

---

121-122: User role truncation aligns well with contributor name pattern.

Good consistency here — centering, truncation, and tooltip follow the same approach as the contributor name. No concerns with the implementation itself.

---

124-127: Discounted hourly rate block styling improves layout consistency.

Making the rate block w-full and converting the label span to block ensures proper full-width layout and alignment. This aligns well with the overall flexbox-based card layout improvements mentioned in the PR objectives.