Studio: fix macOS titlebar drag and collapsed layout (#7555)

* Fix macOS Studio titlebar interactions

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Refine macOS titlebar alignment

* Hide collapsed macOS sidebar border

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Wasim Yousef Said 2026-07-28 15:26:17 +02:00 committed by GitHub
commit 4c2df3e6f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 38 additions and 3 deletions

View file

@ -255,7 +255,7 @@ const MAC_NATIVE_CHROME_STYLE = {
"--studio-non-chat-content-top-inset": "34px",
"--studio-hidden-route-top-inset": "34px",
"--studio-chat-header-height": "44px",
"--studio-chat-header-padding-top": "8px",
"--studio-chat-header-padding-top": "7px",
"--studio-chat-control-height": "33px",
"--studio-chat-header-right-inset": "0px",
} as CSSProperties;

View file

@ -1183,7 +1183,11 @@ export function AppSidebar() {
<Sidebar
collapsible="icon"
variant="sidebar"
className="font-heading group-data-[collapsible=icon]:[&_[data-sidebar=sidebar]]:bg-white dark:group-data-[collapsible=icon]:[&_[data-sidebar=sidebar]]:bg-background"
className={cn(
"font-heading group-data-[collapsible=icon]:[&_[data-sidebar=sidebar]]:bg-white dark:group-data-[collapsible=icon]:[&_[data-sidebar=sidebar]]:bg-background",
usesNativeMacTitlebar &&
"group-data-[collapsible=icon]:[&_[data-sidebar=sidebar]]:border-r-0",
)}
>
<SidebarHeader
className={cn(
@ -1205,6 +1209,7 @@ export function AppSidebar() {
/>
)}
<div
data-tauri-drag-region={usesNativeMacTitlebar || undefined}
className={cn(
"relative z-10 flex items-center gap-[8.5px] group-data-[collapsible=icon]:hidden",
showCompactMacBrand &&

View file

@ -781,6 +781,7 @@ function GeneralCompareHeader({
// Controlled so the body-portaled popover can't linger over another tab off-route.
const active = useChatActive();
const [selectorOpen, setSelectorOpen] = useState(false);
const { pinned } = useSidebar();
return (
<div
@ -3192,7 +3193,7 @@ export function ChatPage({
// Provides `active` to ChatRuntimeProvider (drops the message views/composers
// while off-route, keeping the runtime alive) and to the compare chrome.
<ChatActiveContext.Provider value={active}>
<div className="flex min-h-0 min-w-0 flex-1 basis-0 bg-background overflow-hidden">
<div className="flex min-h-0 min-w-0 flex-1 basis-0 overflow-hidden bg-background">
{/* Portaled surfaces render to document.body, escaping the parent's hidden
wrapper, so gate them on `active` to keep them off other tabs. */}
{active && <GuidedTour {...tour.tourProps} />}