From 80a3cc2fc106a15416f148ed818c83f28a48725c Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Tue, 22 Apr 2025 11:42:43 +0500
Subject: [PATCH] web: conform notebook header with mobile ui

---
 apps/web/src/components/notebook-header.tsx | 28 +++++++++++----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/notebook-header.tsx b/apps/web/src/components/notebook-header.tsx
index 4b826cbcd..0ed11ccba 100644
--- a/apps/web/src/components/notebook-header.tsx
+++ b/apps/web/src/components/notebook-header.tsx
@@ -78,12 +78,26 @@ export function NotebookHeader(props: {
       sx={{
         flexDirection: "column",
         p: 1,
-        pb: 4,
+        gap: "7px",
         bg: "var(--background-secondary)",
         borderBottom: "1px solid var(--border)"
       }}
     >
       <NotebookCrumbs notebook={notebook} />
+      <Notebook2
+        size={24}
+        sx={{
+          alignSelf: "start"
+        }}
+      />
+      <Text
+        data-test-id="notebook-title"
+        variant="heading"
+        sx={{ fontSize: "title" }}
+      >
+        {title}
+      </Text>
+      {description && <Text variant="body">{description}</Text>}
       <Flex sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Flex sx={{ alignItems: "center", gap: 2 }}>
           <Text variant="subBody">{getFormattedDate(dateEdited, "date")}</Text>
@@ -120,18 +134,6 @@ export function NotebookHeader(props: {
           </Button>
         </Flex>
       </Flex>
-      <Text
-        data-test-id="notebook-title"
-        variant="heading"
-        sx={{ fontSize: "title", mt: 2 }}
-      >
-        {title}
-      </Text>
-      {description && (
-        <Text variant="body" sx={{ mt: 1 }}>
-          {description}
-        </Text>
-      )}
     </Flex>
   );
 }