From bcd4d676db426bc177034fc0794ea3e3c5ffc1fc Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Tue, 21 Apr 2026 09:55:09 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D1=80=D0=B0=D0=B2=D0=BD=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BD=D0=B8=D0=B6=D0=BD=D0=B5=D0=B3=D0=BE=20dock=20?=
 =?UTF-8?q?=D0=B2=D0=BD=D0=B5=D1=88=D0=BD=D0=B8=D1=85=20=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D1=83=D1=80=D0=BE=D0=B2=20=D1=81=20=D0=B2=D0=BD=D1=83?=
 =?UTF-8?q?=D1=82=D1=80=D0=B5=D0=BD=D0=BD=D0=B8=D0=BC=20=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D1=83=D1=80=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/external-contours/header.tsx     |  8 ++--
 .../web/core/components/core/app-header.tsx   | 37 +++++++++++++++++--
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/plane-src/apps/web/ce/components/projects/external-contours/header.tsx b/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
index da461e6..d890469 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
@@ -34,9 +34,9 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
   );
 
   return (
-    <Header className="pt-4">
-      <Header.LeftItem className="items-center pt-2">
-        <div className="flex flex-grow items-center gap-4">
+    <Header>
+      <Header.LeftItem>
+        <div className="flex min-w-0 flex-grow items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <Breadcrumbs.Item
@@ -60,7 +60,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
           )}
         </div>
       </Header.LeftItem>
-      <Header.RightItem className="pt-2">
+      <Header.RightItem>
         {workspaceSlug && projectId && isAuthorized ? (
           <div className="flex items-center gap-2">
             <ExternalContourCreateModalRoot
diff --git a/plane-src/apps/web/core/components/core/app-header.tsx b/plane-src/apps/web/core/components/core/app-header.tsx
index 4ea58e3..cc6d9b0 100644
--- a/plane-src/apps/web/core/components/core/app-header.tsx
+++ b/plane-src/apps/web/core/components/core/app-header.tsx
@@ -4,7 +4,8 @@
  * See the LICENSE file for details.
  */
 
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { Row } from "@plane/ui";
@@ -21,10 +22,40 @@ export interface AppHeaderProps {
 
 export const AppHeader = observer(function AppHeader(props: AppHeaderProps) {
   const { header, mobileHeader, className, rowClassName } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dockStyle, setDockStyle] = useState<CSSProperties | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const container = containerRef.current;
+    const main = container?.closest("main");
+    if (!(main instanceof HTMLElement)) return;
+
+    const updateDockBounds = () => {
+      const { left, width } = main.getBoundingClientRect();
+
+      setDockStyle({
+        left,
+        width,
+      });
+    };
+
+    updateDockBounds();
+
+    const resizeObserver = new ResizeObserver(updateDockBounds);
+    resizeObserver.observe(main);
+    window.addEventListener("resize", updateDockBounds);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateDockBounds);
+    };
+  }, []);
 
   return (
-    <div className={cn("z-[18]", className)}>
-      <Row className={cn("flex h-11 w-full items-center gap-2 border-b border-subtle bg-surface-1", rowClassName)}>
+    <div ref={containerRef} className={cn("fixed right-0 bottom-0 z-[18]", className)} style={dockStyle}>
+      <Row className={cn("flex h-11 w-full items-center gap-2 border-t border-subtle bg-surface-1", rowClassName)}>
         <ExtendedAppHeader header={header} />
       </Row>
       {mobileHeader && mobileHeader}