From 0c794dddae1f942fb87212588834367e3ae19b5b Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Fri, 20 Mar 2026 15:56:58 -0600
Subject: [PATCH] Improve layout responsiveness on narrow windows

Prevent horizontal overflow with overflow-x: hidden on body. Make the
gradient bar fill its container in focused mode (width: 100%;
min-width: 0) rather than holding a fixed minimum width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 bicorder-app/src/app.css                           | 1 +
 bicorder-app/src/components/AnalysisDisplay.svelte | 5 +++++
 bicorder-app/src/components/GradientSlider.svelte  | 5 +++++
 3 files changed, 11 insertions(+)

diff --git a/bicorder-app/src/app.css b/bicorder-app/src/app.css
index 7ddbd05..67a4b0b 100644
--- a/bicorder-app/src/app.css
+++ b/bicorder-app/src/app.css
@@ -47,6 +47,7 @@ body {
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   font-size: 16px;
+  overflow-x: hidden;
 }
 
 #app {
diff --git a/bicorder-app/src/components/AnalysisDisplay.svelte b/bicorder-app/src/components/AnalysisDisplay.svelte
index 1d951b8..1d6cfc6 100644
--- a/bicorder-app/src/components/AnalysisDisplay.svelte
+++ b/bicorder-app/src/components/AnalysisDisplay.svelte
@@ -214,6 +214,11 @@
     width: 100%;
   }
 
+  .gradient-row.focused .bar {
+    width: 100%;
+    min-width: 0;
+  }
+
   .term {
     text-align: center;
     font-size: 0.9rem;
diff --git a/bicorder-app/src/components/GradientSlider.svelte b/bicorder-app/src/components/GradientSlider.svelte
index e7d4715..3ecacc0 100644
--- a/bicorder-app/src/components/GradientSlider.svelte
+++ b/bicorder-app/src/components/GradientSlider.svelte
@@ -189,6 +189,11 @@
     width: 100%;
   }
 
+  .gradient-row.focused .bar {
+    width: 100%;
+    min-width: 0;
+  }
+
   .term {
     text-align: center;
     font-size: 0.9rem;