Remove card styling from phone “Try this” ticker and tighten mode‑home spacing

[BigSimmo]

Motivation

• The phone suggestion ticker was rendering as a bordered/raised card which the design requested to be plain text over the search bar and more tightly spaced with its heading.
• The mode-home hero subtitle needed a slightly smaller gap to bring supporting text closer to the heading on phones.

Description

• Remove the card treatment (border, background, radius, and inset shadow) from the phone ticker and adjust its spacing/padding variables so the text groups are more spread apart while preserving the tap target height. (edited src/app/globals.css — .smart-search-phone-ticker and related rules)
• Reduce the gap between the hero heading and its supporting copy on mobile by tightening the grid gap used in the mode‑home hero. (edited src/components/mode-home-template.tsx — ModeHomeHero grid gap)

Testing

• Ran formatting with npm run format and applied changes successfully.
• Ran the unit/dom test npm run test -- --run tests/shared-home-empty-state.dom.test.tsx and it passed (15 tests passed).
• Performed a headless Chromium check with Playwright to capture artifacts/phone-search-ticker.png and programmatically inspected the ticker to confirm border: 0, background: transparent, and preserved 48px tap height; the visual check succeeded.
• Attempted the full Playwright e2e spec run for the related UI test, but the repository’s isolated Playwright production build/coordination step interfered; as a result the specific e2e runner was not completed and the UI was validated via the direct headless Chromium check above instead.

---

Codex Task

Summary by CodeRabbit

• Style
  • Refined the smart search ticker with a flatter, more compact appearance.
  • Reduced spacing between the home hero title and subtitle for a tighter layout.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 11 minutes

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

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

Run ID: 454a5192-6a20-4b03-bf70-9aba5eaf757b

📥 Commits

Reviewing files that changed from the base of the PR and between 5a5f7bd and 02eb8d3.

📒 Files selected for processing (1)

• src/app/globals.css

📝 Walkthrough

Walkthrough

The home interface now uses tighter hero spacing. The phone ticker has reduced spacing and padding, with a transparent background and no border, rounded treatment, or inset shadow.

Changes

Home UI compactness

Layer / File(s)	Summary
Compact home styles src/app/globals.css, src/components/mode-home-template.tsx	The phone ticker uses reduced spacing and a flatter transparent style. The hero text wrapper uses smaller vertical gaps across breakpoints.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• BigSimmo/Database#421: Directly overlaps the phone ticker and ModeHomeHero spacing and styling changes.
• BigSimmo/Database#496: Modifies shared ModeHomeHero spacing and styling for a more compact layout.
• BigSimmo/Database#1805: Introduces the phone suggestion ticker styling area changed by this PR.

Suggested reviewers: claude, cursoragent

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 clearly summarizes the ticker card-style removal and the related mode-home spacing adjustment.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/remove-border-and-adjust-text-spacing

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/app/globals.css (1)

1825-1827: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Reuse shared spacing tokens for the new values.

The declarations introduce raw rem design values. Reference existing Tailwind 4 spacing tokens, or define shared values in @theme if they do not exist. Keep these component variables as aliases to the shared scale.

As per coding guidelines, **/*.{ts,tsx,css} must use Tailwind 4 @theme tokens instead of introducing hardcoded design values.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/globals.css` around lines 1825 - 1827, Update the smart-search ticker
variables near --smart-search-phone-ticker-gap,
--smart-search-phone-ticker-inline-padding, and
--smart-search-phone-ticker-vertical-padding to reference existing Tailwind 4
spacing tokens instead of raw rem values; if suitable tokens do not exist,
define shared values in `@theme` and alias these component variables to them.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/globals.css`:
- Line 1828: Insert a blank line immediately before the min-height declaration
in the affected stylesheet rule so it satisfies the configured
declaration-empty-line-before Stylelint rule.

---

Nitpick comments:
In `@src/app/globals.css`:
- Around line 1825-1827: Update the smart-search ticker variables near
--smart-search-phone-ticker-gap, --smart-search-phone-ticker-inline-padding, and
--smart-search-phone-ticker-vertical-padding to reference existing Tailwind 4
spacing tokens instead of raw rem values; if suitable tokens do not exist,
define shared values in `@theme` and alias these component variables to them.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2348c8af-95bb-4dae-b865-dc60a85a5cb4

📥 Commits

Reviewing files that changed from the base of the PR and between e8b61d8 and 5a5f7bd.

📒 Files selected for processing (2)

• src/app/globals.css
• src/components/mode-home-template.tsx

[BigSimmo]

Unblock snapshot for PR #1808

• PR head: 03d7e005da8d986deb5b78341734534bca2a4946 (branch codex/remove-border-and-adjust-text-spacing)
• Mergeable state: mergeStateStatus=BLOCKED, mergeable=MERGEABLE
• Sync status: started from remote tip (worktree was reset to PR head; no local-only edits).
• origin/main comparison: head is 2 commits ahead, no commits behind.
• git merge-tree: clean (no real conflicts).

What blocked:

• One unresolved review thread remains on src/app/globals.css:1828 from CodeRabbit (declaration-empty-line-before stylelint suggestion), advisory only and not tied to a required check.
• Merge state is blocked because required CI is currently running in-flight.

Required checks snapshot:

• Gitleaks: SUCCESS
• PR policy: SUCCESS
• Build: IN_PROGRESS
• Static PR checks: IN_PROGRESS
• Production UI critical: IN_PROGRESS
• Unit coverage: IN_PROGRESS
• Advisory checks (Visual baselines, Advisory UI) are skipped.

Residual risk:

• If required gates fail, likely PR needs a follow-up blocker fix on this PR tip.
• No code or blocker-only fix was applied, no push was made from this PR tip.

Merge left to you.

[BigSimmo]

Unblock sweep snapshot

• PR: Remove card styling from phone “Try this” ticker and tighten mode‑home spacing #1808
• Head: 74cfb3190c5d9ffa3e4cc9ed9255fc9f0864dbb0
• Head update: one gh pr update-branch sync from origin/main completed.
• Mergeability: mergeable=MERGEABLE, merge-tree clean versus origin/main.
• Status: mergeStateStatus currently BLOCKED while checks are green.
• Required checks: PR required, PR policy, CI, and Production UI (1/2/3) all green.
• Blocking items: no required-CI blockers; unresolved open thread is a Stylelint/Coderabbit suggestion on src/app/globals.css (non-blocking unless addressed manually).

What was fixed/dispositioned

• Applied required unblock action only: main sync commit on branch.
• No source changes made for unblock beyond sync.
• Appended unblock ledger record for this head.

Residual risks

• Merge remains blocked by repository merge-state despite green checks (likely external review/approval policy).