Reorder homepage elements on mobile for better CTA visibility

[Copilot]

Action buttons (Quickstart, Star us) were appearing below compatibility rails on mobile, reducing their visibility and engagement potential.

Changes

• apps/www/app/(home)/page.tsx: Applied flexbox order utilities to swap visual order on mobile (order-1 md:order-2 for buttons, order-2 md:order-1 for rails)
• apps/www/components/page/compatibility-rails.tsx: Added className prop support using cn() utility for class merging

Behavior

Viewport	Order
< 768px (mobile)	Buttons → Compatibility Rails
≥ 768px (tablet/desktop)	Compatibility Rails → Buttons (original)

Screenshots

Mobile (375px) - Buttons now prominent

Desktop (1280px) - Original layout preserved

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

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

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/arkenv/arkenv/node_modules/.pnpm/next@16.1.1_@babel+core@7.28.5_@opentelemetry+api@1.9.0_@playwright+test@1.57.0_react-d_f42438f6717e44ec3de5d0c1806f5fb0/node_modules/next/dist/server/lib/start-server.js (dns block)
• https://api.github.com/repos/yamcodes/arkenv
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/arkenv/arkenv/node_modules/.pnpm/next@16.1.1_@babel+core@7.28.5_@opentelemetry+api@1.9.0_@playwright+test@1.57.0_react-d_f42438f6717e44ec3de5d0c1806f5fb0/node_modules/next/dist/server/lib/start-server.js (http 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)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Make buttons more visible on mobile</issue_title>
<issue_description>The action buttons in the homepage should be more visible on mobile. An easy way to achieve that is, just for mobile, switch places between then and the compatibility rail.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Make buttons more visible on mobile #648

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Summary by CodeRabbit

• Style
  • Improved homepage layout responsiveness by reordering key elements to display optimally across different screen sizes.
  • Enhanced component styling capabilities to support greater customization and design flexibility.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: d643c95

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
arkenv	Ready	Preview, Comment	Dec 27, 2025 2:15pm

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The PR addresses mobile visibility for action buttons by reordering page layout elements at different screen breakpoints using CSS order properties, and adds className prop support to the CompatibilityRails component to enable flexible styling.

Changes

Cohort / File(s)	Summary
Homepage Layout Reordering apps/www/app/(home)/page.tsx	Swapped visual order of CompatibilityRails and button group using CSS order: CompatibilityRails gets order-2 on small screens and order-1 on medium+; buttons container gets order-1 on small screens and order-2 on medium+.
CompatibilityRails Component Enhancement apps/www/components/page/compatibility-rails.tsx	Added optional className prop to component signature; imported cn utility; merged provided className with existing base classes on wrapper div.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• 637 website isnt mobile friendly #639: Modifies the same homepage layout and CompatibilityRails component files with related styling and component structure changes.

Poem

🐰 With order-one and order-two,
The buttons dance and shine anew,
On mobile screens they take the lead,
While Rails below serve their need! ✨

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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: reordering homepage elements on mobile for better CTA (call-to-action button) visibility, which directly matches the primary objective of the PR.
Linked Issues check	✅ Passed	The code changes directly address issue #648 by reordering buttons above compatibility rails on mobile (order-1 on small screens) while preserving original order on tablet/desktop (order-2 on medium-and-up), exactly as required.
Out of Scope Changes check	✅ Passed	The addition of className prop support to CompatibilityRails is a necessary supporting change to enable flexible class merging for the reordering functionality, not an out-of-scope change.

---

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

[yamcodes]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[yamcodes]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.