fix(shell): review cleanup for the resizable sidebar

Restore the Fixed-mode main column class exactly as before (min-w-0 is
now applied only in Resizable mode, so the desktop default DOM stays
byte-identical), drop the unused committed drag flag, remove a stray
blank line and the redundant width-commit wrapper, and align the
separator keyboard step on the 8 px used by the file explorer pane.
This commit is contained in:
Anso
2026-09-08 10:19:28 -04:00
parent f16a4ae26f
commit fcd07a0be7
4 changed files with 8 additions and 13 deletions
+2 -3
View File
@@ -463,7 +463,6 @@ export default function EditorLayout() {
// `activeView`, so 'dashboard' still maps to HomeDashboard everywhere.
const isMobile = useIsMobile();
const { sidebarMode, sidebarWidth, setSidebarWidth } = useSidebarLayout();
const commitSidebarWidth = useCallback((width: number) => setSidebarWidth(width), [setSidebarWidth]);
const [mobileView, setMobileView] = useState<MobileView>('list');
const [mobileSettingsSection, setMobileSettingsSection] = useState<SectionId | null>(null);
// Optimistically flip to the detail surface the instant a row is tapped,
@@ -1049,7 +1048,7 @@ export default function EditorLayout() {
const sidebarSlotEl = !isMobile && sidebarMode === 'resizable' ? (
<SidebarResizePane
sidebarWidth={sidebarWidth}
onCommitWidth={commitSidebarWidth}
onCommitWidth={setSidebarWidth}
>
{sidebarEl}
</SidebarResizePane>
@@ -1397,7 +1396,7 @@ export default function EditorLayout() {
{/* Left Sidebar (Stacks) */}
{sidebarSlotEl}
{/* Main Content Area */}
<div className="flex-1 min-w-0 flex flex-col overflow-hidden">
<div className={`${sidebarMode === 'resizable' ? 'min-w-0 ' : ''}flex-1 flex flex-col overflow-hidden`}>
{topBarEl}
{/* Main Workspace */}
{workspaceEl}
@@ -18,7 +18,7 @@ const MIN_WORKSPACE = 560;
/** Separator hit area in px between sidebar and workspace. */
const HANDLE_FOOTPRINT = 12;
/** Keyboard step per arrow press, in px. */
const KEY_STEP = 16;
const KEY_STEP = 8;
interface SidebarResizePaneProps {
sidebarWidth: number;
@@ -36,7 +36,6 @@ export function SidebarResizePane({ sidebarWidth, onCommitWidth, children }: Sid
startX: number;
startWidth: number;
lastWidth: number;
committed: boolean;
} | null>(null);
// The pane's flex row (its parent: sidebar pane + separator + workspace)
@@ -104,7 +103,6 @@ export function SidebarResizePane({ sidebarWidth, onCommitWidth, children }: Sid
startX: event.clientX,
startWidth: effectiveWidth,
lastWidth: effectiveWidth,
committed: false,
};
setDragging(true);
event.currentTarget.setPointerCapture(event.pointerId);
@@ -124,9 +122,8 @@ export function SidebarResizePane({ sidebarWidth, onCommitWidth, children }: Sid
const onSeparatorPointerUp = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
const drag = dragRef.current;
if (drag === null || drag.pointerId !== event.pointerId) return;
// Snapshot and mark committed BEFORE releasing capture so the trailing
// lostpointercapture finds no drag and cleans up without a second commit.
drag.committed = true;
// The trailing lostpointercapture is a no-op: endDrag clears dragRef
// before capture releases, so nothing can commit a second time.
try {
onCommitWidth(Math.round(drag.lastWidth));
} finally {
@@ -46,7 +46,6 @@ export interface StackSidebarProps {
export function StackSidebar(props: StackSidebarProps) {
const {
isDarkMode, nodeSwitcherSlot, createStackSlot, onScan, isScanning, canCreate,
searchQuery, onSearchChange, filterChip, filterCounts, onFilterChipChange,
list, activitySummary, onActivityAction,
@@ -247,14 +247,14 @@ describe('SidebarResizePane', () => {
setup((w) => commits.push(w));
separator().focus();
await user.keyboard('{ArrowRight}');
expect(commits).toEqual([316]);
expect(separator()).toHaveAttribute('aria-valuenow', '316');
expect(commits).toEqual([308]);
expect(separator()).toHaveAttribute('aria-valuenow', '308');
await user.keyboard('{Home}');
expect(pane().style.width).toBe(`${SIDEBAR_WIDTH.min}px`);
await user.keyboard('{End}');
expect(pane().style.width).toBe(`${SIDEBAR_WIDTH.max}px`);
expect(separator()).toHaveAttribute('aria-valuemax', String(SIDEBAR_WIDTH.max));
expect(commits).toEqual([316, SIDEBAR_WIDTH.min, SIDEBAR_WIDTH.max]);
expect(commits).toEqual([308, SIDEBAR_WIDTH.min, SIDEBAR_WIDTH.max]);
});
it('keyboard End clamps to the viewport-limited max in a narrow shell', async () => {