← back to Exo

scrollbars fixed (#1113)

d1e88def422d00fcea763142494050c309ab7645 · 2026-01-09 17:51:05 +0500 · Sami Khan

## Motivation

Fixes https://github.com/exo-explore/exo/issues/1107 - Horizontal
scrollbar always appears in instances section, and vertical scrollbar
appears too early (with just 1-2 instances on large screens).


## Changes

- Added overflow-x-hidden to remove horizontal scrollbar
- Added xl:max-h-96 for responsive vertical height (384px on xl+ screens
vs 288px default)
- Added py-px to accommodate corner accent decorations that extend 1px
outside cards

## Why It Works

- overflow-x-hidden prevents horizontal scroll regardless of content
- Larger max-height on xl screens fits 2 instances without scrollbar;
3rd triggers it
- 1px vertical padding accommodates the -top-px/-bottom-px positioned
corner accents that caused tiny overflow

## Test Plan

### Manual Testing
<img width="1190" height="868" alt="image"
src="https://github.com/user-attachments/assets/2a582328-5b4f-4490-a488-52106f2e85ef"
/>

### Automated Testing
N/A

Files touched

• M dashboard/src/routes/+page.svelte

Diff

commit d1e88def422d00fcea763142494050c309ab7645
Author: Sami Khan <98742866+samiamjidkhan@users.noreply.github.com>
Date:   Fri Jan 9 17:51:05 2026 +0500

    scrollbars fixed (#1113)
    
    ## Motivation
    
    Fixes https://github.com/exo-explore/exo/issues/1107 - Horizontal
    scrollbar always appears in instances section, and vertical scrollbar
    appears too early (with just 1-2 instances on large screens).
    
    
    ## Changes
    
    - Added overflow-x-hidden to remove horizontal scrollbar
    - Added xl:max-h-96 for responsive vertical height (384px on xl+ screens
    vs 288px default)
    - Added py-px to accommodate corner accent decorations that extend 1px
    outside cards
    
    ## Why It Works
    
    - overflow-x-hidden prevents horizontal scroll regardless of content
    - Larger max-height on xl screens fits 2 instances without scrollbar;
    3rd triggers it
    - 1px vertical padding accommodates the -top-px/-bottom-px positioned
    corner accents that caused tiny overflow
    
    ## Test Plan
    
    ### Manual Testing
    <img width="1190" height="868" alt="image"
    src="https://github.com/user-attachments/assets/2a582328-5b4f-4490-a488-52106f2e85ef"
    />
    
    ### Automated Testing
    N/A
---
 dashboard/src/routes/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/routes/+page.svelte b/dashboard/src/routes/+page.svelte
index a196c72c..1e57bcd9 100644
--- a/dashboard/src/routes/+page.svelte
+++ b/dashboard/src/routes/+page.svelte
@@ -1267,9 +1267,9 @@ function toggleInstanceDownloadDetails(nodeId: string): void {
 							<div class="flex-1 h-px bg-gradient-to-r from-exo-yellow/30 to-transparent"></div>
 						</div>
 						
-						<div 
+						<div
 							bind:this={instancesContainerRef}
-							class="max-h-72 space-y-3 overflow-y-auto"
+							class="max-h-72 xl:max-h-96 space-y-3 overflow-y-auto overflow-x-hidden py-px"
 						>
 								{#each Object.entries(instanceData) as [id, instance]}
 									{@const downloadInfo = getInstanceDownloadStatus(id, instance)}
@@ -1773,7 +1773,7 @@ function toggleInstanceDownloadDetails(nodeId: string): void {
 								<h3 class="text-xs text-exo-yellow font-mono tracking-[0.2em] uppercase">Instances</h3>
 								<div class="flex-1 h-px bg-gradient-to-r from-exo-yellow/30 to-transparent"></div>
 							</div>
-								<div class="space-y-3 max-h-72 overflow-y-auto pr-1">
+								<div class="space-y-3 max-h-72 xl:max-h-96 overflow-y-auto overflow-x-hidden py-px pr-1">
 									{#each Object.entries(instanceData) as [id, instance]}
 										{@const downloadInfo = getInstanceDownloadStatus(id, instance)}
 										{@const statusText = downloadInfo.statusText}

← 59e7594e UNKNOWN to PREPARING (#1112)  ·  back to Exo  ·  cleanup unused dependencies cca8c998 →