From 7c7a250381e44776f938aa3276ed58fe733c47ad Mon Sep 17 00:00:00 2001 From: Bob Date: Sun, 20 Sep 2026 02:01:59 +0000 Subject: [PATCH] fix(mobile): wrap long tooltip data and example pattern so the page doesn't widen vis-timeline sets white-space: nowrap on .vis-tooltip, so the existing max-width: 400px never wrapped anything: long unbroken event data (JSON, URLs) overflowed the tooltip and made the whole page wider than the viewport on mobile, which in turn pushed the event editor modal off screen. Wrap the tooltip text, and cap its width to the viewport. The 'Always count as active pattern' example expression on /settings/categorization was wrapped in text-nowrap and had the same effect. Measured in headless Chrome at a 375px viewport with a 180-char unbroken title: document scroll width 2379px before, 375px after. Git-Session-Id: a074 --- src/views/settings/ActivePatternSettings.vue | 2 +- src/visualizations/VisTimeline.vue | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/views/settings/ActivePatternSettings.vue b/src/views/settings/ActivePatternSettings.vue index 355b71a69..49dfa0545 100644 --- a/src/views/settings/ActivePatternSettings.vue +++ b/src/views/settings/ActivePatternSettings.vue @@ -9,7 +9,7 @@ div | | Can be used to count time as active, despite no input (like meetings, or games with controllers). An empty string disables it. | - span.text-nowrap + span | Example expression:  code(style="background-color: rgba(200, 200, 200, 0.3); padding: 2px 4px; border-radius: 2px;") | Zoom Meeting|Google Meet|Microsoft Teams diff --git a/src/visualizations/VisTimeline.vue b/src/visualizations/VisTimeline.vue index 90501f76d..a9299dc67 100644 --- a/src/visualizations/VisTimeline.vue +++ b/src/visualizations/VisTimeline.vue @@ -23,8 +23,13 @@ div#visualization { // Position tooltip above the cursor instead of overlapping the timeline bars transform: translateY(-100%); margin-top: -15px; - // Ensure tooltip is readable - max-width: 400px; + // Ensure tooltip is readable. vis-timeline sets `white-space: nowrap`, so + // long unbroken event data (JSON, URLs) would overflow the box and widen + // the whole page on mobile; wrap it and cap the width to the viewport. + max-width: min(400px, calc(100vw - 20px)); + box-sizing: border-box; + white-space: normal; + overflow-wrap: anywhere; pointer-events: none; }