diff --git a/app/globals.css b/app/globals.css
index 7cbfd50c8..0583b2c85 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1328,6 +1328,16 @@ optgroup {
 /* The advanced filters drop from the search field with a small gap and take
    its corner, so the two read as one control. Position and width come from
    the field's own box, measured by FilterPanelHost. */
+/* The compose window docks beside the side panel, not over it: over it, the
+   window hides the panel's Close button and the rail's own buttons. The rail is
+   3.5rem wide, an open panel 300px plus 8px of margin. */
+[data-interface-layout="mountain-view"]:has([data-mv-side-rail]) {
+  --mv-compose-end: 4.5rem;
+}
+[data-interface-layout="mountain-view"]:has([data-mv-side-panel], [data-plugin-side-panel]) {
+  --mv-compose-end: 23.75rem;
+}
+
 [data-interface-layout="mountain-view"] [data-mv-filter-panel] {
   border-radius: var(--mv-search-radius);
 }
diff --git a/components/email/mv-compose-window.tsx b/components/email/mv-compose-window.tsx
index 4d9463669..8ec26bf79 100644
--- a/components/email/mv-compose-window.tsx
+++ b/components/email/mv-compose-window.tsx
@@ -51,8 +51,8 @@ export function MvComposeWindow({ children }: { children: ReactNode }) {
           "fixed z-40 flex flex-col overflow-hidden bg-background shadow-[0_8px_10px_1px_rgb(0_0_0/0.14),0_3px_14px_2px_rgb(0_0_0/0.12),0_5px_5px_-3px_rgb(0_0_0/0.2)]",
           maximized
             ? "inset-x-[8vw] inset-y-[6vh] rounded-lg"
-            : "bottom-0 end-4 w-[min(560px,calc(100vw-2rem))] rounded-t-lg",
-          minimized && "h-10 w-[min(280px,calc(100vw-2rem))]",
+            : "bottom-0 end-[var(--mv-compose-end,1rem)] w-[min(560px,calc(100vw-var(--mv-compose-end,1rem)-1rem))] rounded-t-lg",
+          minimized && "h-10 w-[min(280px,calc(100vw-var(--mv-compose-end,1rem)-1rem))]",
           state === "normal" && "h-[min(600px,calc(100dvh-5rem))]",
         )}
       >