feat: compact header and add GitHub icon #57

[ankitrraj]

Stable.Viewpoints.-.Google.Chrome.2025-12-14.01-35-16.mp4

there is proof of and before is like

so its a better choice

Summary by CodeRabbit

• Style & UI Improvements
  • Redesigned header layout with improved visual hierarchy.
  • Added GitHub link button in the header for easier access.
  • Integrated "Submit an Article" link into the header for better navigation accessibility.
  • Reduced header spacing for a more compact appearance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The pull request modifies the header layout in app/page.tsx, reducing padding and text sizes while reorganizing navigation elements. A GitHub icon button and "Submit an Article" link are grouped into a new right-aligned header section, replacing the previous standalone button placement.

Changes

Cohort / File(s)	Summary
Header Layout Restructuring app/page.tsx	Reduced header padding (py-6 → py-3), site title size (text-5xl → text-2xl), and subtitle size (text-lg → text-sm). Added GitHub import from lucide-react. Created right-aligned header block containing GitHub link button with icon and "Submit an Article" link. Integrated previously standalone article submission button into new header-right group.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Single file modification with straightforward UI/styling changes
• No new logic, control flow modifications, or functional complexity
• Layout reorganization and spacing adjustments are visually reviewable

Poem

🐰 A header so sleek, condensed with care,
With GitHub and Articles arranged just right there,
Padding trimmed down, the text sizes too,
A cleaner, tighter design—hopping fresh anew! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

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.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: compacting the header layout and adding a GitHub icon, which aligns with the raw summary showing reduced padding/text sizes and a new GitHub link button.

✨ 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: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 113d28d and 4e580ea.

📒 Files selected for processing (1)

• app/page.tsx (2 hunks)

🔇 Additional comments (1)

app/page.tsx (1)

105-111: Compact header sizing looks consistent; just sanity-check mobile wrapping.

With text-2xl + the right-side actions, verify the header doesn’t wrap awkwardly on small widths (e.g., iPhone SE / 320px) and that the sticky header height stays usable.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Add accessible name + focus styles for the icon-only GitHub link.

Right now the <a> contains only an SVG, so screen readers may announce it as an unlabeled “link”, and keyboard users don’t get a clear focus indicator.

           <div className="flex items-center gap-6">
             <a
               href="https://github.com/StabilityNexus/StableViewpoints"
               target="_blank"
               rel="noopener noreferrer"
-              className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors"
+              aria-label="Stable Viewpoints on GitHub"
+              title="Stable Viewpoints on GitHub"
+              className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black"
             >
               <Github className="w-5 h-5" />
             </a>
             <Link
               href="/submit"
-              className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+              className="inline-flex items-center gap-2 rounded-md bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#228B22]"
             >
               Submit an Article
             </Link>
           </div>

🤖 Prompt for AI Agents

In app/page.tsx around lines 105 to 126, the GitHub anchor is icon-only and
lacks an accessible name and keyboard focus styles; add an accessible label by
either adding aria-label="Open StableViewpoints GitHub" to the <a> or inserting
a visually hidden span (className="sr-only") with that text, and enhance
keyboard focus visibility by adding focus-visible classes to the anchor's
className (for example: focus:outline-none focus-visible:ring-2
focus-visible:ring-offset-2 focus-visible:ring-black or equivalent Tailwind
focus classes) so screen readers announce the link and keyboard users see a
clear focus indicator.