From 3ba70889fa90a591b32183db86ffdb5a14c17e5b Mon Sep 17 00:00:00 2001
From: Eshan Iyer <eshan.k.iyer@gmail.com>
Date: Tue, 30 Jun 2026 09:37:03 -0400
Subject: [PATCH] Make the CT viewer usable on mobile screens

Adds a mobile breakpoint (max-width 768px) to the viewer: the 2x2 MPR grid
stacks into a scrollable single column, the floating control drawer fits the
screen instead of a fixed desktop width, and the toolbar wraps. Scoped to
small screens via media query, so the desktop layout is unchanged.
---
 PanTS-Demo/src/routes/VisualizationPage.css | 27 +++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/PanTS-Demo/src/routes/VisualizationPage.css b/PanTS-Demo/src/routes/VisualizationPage.css
index fd0db7f..67674c1 100644
--- a/PanTS-Demo/src/routes/VisualizationPage.css
+++ b/PanTS-Demo/src/routes/VisualizationPage.css
@@ -777,3 +777,30 @@
   pointer-events: none;
   z-index: 9999;
 }
+
+@media (max-width: 768px) {
+  .VisualizationPage {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+
+  .sidebar {
+    max-width: 100%;
+  }
+
+  .visualization-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+    grid-auto-rows: 62vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .vp-sidebar {
+    width: min(90vw, 22rem) !important;
+  }
+
+  .vp-toolrow {
+    flex-wrap: wrap;
+  }
+}