From 69a7e39c4bc8846713d94f17976e8a9f6a3c60dd Mon Sep 17 00:00:00 2001 From: peter Date: Thu, 3 Sep 2026 13:45:02 +0100 Subject: [PATCH] Auto-adjust artifact sidebar width when the source column drops MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When a single source is selected the row's source column is hidden, so the sidebar now renders 112px (7rem) narrower and the reclaimed space goes to the preview pane — instead of the sidebar staying the same width and just widening the title. One stored "base" width drives both modes (wide = stored, source-selected = stored - 112, floored at 150px); dragging the splitter in either mode adjusts that base directly, so the width stays user-settable in whichever mode and the modes track each other by the fixed offset. Avoids having to re-resize every time you switch modes. Co-Authored-By: Claude Opus 4.8 --- templates/artifacts/feed.html | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/templates/artifacts/feed.html b/templates/artifacts/feed.html index 5c37acb..c482a60 100644 --- a/templates/artifacts/feed.html +++ b/templates/artifacts/feed.html @@ -131,6 +131,15 @@ if (!feed) return; let selectedView = "{{ selected_view }}"; + // When a single source is selected, the row's source column is dropped + // (see .no-source-col), so the artifact sidebar needs ~7rem less width. + // The stored width is the "all sources" (wide) width; a selected source + // renders it minus this fixed offset. Dragging the splitter in either + // mode adjusts the stored width directly, so the width is settable in + // whichever mode you're in and the other mode tracks it by the offset. + const SOURCE_COL_WIDTH = 112; // 7rem, matches the dropped source column + const sourceSelected = Boolean(feed.dataset.selectedSource); + const sizes = { days: Number(localStorage.getItem("daybook.daysWidth")) || 144, artifacts: Number(localStorage.getItem("daybook.artifactsWidth")) || 280, @@ -138,7 +147,10 @@ const applySizes = () => { feed.style.setProperty("--days-width", `${sizes.days}px`); - feed.style.setProperty("--artifacts-width", `${sizes.artifacts}px`); + const artifactsWidth = sourceSelected + ? Math.max(150, sizes.artifacts - SOURCE_COL_WIDTH) + : sizes.artifacts; + feed.style.setProperty("--artifacts-width", `${artifactsWidth}px`); }; applySizes();