opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): prevent vertical scrollbar caused by deployment banner (#22877)

Browse Source 
## Summary

When the deployment banner's horizontal scrollbar appears on narrow
viewports, it triggers an unwanted vertical scrollbar on the page.
<img width="2262" height="598" alt="image"
src="https://github.com/user-attachments/assets/5ef98d44-87ba-4db0-baa1-d9914abfae0e"
/>

## Root Cause

The app sets `scrollbar-gutter: stable` on `<html>` (in `index.css`)
which reserves space for a vertical scrollbar. The `DashboardLayout`
uses `min-h-screen` with `justify-between`, making content fill exactly
100vh. When the deployment banner's `overflow-x: auto` activates a
horizontal scrollbar, the scrollbar track adds height that pushes the
document past 100vh, triggering the vertical scrollbar.

## Fix

Add `overflow-y-hidden` to the deployment banner. This prevents the
horizontal scrollbar's track height from contributing to the document's
vertical overflow.

## Changes

- `DeploymentBannerView.tsx`: Added `overflow-y-hidden` alongside
existing `overflow-x-auto`
This commit is contained in:
TJ
2026-03-11 07:42:38 -07:00
committed by GitHub
parent 9d2643d3aa
commit 2f2ba0ef7e
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
+1 -1
View File
@@ -103,7 +103,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
return (
<div
className="sticky bottom-0 z-[1] flex h-9 w-full items-center gap-8
overflow-x-auto whitespace-nowrap border-0 border-t border-solid border-border
overflow-x-auto overflow-y-hidden whitespace-nowrap border-0 border-t border-solid border-border
bg-surface-primary pr-4 font-mono text-xs leading-none [scrollbar-width:thin]"
>
<TooltipProvider delayDuration={100}>