fix(ui): stabilize sidebar and titlebar placement

Keep left RTL sidebars physically aligned with the default layout, swap titlebar actions with side-aware custom controls, and preserve usable titlebar space when the sidebar is visible.

Refs #17

src/App.tsx

@@ -943,7 +943,9 @@ function App() {
     } ${
       hasWindowChrome ? 'app-shell--window-chrome' : ''
     }`}>
-      {usesCustomWindowControls && <WindowControls />}
+      {usesCustomWindowControls && (
+        <WindowControls side={isSidebarOnRight ? 'right' : 'left'} />
+      )}
       <div
         className={`app-sidebar-shell relative z-20 shrink-0 transition-all duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] ${
           isSidebarOnRight ? 'app-sidebar-shell--right' : 'app-sidebar-shell--left'

src/components/WindowControls.tsx

@@ -9,11 +9,18 @@ const stopTitlebarDrag = (event: PointerEvent<HTMLButtonElement>) => {
   event.stopPropagation();
 };
 
-export function WindowControls() {
+interface WindowControlsProps {
+  side: 'left' | 'right';
+}
+
+export function WindowControls({ side }: WindowControlsProps) {
   const { t } = useTranslation();
 
   return (
-    <div className="window-controls" aria-label={t($ => $.window.controls)}>
+    <div
+      className={`window-controls window-controls--${side}`}
+      aria-label={t($ => $.window.controls)}
+    >
       <button
         type="button"
         className="window-control close"

src/index.css

@@ -1114,10 +1114,12 @@ html[data-list-density="relaxed"] {
 
   .app-sidebar-shell--left .sidebar-nav-item {
     direction: ltr;
+    text-align: left;
   }
 
   .app-sidebar-shell--right .sidebar-nav-item {
     direction: rtl;
+    text-align: right;
   }
 
   html[dir="ltr"] .sidebar-nav-label {
@@ -1147,6 +1149,11 @@ html[data-list-density="relaxed"] {
     transition: background-color 100ms ease;
   }
 
+  .sidebar-nav-label {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   .sidebar-nav-item[data-active="true"] {
     background: hsl(var(--accent-color)) !important;
     color: white !important;
@@ -1654,6 +1661,11 @@ html[data-list-density="relaxed"] {
   right: 22px;
 }
 
+.window-controls--right {
+  left: auto;
+  right: 22px;
+}
+
 .window-control {
   width: 14px;
   height: 14px;
@@ -1699,14 +1711,15 @@ html[data-list-density="relaxed"] {
   height: 52px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 0 18px;
+  direction: ltr;
     border-bottom: 1px solid hsl(var(--border-color));
   background: hsl(var(--statusbar-bg));
 }
 
-.app-workspace--custom-window-controls .main-titlebar {
+.app-workspace--sidebar-right .main-titlebar {
-  padding-left: 160px;
+  flex-direction: row-reverse;
-  padding-right: 160px;
 }
 
 .app-workspace--sidebar-collapsed .main-titlebar {
@@ -1735,7 +1748,7 @@ html[data-list-density="relaxed"] {
   }
 
 .main-control-group {
-    margin-inline-start: auto;
+    margin: 0;
     height: 28px;
     display: inline-flex;
     align-items: center;
@@ -2434,6 +2447,10 @@ html[dir="rtl"] .sidebar-inner .mr-3 {
     -2px 0 10px hsl(0 0% 0% / 0.20);
 }
 
+.app-sidebar-shell--left .app-sidebar-panel {
+  direction: ltr;
+}
+
 .app-sidebar-shell--left .sidebar-toggle-button {
   inset-inline-start: auto;
   inset-inline-end: auto;