Fix layout cutoff on narrow desktop windows

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

@@ -941,7 +941,7 @@
     opacity: 0.7;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 900px) {
     main {
       padding: 0.5rem;
     }

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;

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;
     }

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;

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;

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;
     }