Bug: Single link pages with extra height

[marcusljf]

Noticed that the single link pages had extra height on all of them which caused scrolling so this fixes that.

CleanShot.2026-02-12.at.15.48.48.mp4

Summary by CodeRabbit

• Style
  • Improved dynamic height calculations to better account for page margins across dashboard components
  • Enhanced responsive layout behavior for improved visual consistency
  • Refined visual stacking order of action elements for better UI presentation

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
dub	Ready	Preview	Feb 13, 2026 0:05am

[coderabbitai]

📝 Walkthrough

Walkthrough

CSS-level adjustments across three files refine layout sizing and stacking. Height calculations shift from static viewport-based values to dynamic calculations using CSS variables and dvh units. Additional responsive classes and z-index properties are applied for improved layout behavior.

Changes

Cohort / File(s)	Summary
Height Calculation Updates apps/web/app/app.dub.co/(dashboard)/[slug]/links/[...link]/page-client.tsx	Replaced static height min-h-[calc(100vh-8px)] with dynamic height min-h-[calc(100dvh-var(--page-top-margin)-var(--page-bottom-margin)-1px)] in LinkBuilder container and LoadingSkeleton components to account for page margins via CSS variables.
Layout Styling Adjustments apps/web/app/app.dub.co/(dashboard)/[slug]/links/[...link]/page.tsx	Expanded responsive utility classes on PageContentOld component: added h-full, min-h-full, md:flex, and md:flex-col to className; added h-full and grow to contentWrapperClassName.
Stacking Order apps/web/ui/links/link-builder/link-action-bar.tsx	Added z-10 to outer container className in LinkActionBar for stacking order adjustment.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• PR #3068: Changes viewport-height CSS calculations to subtract --page-bottom-margin using 100dvh and CSS variables to fix overflow/scrollbar issues; same pattern applied here.

Suggested reviewers

• steven-tey

Poem

🐰 From fixed heights to dynamic dance,
Margins now bend at CSS's glance,
Z-stacks ascend, layouts align,
Responsive grace—a polish so fine! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 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 (3 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: fixing a bug where single link pages had extra height causing unnecessary scrolling.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch single-short-link-extra-height

---

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

🤖 Fix all issues with AI agents

In `@apps/web/app/app.dub.co/`(dashboard)/[slug]/links/[...link]/page-client.tsx:
- Line 142: The inline className on the div contains a malformed CSS calc with
an extra closing parenthesis; in the JSX element where className="flex
min-h-[calc(100dvh-var(--page-top-margin)-var(--page-bottom-margin)-1px))] ..."
(the div in page-client.tsx), remove the surplus trailing ')' so the min-h
utility becomes
min-h-[calc(100dvh-var(--page-top-margin)-var(--page-bottom-margin)-1px)] (or
add spaces for readability like calc(100dvh - var(--page-top-margin) -
var(--page-bottom-margin) - 1px)) ensuring balanced parentheses.