From 6d05535ec9d30b1728c54e4b4bdaa734667955cb Mon Sep 17 00:00:00 2001
From: Bob <bob@superuserlabs.org>
Date: Sun, 6 Sep 2026 08:47:42 +0000
Subject: [PATCH] fix(timeline): prevent mobile horizontal overflow

Git-Session-Id: 8a48
---
 src/components/InputTimeInterval.vue | 13 ++++++++++++-
 test/e2e/screenshot.test.js          | 13 +++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index db3428e40..2a1855791 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -68,10 +68,11 @@ div
   display: grid;
   // Fixed label column keeps Mode/Range labels aligned and the controls
   // start at the same X regardless of which mode is active.
-  grid-template-columns: 4rem 1fr;
+  grid-template-columns: 4rem minmax(0, 1fr);
   column-gap: 0.75rem;
   row-gap: 0.5rem;
   align-items: center;
+  min-width: 0;
 }
 
 .btn-group {
@@ -81,6 +82,16 @@ div
     border-color: #495057;
   }
 }
+
+@media (max-width: 575.98px) {
+  .time-interval-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .btn-group {
+    flex-wrap: wrap;
+  }
+}
 </style>
 
 <script lang="ts">
diff --git a/test/e2e/screenshot.test.js b/test/e2e/screenshot.test.js
index 54a76117e..b74702132 100644
--- a/test/e2e/screenshot.test.js
+++ b/test/e2e/screenshot.test.js
@@ -73,6 +73,12 @@ async function checkNoError(t) {
   }
 }
 
+async function checkNoHorizontalOverflow(t) {
+  await t
+    .expect(Selector('html').scrollWidth)
+    .lte(await t.eval(() => document.documentElement.clientWidth));
+}
+
 const logJsErrorCode = `
   window.addEventListener('error', function (e) {
       console.error(e.message);
@@ -140,6 +146,13 @@ test.clientScripts({
     fullPage: true,
   });
   await checkNoError(t);
+});
+
+test('Timeline has no horizontal page overflow on mobile', async t => {
+  await t.resizeWindow(360, 800);
+  await hide_devonly(t);
+  await waitForLoading(t);
+  await checkNoHorizontalOverflow(t);
 
   // Debugging
   // console.log(await t.getBrowserConsoleMessages());