From ed494d2ae561d0b66abebe2eca5561f1a84aeb2a Mon Sep 17 00:00:00 2001 From: Lotus CI Date: Mon, 19 Oct 2026 14:14:26 -0400 Subject: [PATCH] fix(room): one width for every right-hand panel (#263) Members and bookmarks were 266px, the gallery 320, the threads list 340, a thread and widgets 360. Swapping panels resized the room view, so the header icons slid sideways (74px for members -> threads) and a second click on the same spot opened Widgets instead of closing the panel. All six now use SIDE_PANEL_WIDTH (340px, styles/sidePanel.ts). Fixes #263 Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5 --- src/app/features/bookmarks/BookmarksPanel.css.ts | 7 ++++--- src/app/features/room/MediaGallery.css.ts | 10 +++++----- src/app/features/room/MembersDrawer.css.ts | 5 +++-- src/app/features/room/thread/ThreadPanel.css.ts | 5 +++-- src/app/features/room/thread/ThreadsListPanel.css.ts | 5 +++-- src/app/features/room/widgets/WidgetsPanel.css.ts | 5 +++-- src/app/styles/sidePanel.ts | 9 +++++++++ 7 files changed, 30 insertions(+), 16 deletions(-) create mode 100644 src/app/styles/sidePanel.ts diff --git a/src/app/features/bookmarks/BookmarksPanel.css.ts b/src/app/features/bookmarks/BookmarksPanel.css.ts index 1a9bfd1ae..bc951e048 100644 --- a/src/app/features/bookmarks/BookmarksPanel.css.ts +++ b/src/app/features/bookmarks/BookmarksPanel.css.ts @@ -1,10 +1,11 @@ import { style } from '@vanilla-extract/css'; -import { config, toRem } from 'folds'; +import { config } from 'folds'; +import { SIDE_PANEL_WIDTH } from '../../styles/sidePanel'; -// Mirrors MembersDrawer: a 266px side panel on desktop that becomes a +// Mirrors MembersDrawer: a side panel (shared width) on desktop that becomes a // full-screen fixed panel on narrow viewports — the app's canonical drawer. export const BookmarksPanel = style({ - width: toRem(266), + width: SIDE_PANEL_WIDTH, '@media': { '(max-width: 750px)': { position: 'fixed', diff --git a/src/app/features/room/MediaGallery.css.ts b/src/app/features/room/MediaGallery.css.ts index e760b3032..a5c790e0c 100644 --- a/src/app/features/room/MediaGallery.css.ts +++ b/src/app/features/room/MediaGallery.css.ts @@ -1,13 +1,13 @@ import { style } from '@vanilla-extract/css'; import { color, config, toRem } from 'folds'; +import { SIDE_PANEL_WIDTH } from '../../styles/sidePanel'; // Right-side drawer DOCKED into the room layout row (a flex sibling of the -// timeline), exactly like MembersDrawer — not a floating overlay. 320px is a -// little wider than the 266px member/bookmark drawers because it hosts a media -// grid. On narrow viewports it becomes a full-screen fixed panel, matching the -// app's other drawers. +// timeline), exactly like MembersDrawer — not a floating overlay. Same width as +// every other right-hand panel (styles/sidePanel.ts, #263). On narrow viewports +// it becomes a full-screen fixed panel, matching the app's other drawers. export const MediaGalleryDrawer = style({ - width: toRem(320), + width: SIDE_PANEL_WIDTH, overflow: 'hidden', '@media': { '(max-width: 750px)': { diff --git a/src/app/features/room/MembersDrawer.css.ts b/src/app/features/room/MembersDrawer.css.ts index 24b940be1..97a39f6ed 100644 --- a/src/app/features/room/MembersDrawer.css.ts +++ b/src/app/features/room/MembersDrawer.css.ts @@ -1,8 +1,9 @@ import { keyframes, style } from '@vanilla-extract/css'; -import { config, toRem } from 'folds'; +import { config } from 'folds'; +import { SIDE_PANEL_WIDTH } from '../../styles/sidePanel'; export const MembersDrawer = style({ - width: toRem(266), + width: SIDE_PANEL_WIDTH, '@media': { '(max-width: 750px)': { position: 'fixed', diff --git a/src/app/features/room/thread/ThreadPanel.css.ts b/src/app/features/room/thread/ThreadPanel.css.ts index 56000e360..e8a87e26b 100644 --- a/src/app/features/room/thread/ThreadPanel.css.ts +++ b/src/app/features/room/thread/ThreadPanel.css.ts @@ -1,8 +1,9 @@ import { style } from '@vanilla-extract/css'; -import { config, toRem } from 'folds'; +import { config } from 'folds'; +import { SIDE_PANEL_WIDTH } from '../../../styles/sidePanel'; export const ThreadPanel = style({ - width: toRem(360), + width: SIDE_PANEL_WIDTH, '@media': { '(max-width: 750px)': { position: 'fixed', diff --git a/src/app/features/room/thread/ThreadsListPanel.css.ts b/src/app/features/room/thread/ThreadsListPanel.css.ts index 75360528a..12eebbf68 100644 --- a/src/app/features/room/thread/ThreadsListPanel.css.ts +++ b/src/app/features/room/thread/ThreadsListPanel.css.ts @@ -1,8 +1,9 @@ import { style } from '@vanilla-extract/css'; -import { color, config, toRem } from 'folds'; +import { color, config } from 'folds'; +import { SIDE_PANEL_WIDTH } from '../../../styles/sidePanel'; export const ThreadsListPanel = style({ - width: toRem(340), + width: SIDE_PANEL_WIDTH, '@media': { '(max-width: 750px)': { position: 'fixed', diff --git a/src/app/features/room/widgets/WidgetsPanel.css.ts b/src/app/features/room/widgets/WidgetsPanel.css.ts index 63240072d..fa03abe8e 100644 --- a/src/app/features/room/widgets/WidgetsPanel.css.ts +++ b/src/app/features/room/widgets/WidgetsPanel.css.ts @@ -1,8 +1,9 @@ import { style } from '@vanilla-extract/css'; -import { config, toRem } from 'folds'; +import { config } from 'folds'; +import { SIDE_PANEL_WIDTH } from '../../../styles/sidePanel'; export const WidgetsPanel = style({ - width: toRem(360), + width: SIDE_PANEL_WIDTH, '@media': { '(max-width: 750px)': { position: 'fixed', diff --git a/src/app/styles/sidePanel.ts b/src/app/styles/sidePanel.ts new file mode 100644 index 000000000..76834ef4c --- /dev/null +++ b/src/app/styles/sidePanel.ts @@ -0,0 +1,9 @@ +import { toRem } from 'folds'; + +/** + * One width for every right-hand room panel (members, bookmarks, threads, a + * thread, media gallery, widgets). Swapping one panel for another must not + * resize the room view: when the widths differed, the header icons slid + * sideways and a second click on the same spot hit a different button (#263). + */ +export const SIDE_PANEL_WIDTH = toRem(340); -- 2.47.3