From 838f8fa547c4b772cb0f18ac6165a5f3c1a90b43 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 7 Apr 2025 20:21:38 +0000
Subject: [PATCH] Dashboard: Update contracts page header: render on top of
 sidebar (#6666)

---
 .../_layout/contract-page-layout.tsx          | 51 ++++++++++---------
 .../_layout/metadata-header.tsx               |  2 +-
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
index ef2a5b942f8..77d681cd025 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
@@ -36,33 +36,34 @@ export function ContractPageLayout(props: {
 
   return (
     <ChakraProviderSetup>
-      <SidebarLayout sidebarLinks={sidebarLinks}>
-        <div className="border-border border-b pb-8">
-          <div className="flex flex-col gap-4 ">
-            <div className="flex flex-col justify-between gap-4 md:flex-row">
-              <ContractMetadata
-                contract={contract}
-                chain={chainMetadata}
-                contractMetadata={dashboardContractMetadata}
-                externalLinks={externalLinks}
-              />
-              <PrimaryDashboardButton
-                contractAddress={contract.address}
-                chain={contract.chain}
-                contractInfo={{
-                  chain: chainMetadata,
-                  chainSlug: chainMetadata.slug,
-                  contractAddress: contract.address,
-                }}
-                teamsAndProjects={teamsAndProjects}
-                client={client}
-              />
-            </div>
-            <DeprecatedAlert chain={chainMetadata} />
+      <div className="border-border border-b py-8">
+        <div className="container flex flex-col gap-4">
+          <div className="flex flex-col justify-between gap-4 md:flex-row">
+            <ContractMetadata
+              contract={contract}
+              chain={chainMetadata}
+              contractMetadata={dashboardContractMetadata}
+              externalLinks={externalLinks}
+            />
+            <PrimaryDashboardButton
+              contractAddress={contract.address}
+              chain={contract.chain}
+              contractInfo={{
+                chain: chainMetadata,
+                chainSlug: chainMetadata.slug,
+                contractAddress: contract.address,
+              }}
+              teamsAndProjects={teamsAndProjects}
+              client={client}
+            />
           </div>
+          <DeprecatedAlert chain={chainMetadata} />
         </div>
-        <div className="h-8" />
-        <div className="pb-10">{props.children}</div>
+      </div>
+
+      <SidebarLayout sidebarLinks={sidebarLinks}>
+        {props.children}
+        <div className="h-20" />
       </SidebarLayout>
     </ChakraProviderSetup>
   );
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
index 38fcc1e2977..b1257ffcdc0 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
@@ -66,7 +66,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
         </div>
       )}
 
-      <div className="flex grow flex-col gap-4">
+      <div className="flex grow flex-col gap-3">
         {/* Title */}
         {!data ? (
           <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">