resizer-fixes (#10454)

PavelLaptev · web-flow · commit 36860992563c · 2025-09-26T11:16:34.000Z
* feat(resizer): replace hidden with disabled and add border option Rename the Resizer prop "hidden" to "disabled" to clarify that the component is still rendered but should not perform resizing behavior. Update all internal checks and class bindings to use disabled so the component ignores pointer interactions and skip applying size changes when appropriate. Introduce `showBorder` (default: false) to optionally display a visual border on the resizer. Currently, resizers align with element edges that have border lines, but those edges are not actually resizable. Rename dragging state to isResizing for clearer intent and update bindings and event handlers accordingly. We have a global class `draggable` that overlaps in this component * fix(drawer): use updated resizer with a border line * fix: non-full-height resizers Was unable to resize new and lanes with the content that doesn’t take full height. ![Screenshot 2025-09-26 at 12.25.26.png](https://app.gitbutler.com/uploads/70fe7b8d-807d-40a9-a6bc-273b18497675) * fix(stack view): use new resizer "showBorder" prop * fix(codegenpage): use new resizer "showBorder" prop * fix(branhesView): use new resizer "ShowBorder" prop remove duplicated code
diff --git a/apps/desktop/src/components/BranchesView.svelte b/apps/desktop/src/components/BranchesView.svelte
@@ -378,6 +378,7 @@
 							viewport={branchColumn}
 							persistId="branches-branch-column-1"
 							direction="right"
+							showBorder
 							defaultValue={20}
 							minWidth={10}
 							maxWidth={30}
@@ -388,14 +389,6 @@
 						<div class="commit-column" bind:this={commitColumn} class:non-local-pr={isNonLocalPr}>
 							{#if current.commitId}
 								<UnappliedCommitView {projectId} commitId={current.commitId} />
-								<Resizer
-									viewport={commitColumn}
-									persistId="branches-branch-column-2"
-									direction="right"
-									defaultValue={20}
-									minWidth={10}
-									maxWidth={30}
-								/>
 							{:else if current.branchName}
 								{#if current.inWorkspace && current.stackId}
 									<BranchView
@@ -416,17 +409,19 @@
 										{onerror}
 									/>
 								{/if}
-								<Resizer
-									viewport={commitColumn}
-									persistId="branches-branch-column-2"
-									direction="right"
-									defaultValue={20}
-									minWidth={10}
-									maxWidth={30}
-								/>
 							{:else if current.prNumber}
 								<PrBranchView {projectId} prNumber={current.prNumber} {onerror} />
 							{/if}
+
+							<Resizer
+								viewport={commitColumn}
+								persistId="branches-branch-column-2"
+								showBorder
+								direction="right"
+								defaultValue={20}
+								minWidth={10}
+								maxWidth={30}
+							/>
 						</div>
 					{/if}
 
@@ -493,7 +488,6 @@
 		flex-shrink: 0;
 		flex-direction: column;
 		max-height: 100%;
-		border-right: 1px solid var(--clr-border-2);
 		border-left: 1px solid var(--clr-border-2);
 	}
 
@@ -505,7 +499,6 @@
 		flex-direction: column;
 		max-height: 100%;
 		overflow: hidden;
-		border-right: 1px solid var(--clr-border-2);
 
 		&.non-local-pr {
 			flex-grow: 1;
diff --git a/apps/desktop/src/components/Drawer.svelte b/apps/desktop/src/components/Drawer.svelte
@@ -79,7 +79,7 @@
 	bind:this={containerDiv}
 	bind:clientHeight
 	class:collapsed={$collapsed}
-	class:bottom-border={bottomBorder}
+	class:bottom-border={bottomBorder && !resizer}
 	class:transparent
 	class:grow
 	class:noshrink
@@ -164,8 +164,9 @@
 			viewport={containerDiv}
 			defaultValue={undefined}
 			passive={resizer.passive}
-			hidden={$collapsed}
+			disabled={$collapsed}
 			direction="down"
+			showBorder
 			{...resizer}
 			{maxHeight}
 		/>
diff --git a/apps/desktop/src/components/Resizer.svelte b/apps/desktop/src/components/Resizer.svelte
@@ -29,8 +29,10 @@
 		minHeight?: number;
 		/** Enabled, but does not set the width/height on the dom element */
 		passive?: boolean;
-		/** Whether the resizer is hidden */
-		hidden?: boolean;
+		/** Whether the resizer is disabled */
+		disabled?: boolean;
+		/** Whether to show the resizer border */
+		showBorder?: boolean;
 		/** Optional manager that can coordinate multiple resizers */
 		resizeGroup?: ResizeGroup;
 		/** Optional ordering of resizer for use with `resizeManager` */
@@ -58,7 +60,8 @@
 		syncName,
 		persistId,
 		passive,
-		hidden,
+		disabled,
+		showBorder = false,
 		resizeGroup,
 		order,
 		unsetMaxHeight,
@@ -82,7 +85,7 @@
 	const resizerId = Symbol();
 
 	let initial = 0;
-	let dragging = $state(false);
+	let isResizing = $state(false);
 	let resizerDiv = $state<HTMLDivElement>();
 
 	let unsubUp: () => void;
@@ -128,7 +131,7 @@
 	}
 
 	function onMouseMove(e: MouseEvent) {
-		dragging = true;
+		isResizing = true;
 		let offsetPx: number | undefined;
 		switch (direction) {
 			case 'down':
@@ -159,19 +162,19 @@
 
 		const { newValue, overflow } = applyLimits(offsetRem);
 
-		if (newValue && !passive && !hidden) {
+		if (newValue && !passive && !disabled) {
 			setValue(newValue);
 		}
 		if (overflow) {
 			onOverflow?.(overflow);
 		}
-		if (e.shiftKey && syncName && newValue !== undefined && !passive && !hidden) {
+		if (e.shiftKey && syncName && newValue !== undefined && !passive && !disabled) {
 			resizeSync.emit(syncName, resizerId, newValue);
 		}
 	}
 
 	function onMouseUp() {
-		dragging = false;
+		isResizing = false;
 		unsubUp?.();
 		unsubMove?.();
 		onResizing?.(false);
@@ -186,7 +189,7 @@
 		if (!viewport) {
 			return;
 		}
-		if (passive || hidden) {
+		if (passive || disabled) {
 			if (orientation === 'horizontal') {
 				viewport.style.width = '';
 				viewport.style.maxWidth = '';
@@ -297,15 +300,16 @@
 		setValue(defaultValue);
 	}}
 	{onclick}
-	class:hidden
+	class:disabled
 	class="resizer"
-	class:dragging
+	class:is-resizing={isResizing}
 	class:vertical={orientation === 'vertical'}
 	class:horizontal={orientation === 'horizontal'}
 	class:up={direction === 'up'}
 	class:down={direction === 'down'}
 	class:left={direction === 'left'}
 	class:right={direction === 'right'}
+	class:border={showBorder}
 	style:z-index={zIndex}
 ></div>
 
@@ -331,6 +335,42 @@
 			height: var(--resizer-thickness);
 		}
 
+		&.border.horizontal::after {
+			position: absolute;
+			top: 0;
+			width: 1px;
+			height: 100%;
+			border-left: 1px solid var(--clr-border-2);
+			content: '';
+			pointer-events: none;
+		}
+
+		&.border.horizontal.left::after {
+			left: 0;
+		}
+
+		&.border.horizontal.right::after {
+			right: 0;
+		}
+
+		&.border.vertical::after {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			height: 1px;
+			border-top: 1px solid var(--clr-border-2);
+			content: '';
+			pointer-events: none;
+		}
+
+		&.border.vertical.up::after {
+			top: 0;
+		}
+
+		&.border.vertical.down::after {
+			bottom: 0;
+		}
+
 		&.right {
 			right: 0;
 		}
@@ -344,7 +384,7 @@
 			bottom: 0;
 		}
 
-		&.hidden {
+		&.disabled {
 			pointer-events: none;
 			--resizer-cursor: default;
 		}
diff --git a/apps/desktop/src/components/StackDraft.svelte b/apps/desktop/src/components/StackDraft.svelte
@@ -40,7 +40,7 @@
 		class="draft-stack"
 		style:width={uiState.global.stackWidth.current + 'rem'}
 	>
-		<ConfigurableScrollableContainer>
+		<ConfigurableScrollableContainer childrenWrapHeight="100%">
 			<div class="draft-stack__scroll-wrap">
 				<div class="new-commit-view">
 					<NewCommitView {projectId} />
@@ -68,7 +68,6 @@
 					defaultValue={23}
 					minWidth={16}
 					maxWidth={64}
-					syncName="panel1"
 				/>
 			</div>
 		</ConfigurableScrollableContainer>
@@ -80,11 +79,13 @@
 			position: relative;
 			flex-shrink: 0;
 			flex-direction: column;
+			min-height: 100%;
 			border-right: 1px solid var(--clr-border-2);
 			animation: appear-in 0.2s ease-in-out forwards;
 		}
 		.draft-stack__scroll-wrap {
 			position: relative;
+			min-height: 100%;
 			padding: 12px;
 		}
 		.new-commit-view {
diff --git a/apps/desktop/src/components/StackView.svelte b/apps/desktop/src/components/StackView.svelte
@@ -578,6 +578,7 @@
 						viewport={stackViewEl!}
 						zIndex="var(--z-lifted)"
 						direction="right"
+						showBorder={!isDetailsViewOpen}
 						minWidth={RESIZER_CONFIG.panel1.minWidth}
 						maxWidth={RESIZER_CONFIG.panel1.maxWidth}
 						defaultValue={RESIZER_CONFIG.panel1.defaultValue}
@@ -663,6 +664,7 @@
 			viewport={compactDiv!}
 			persistId="resizer-panel2-${stackId}"
 			direction="right"
+			showBorder
 			minWidth={RESIZER_CONFIG.panel2.minWidth}
 			maxWidth={RESIZER_CONFIG.panel2.maxWidth}
 			defaultValue={RESIZER_CONFIG.panel2.defaultValue}
@@ -679,7 +681,7 @@
 		flex-shrink: 0;
 		height: 100%;
 		overflow: hidden;
-		border-right: 1px solid var(--clr-border-2);
+		/* border-right: 1px solid var(--clr-border-2); */
 		transition: opacity 0.15s;
 
 		&.dimmed {
@@ -696,6 +698,7 @@
 		position: relative;
 		flex-shrink: 0;
 		flex-direction: column;
+		min-height: 100%;
 		padding: 0 12px;
 
 		/* Use CSS custom properties for details view width to avoid ResizeObserver errors */
diff --git a/apps/desktop/src/components/codegen/CodegenPage.svelte b/apps/desktop/src/components/codegen/CodegenPage.svelte
@@ -802,6 +802,7 @@
 		<Resizer
 			direction="left"
 			viewport={rightSidebarRef}
+			showBorder
 			defaultValue={24}
 			minWidth={20}
 			maxWidth={35}
@@ -1150,7 +1151,6 @@
 		position: relative;
 		flex-direction: column;
 		height: 100%;
-		border-left: 1px solid var(--clr-border-2);
 	}
 
 	.right-sidebar__placeholder {
