Hive Hive
Sign in
Projects
Domains
Forage
Specs
Drops

fix(server): remove min-width:100vw causing horizontal scroll with classic scrollbars

GitHub issue · Closed

Metadata
Source
tuist/tuist #11018
Updated
Jun 24, 2026
Details

What changed

Removed min-width: 100vw from the dashboard’s top-level .layout element in server/assets/app/css/layouts.css.

Why

When opening the server dashboard in Chrome on macOS with a regular mouse (not a trackpad), a spurious horizontal scrollbar appeared.

Root cause

100vw measures the full viewport width including the vertical scrollbar gutter:

  • Trackpad → macOS uses overlay scrollbars (0px wide), so 100vw equals the usable content area and nothing overflows.
  • Regular mouse → macOS shows classic scrollbars (~15px wide), so the usable content area becomes 100vw − 15px, while .layout was still forced to the full 100vw — about 15px wider than the space it occupies. That overflow is the horizontal scrollbar.

.layout is used by every dashboard layout (account, project, headerbar, ops).

Why remove rather than swap to 100%

.layout is a block-level <main> rendered directly inside <body>, so it already fills the available width by default — and that width already excludes the scrollbar (the root <html> carries scrollbar-gutter: stable). The min-width floor was therefore redundant. Swapping to 100% would also work, but the cleanest fix is to drop the unnecessary declaration entirely.

A viewport unit (100vw/100dvw/100svw) would not fix this — none of them subtract the classic scrollbar; the d/s/l variants only differ in how they treat mobile browser chrome.

Impact

The dashboard no longer shows a horizontal scrollbar on macOS (or any platform with classic, space-occupying scrollbars). No visual change for trackpad/overlay-scrollbar users.

Validation

Inspected the layout chain (app.html.heex → <body> → <main class="layout">) to confirm .layout fills <body>’s content width without the min-width floor, and that scrollbar-gutter: stable already reserves the gutter. The removed declaration was the only 100vw usage in the app dashboard CSS.

Before

After

🤖 Generated with Claude Code

Comments
GA
github-actions[bot] Jun 1, 2026

✍️ CLA Signature Required

Hi @esnunes! 👋

Thank you for your contribution to Tuist! Before we can merge your PR that modifies server code, you’ll need to sign our Contributor License Agreement (CLA).

How to sign the CLA:

  1. Read the CLA document: 📄 Contributor License Agreement

  2. Sign using mise command (if you have the repo locally):

    mise run cla-sign

    git add server/cla/signatures.json

    git commit -m "add CLA signature for esnunes"

    git push

  3. Or fork the repo and manually add your signature:

    • Fork this repository
    • Edit server/cla/signatures.json
    • Add your signature entry to the signedContributors array
    • Submit a PR with your signature

Once you’ve signed the CLA, this check will automatically pass! 🎉

This is an automated message. The CLA is required for all contributions to server code to ensure we can continue to maintain and distribute Tuist under our chosen license.

TA
tuist-atlas[bot] Jun 3, 2026

The fix for the horizontal scrollbar issue with classic scrollbars is now available in server@1.204.1. Update to this version to get the fix.