Skip to content

fix(web): sheet-mode panel puts its close button at the edge #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
badcuban merged 1 commit into from
Sep 9, 2026
+17 −3
Merged

fix(web): sheet-mode panel puts its close button at the edge #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/src/components/ChatRightPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export function ChatRightPanel(props: {
onSelectTab={props.onSelectTab}
onCloseTab={props.onCloseTab}
onReorderTab={props.onReorderTab}
overlay={onDismiss !== undefined}
{...(onDismiss
? {
trailing: (
Expand Down
19 changes: 16 additions & 3 deletions apps/web/src/components/chat/RightPanelTabStrip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,6 +682,7 @@ export const RightPanelTabStrip = memo(function RightPanelTabStrip({
onCloseTab,
onReorderTab,
trailing,
overlay = false,
}: {
openTabs: ReadonlyArray<RightPanelTab>;
availableTabs: ReadonlyArray<RightPanelTab>;
Expand All @@ -697,6 +698,9 @@ export const RightPanelTabStrip = memo(function RightPanelTabStrip({
onReorderTab?: ((tab: RightPanelTab, toIndex: number) => void) | undefined;
/** Sheet-mode dismissal, parked at the end of the row. */
trailing?: React.ReactNode;
/** Sheet mode: the panel starts below the chat header, so the strip neither
* shares its row with the window controls nor acts as a window drag handle. */
overlay?: boolean;
}) {
const stripRef = useRef<HTMLDivElement | null>(null);
const { mode, rowRef, measureRef, actionsRef, trailingRef } = useTabStripMode(openTabs.join(","));
Expand Down Expand Up @@ -732,7 +736,7 @@ export const RightPanelTabStrip = memo(function RightPanelTabStrip({
return (
<div
ref={stripRef}
className="drag-region shrink-0 border-b border-border"
className={cn("shrink-0 border-b border-border", !overlay && "drag-region")}
data-right-panel-strip="true"
data-right-panel-strip-mode={mode}
>
Expand All @@ -745,10 +749,19 @@ export const RightPanelTabStrip = memo(function RightPanelTabStrip({
titlebar rows add 1em. They end in text or labelled controls that would
read as crowded against the buttons; this row ends in the `+`, whose own
padding is the breathing room, so the extra 12px only pushed it away
from the controls it sits beside. */}
from the controls it sits beside.

None of that applies in sheet mode: the sheet starts below the chat
header, so the row is not under the controls and must not pad clear of
them (the ✕ would land mid-row), and a drag region floating over the
conversation only got in the way of its own dismiss button. */}
<div
ref={rowRef}
className="relative flex h-9 items-stretch px-1.5 pt-1.5 wco:min-h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+0.25rem)]"
className={cn(
"relative flex h-9 items-stretch px-1.5 pt-1.5",
!overlay &&
"wco:min-h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+0.25rem)]",
)}
data-right-panel-tabs-row="true"
>
{/* The labelled row the mode decision is measured against. Out of the
Expand Down
Loading