peter/daybook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Auto-adjust artifact sidebar width when the source column drops

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
peter 2026-09-03 13:45:02 +01:00
parent a41e8dcfa5
commit 69a7e39c4b
1 changed files with 13 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
templates/artifacts/feed.html
View file

@ -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();