fix(frontend): make landing page usable at mobile widths

[Adolanium]

Description

Operator report: the public landing (https://lucky.lucassantana.tech) is not usable on phone widths.

Static review of Landing.tsx found a few concrete overflow sources even though Tailwind breakpoints already exist:

1. Command list rows used a single horizontal flex with a fixed w-[120px] command column, so name + description + badge overflowed around 360px.
2. Top nav packed "github" + "add to discord" without a short mobile form.
3. Hero type floor (2.6rem) and a few cards lacked min-w-0 / wrap, so long strings could spill.

Fix

• Command list: stack name/badge above description below sm; only apply fixed command width from sm up.
• Top nav: icon-only github label and shorter CTA below 400px.
• Hero: lower clamp floor and allow word break.
• Repo card / why-self-host: tighter mobile padding, min-w-0, truncate where needed.

Verification

• Existing Landing unit tests still apply (content unchanged).
• Manual check at 360-414px: command rows stack, nav fits, clone line truncates instead of overflowing.

Checklist

• Layout-only change; Landing tests still cover content
• CHANGELOG.md updated (if user-facing)
• No TypeScript API changes

Destructive / irreversible interaction (Tier A)

Not applicable.

Feature-removal sweep

Not applicable.

Fixes #1825

---

Summary by cubic

Make the public landing page usable on phone widths by removing horizontal overflow and fitting the nav, hero, and command list. Fixes #1825.

• Bug Fixes
  • Top nav adds an xs (400px) breakpoint in @theme; GitHub is icon-only and invite shows “add” at xs; aria-labels added; tighter gaps; min-w-0 + whitespace-nowrap prevent overflow and are retained after merge.
  • Hero headline lowers the clamp floor, adjusts leading, and uses break-words for long strings.
  • Command list stacks below sm; fixed command width applies from sm+; description uses min-w-0/flex-1 with truncation on sm+; badge sits with the command on mobile.
  • Repo card and Why Self Host add min-w-0 at flex boundaries and truncation where needed; repo name truncates, license pill is shrink-0; clone line keeps flex-1 + min-w-0; tighter mobile padding with break-words.

^{Written for commit 1c6505b. Summary will update on new commits.}

[coderabbitai]

Warning

Review limit reached

@LucasSantana-Dev, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 20 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: d178e1be-0c71-4dfa-ac05-81594732af07

📥 Commits

Reviewing files that changed from the base of the PR and between 960fd62 and 1c6505b.

📒 Files selected for processing (2)

• packages/frontend/src/index.css
• packages/frontend/src/pages/Landing.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[cubic-dev-ai]

All reported issues were addressed across 1 file

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

0 issues found across 1 file (changes from recent commits).

<sub>Auto-approved: CSS layout adjustments to eliminate horizontal overflow on mobile widths: stacking command rows, truncating nav labels, and tightening padding. A bounded, clearly beneficial fix that Cubic has already reviewed for correctness.

Re-trigger cubic</sub>

[LucasSantana-Dev]

Kimi review (kimi-code/kimi-for-coding, via local subscription)

• VERDICT: CLEAN

---

Head 15d57ea. Posted by kimi-review-watch (launchd).

[LucasSantana-Dev]

This is a good pass. You went after the actual cause rather than hiding it with overflow-hidden: min-w-0 at each flex boundary, truncate on the repo name paired with shrink-0 on the license pill so the pill doesn't get crushed, and restacking the command list to flex-col below sm. Dropping the headline to clamp(2rem, 8vw, 4.4rem) with break-words is the right move for narrow viewports. The accessibility handling is also correct: aria-hidden on both the short and long label spans with aria-label on the anchor means the name comes from the label and the responsive text isn't announced twice.

Two things before merge.

1. Conflicts with #1874, and yours drops flex-1. #1874 fixes the same RepoCard <code>:

• #1874: min-w-0 flex-1 truncate text-lucky-text-body
• yours: min-w-0 truncate text-lucky-text-body

Without flex-1 the <code> doesn't claim the remaining width inside the justify-between row, so it truncates earlier than intended. Please keep flex-1 when you rebase. I'll sequence the two so we don't lose it.

2. min-[400px] is now load-bearing but undiscoverable. It appears four times across TopNav as an arbitrary value. Nobody scanning the Tailwind config will know 400px is meaningful, so the next person adding a nav item won't match it. Could you promote it to a named screen (xs or similar) in the theme, so it has one definition? Not a blocker, but it'll rot otherwise.

Nit: worth a quick check that sm:contents on the new wrapper does what you want, since display: contents removes the box from layout entirely and it's carrying the sm:order-last badge placement. Fine in current browsers, just the kind of thing that's easy to break later.

On the red checks: not yours. Security was an unpassable repo-wide gate, kimi-review fails on every PR because an API key isn't set, and the npm ci errors come from a stale lockfile on main. Fixed in #1876 (plus #1877 for the key). Rebase after that lands.

[LucasSantana-Dev]

Heads-up: the CI blockers I mentioned are fixed on main now (#1876, merged as ca410d2c).

What that clears:

• Security — it ran npm audit --audit-level=high across devDependencies and could never pass, which is why it was red on every PR including this one. It now audits production deps only, with an explicit allowlist pinned to individual advisory ids.
• npm ci / Build — shared / Quality Gates — main's lockfile was stale and npm@12's stricter ci rejected it (lock file's eslint@10.7.0 does not satisfy eslint@10.8.0). Resynced.
• compressed-size — it installs the base branch too, so it was failing on main's lockfile rather than on your changes.
• kimi-review — removed in ci: remove kimi-review until an api key is set #1884; the API key was never set, so it failed on every PR in the repo.

Please rebase onto main and push. The auto-update workflow only touches branches whose authors enabled auto-merge, so it deliberately won't rewrite yours. A rebase should turn the checks green without any change to your code.

The review feedback above is separate and still stands.

[Adolanium]

Addressed in 73eeb97 (squashed, rebased onto main).

• RepoCard clone code element is now min-w-0 flex-1 truncate so it still claims remaining width after fix(frontend): stop hero grid columns overflowing on narrow viewports #1874.
• Promoted the 400px nav threshold to a named xs breakpoint in index.css (--breakpoint-xs: 400px) and switched the TopNav classes to xs: variants.

[LucasSantana-Dev]

Review: approve

Layout-only change that does what it claims, keeps a11y intact where visible text is removed, and all 22 existing Landing tests still apply (ran them on base: 22/22 green).

P3 (nit): Landing.tsx:169-189 — the xs-toggle span pair (<span className='xs:hidden'>add</span> / <span className='hidden xs:inline'>add to discord</span>) is duplicated verbatim across the enabled <a> and disabled <button> CTA branches, so a future label tweak needs two edits. A tiny CtaLabel fragment would dedupe it. (The two-branch duplication is pre-existing, so optional.)

What's good: a11y handled correctly at the exact points where visible text disappears — the GitHub nav link gains aria-label='GitHub' when it becomes icon-only below 400px, and the CTA spans are aria-hidden with aria-label='Add to Discord' on the parent, so screen readers get one clean name. The sm:contents + sm:order-last pattern in CommandList is a clean way to get badge-next-to-name on mobile and badge-last on sm+ without restructuring the DOM. --breakpoint-xs: 400px via Tailwind v4 @theme is idiomatic and purely additive (zero existing xs: usages).

[Adolanium]

Rebased onto main and kept flex-1 on the repo card <code> so it still claims the remaining width next to the license pill.

xs (400px) stays as the named screen from the earlier pass. The CTA label duplication is pre-existing on both branches. Happy to extract a CtaLabel fragment in a follow-up if you want it.

[github-actions]

	Warnings
⚠️	User-facing change without a CHANGELOG.md update. Add a line under ## [Unreleased] if this should appear in release notes. (Or apply the skip-changelog label if this PR does not affect end users.)

Generated by 🚫 dangerJS against 1c6505b

[LucasSantana-Dev]

A note from the maintainer side: sorry this PR waited as long as it did for a proper review, and sorry for the rounds of branch updates and re-running checks today. The churn was on our side, not yours.

Your PRs exposed real gaps in how this repo handled external contributions: CI runs sat in a silent approval queue, some gates could never pass on fork PRs (SonarCloud, danger), and the team had no notification when external PRs arrived. Those are all fixed as of today:

• CI auto-approves for returning contributors, no more waiting on a manual click.
• All gates now pass on fork PRs (SonarCloud skips gracefully without a token, danger runs and comments correctly).
• The team gets notified the moment an external PR is opened.

Your branch is up to date and the full suite is green. Thanks for the patience and for the contribution. External contributors are very welcome here.