Implement vertical tabs for mobile download page and fix width alignment

[Copilot]

The download page had two UX issues that have been addressed:

1. Mobile Architecture Selection: The horizontal tabs with scrolling were not mobile-friendly
2. Width Alignment: The download page cards were narrower than the site header due to inconsistent padding

Changes Made

Mobile Vertical Tabs: Replaced horizontal TabsList with a vertical stack of buttons for mobile devices, eliminating horizontal scrolling and providing better mobile usability with clear active/inactive states.

Consistent Width Layout: Aligned the download page container padding (px-2 lg:px-0) with the header and other site components, fixing the visual width mismatch between the header navigation and download page content.

Responsive Design: Desktop maintains the existing horizontal tab layout while mobile uses the new vertical approach.

All existing functionality including URL state management and architecture switching behavior is preserved.

Fixes #202

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

@NebraskaCoder 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rockylinux-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2025 6:11pm

[NebraskaCoder]

@copilot Instead of your changes, we might want to look at creating vertical tabs instead.

[Copilot]

@copilot Instead of your changes, we might want to look at creating vertical tabs instead.

Great suggestion! I've implemented vertical tabs for mobile instead of the horizontal scrolling approach. The new solution:

✅ Replaces the horizontal TabsList with a vertical stack of buttons
✅ Uses full width buttons that stack vertically on mobile
✅ Eliminates the need for horizontal scrolling entirely
✅ Provides better mobile UX with clear visual states
✅ Maintains all existing functionality and URL state management

The vertical layout is much more intuitive on mobile devices and ensures all architecture options are immediately visible without any scrolling. Desktop users still get the horizontal tabs as before.

Commit: 41aa618

[NebraskaCoder]

@copilot

The width of the top of the site and the width of the cards on the download page don't match.

[Copilot]

@copilot

The width of the top of the site and the width of the cards on the download page don't match....

Fixed the width alignment issue! The problem was inconsistent horizontal padding between the header (px-2 lg:px-0) and download page content (px-6 lg:px-8). I aligned both to use the same padding pattern as other site components.

Before (width mismatch):

After (aligned widths):

The header and download cards now have consistent width alignment on both mobile and desktop views.

Commit: b09183c

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: next-server (v15.3.5) (dns block)
  • Triggering command: node /home/REDACTED/work/rockylinux.org/rockylinux.org/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[NebraskaCoder]

@copilot Delete this PR, branch, etc... I fixed it myself.

[Copilot]

@copilot Delete this PR, branch, etc... I fixed it myself.

Understood! Since you've fixed the issue yourself, I'll discontinue work on this PR. The branch and PR can be deleted as requested.

[NebraskaCoder]

Closing as already fixed elsewhere.