From 6cee9a26769014ccfb941efc6aa2cab6264b6e7f Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Thu, 13 Aug 2026 19:13:18 +0000
Subject: [PATCH] fix:contract page

---
 .../src/pages/contracts/ContractViewPage.tsx  | 58 ++++++++++++++-----
 .../src/pages/contracts/contract-sign-bar.css | 11 ----
 2 files changed, 42 insertions(+), 27 deletions(-)
 delete mode 100644 apps/edr-freight-web/portal/src/pages/contracts/contract-sign-bar.css

diff --git a/apps/edr-freight-web/portal/src/pages/contracts/ContractViewPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/ContractViewPage.tsx
index 92b9ed640..312ecb62b 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/ContractViewPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/ContractViewPage.tsx
@@ -33,8 +33,6 @@ import { contractsService } from "@/services/contracts.service";
 import { api } from "@/services/api";
 import { extractApiError } from "@/utils/result";
 
-import "./contract-sign-bar.css";
-
 const CONSENT_TEXT = "I have read the entire contract and agree to its terms.";
 
 /**
@@ -227,9 +225,29 @@ export default function ContractViewPage() {
   return (
     <Box
       p={{ base: "md", md: "xl" }}
-      pb={data.canSignCustomer ? { base: 220, sm: 160, md: 120 } : undefined}
+      style={{
+        // Lock the page to the viewport so the contract iframe is the ONLY
+        // scroll container — page scroll + iframe scroll together made the
+        // sign flow slippery. The negative margin cancels AppShell.Main's
+        // global 112px bottom clearance (see AppLayout) for this page only;
+        // the sign bar below already keeps content clear of the chat FAB.
+        height: "calc(100dvh - var(--app-shell-header-offset, 72px))",
+        marginBottom: -112,
+        display: "flex",
+        flexDirection: "column",
+      }}
     >
-      <Box maw={920} mx="auto">
+      <Box
+        maw={920}
+        mx="auto"
+        w="100%"
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <Group justify="space-between" wrap="wrap" gap="sm" mb="md">
           <Button
             variant="subtle"
@@ -272,15 +290,24 @@ export default function ContractViewPage() {
           </Alert>
         )}
 
-        <Paper withBorder radius="lg" p={0} style={{ overflow: "hidden" }}>
+        <Paper
+          withBorder
+          radius="lg"
+          p={0}
+          // minHeight keeps the document usable on short/landscape viewports;
+          // the page then overflows and window-scrolls a little, which beats
+          // an unreadably squashed iframe.
+          style={{ overflow: "hidden", flex: 1, minHeight: 220 }}
+        >
           <iframe
             ref={iframeRef}
             srcDoc={data.html}
             title="Contract document"
             onLoad={handleIframeLoad}
             style={{
+              display: "block",
               width: "100%",
-              minHeight: "80vh",
+              height: "100%",
               border: "none",
               background: "white",
             }}
@@ -293,19 +320,18 @@ export default function ContractViewPage() {
           withBorder
           radius="lg"
           p="md"
+          mt="md"
+          w="100%"
+          maw={920}
+          mx="auto"
           style={{
-            position: "fixed",
-            bottom: 0,
-            left: "var(--sign-bar-left, 0px)",
-            right: 0,
-            zIndex: 100,
-            borderTop: "1px solid var(--mantine-color-gray-3)",
+            // Above SupportWidget's Affix (zIndex 300) — the fixed chat FAB
+            // shares this bottom-right corner and would otherwise render on
+            // top of the required agree-and-sign bar.
+            position: "relative",
+            zIndex: 301,
             background: "var(--mantine-color-body)",
-            paddingBottom: "max(env(safe-area-inset-bottom, 0px), 16px)",
-            maxHeight: "80vh",
-            overflowY: "auto",
           }}
-          className="contract-sign-bar"
         >
           <Box maw={920} mx="auto">
             <Group justify="flex-start" align="flex-start" wrap="wrap" gap="sm">
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/contract-sign-bar.css b/apps/edr-freight-web/portal/src/pages/contracts/contract-sign-bar.css
deleted file mode 100644
index 270b91e16..000000000
--- a/apps/edr-freight-web/portal/src/pages/contracts/contract-sign-bar.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Keeps the fixed sign bar confined to the content area (right of the
-   navbar) instead of spanning the full viewport and drifting off-center. */
-.contract-sign-bar {
-  --sign-bar-left: 0px;
-}
-
-@media (min-width: 48em) {
-  .contract-sign-bar {
-    --sign-bar-left: 260px;
-  }
-}