From 721b588a2b322050fc7b2f48bd08a7fea3bcd522 Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Fri, 20 Mar 2026 15:27:59 -0600
Subject: [PATCH] Fix layout cutoff on narrow desktop windows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Raise responsive layout breakpoints from 768px to 900px across all
components. This ensures narrow desktop browser windows (769–900px)
get the stacked, single-column layout rather than the three-column
grid that was too wide for those widths. The 768px breakpoint in
app.css is kept as-is since it only adjusts font sizes for iOS.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 bicorder-app/src/App.svelte                        | 2 +-
 bicorder-app/src/components/AnalysisDisplay.svelte | 2 +-
 bicorder-app/src/components/ExportControls.svelte  | 2 +-
 bicorder-app/src/components/GradientSlider.svelte  | 2 +-
 bicorder-app/src/components/HamburgerMenu.svelte   | 2 +-
 bicorder-app/src/components/MetadataFields.svelte  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/bicorder-app/src/App.svelte b/bicorder-app/src/App.svelte
index b1b70cd..986f1e2 100644
--- a/bicorder-app/src/App.svelte
+++ b/bicorder-app/src/App.svelte
@@ -941,7 +941,7 @@
     opacity: 0.7;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     main {
       padding: 0.5rem;
     }
diff --git a/bicorder-app/src/components/AnalysisDisplay.svelte b/bicorder-app/src/components/AnalysisDisplay.svelte
index f9881f9..1d951b8 100644
--- a/bicorder-app/src/components/AnalysisDisplay.svelte
+++ b/bicorder-app/src/components/AnalysisDisplay.svelte
@@ -357,7 +357,7 @@
     flex: 1;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     .gradient-row {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto;
diff --git a/bicorder-app/src/components/ExportControls.svelte b/bicorder-app/src/components/ExportControls.svelte
index af9fb4a..1711ab9 100644
--- a/bicorder-app/src/components/ExportControls.svelte
+++ b/bicorder-app/src/components/ExportControls.svelte
@@ -212,7 +212,7 @@
     flex: 1;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     .button-group {
       grid-template-columns: 1fr;
     }
diff --git a/bicorder-app/src/components/GradientSlider.svelte b/bicorder-app/src/components/GradientSlider.svelte
index 54a821e..e7d4715 100644
--- a/bicorder-app/src/components/GradientSlider.svelte
+++ b/bicorder-app/src/components/GradientSlider.svelte
@@ -310,7 +310,7 @@
     flex: 1;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     .gradient-row {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto;
diff --git a/bicorder-app/src/components/HamburgerMenu.svelte b/bicorder-app/src/components/HamburgerMenu.svelte
index b34d92f..3ec36f4 100644
--- a/bicorder-app/src/components/HamburgerMenu.svelte
+++ b/bicorder-app/src/components/HamburgerMenu.svelte
@@ -158,7 +158,7 @@
     flex: 1;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     .toolbar-btn {
       width: 1.5rem;
       height: 1.5rem;
diff --git a/bicorder-app/src/components/MetadataFields.svelte b/bicorder-app/src/components/MetadataFields.svelte
index b2e9dce..3040773 100644
--- a/bicorder-app/src/components/MetadataFields.svelte
+++ b/bicorder-app/src/components/MetadataFields.svelte
@@ -215,7 +215,7 @@
     opacity: 0.8;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     .metadata {
       padding: 0.5rem;
     }