Adjusting the lead note and dashboard header height

apps/web/index.html

@@ -5,6 +5,81 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>منتکت | Montact CRM</title>
     <link rel="icon" type="image/png" href="/brand/logo.png" />
+    <style>
+      /* چیدمان اولیه؛ استایل کامپوننت بعداً همین را دقیق‌تر می‌کند */
+      .app-frame {
+        display: grid;
+        grid-template-columns: 244px minmax(0, 1fr);
+        min-height: 100vh;
+      }
+      .app-frame.collapsed {
+        grid-template-columns: 80px minmax(0, 1fr);
+      }
+      .app-frame > .sidebar {
+        display: flex;
+        flex-direction: column;
+        align-self: start;
+        box-sizing: border-box;
+        height: calc(100vh - 28px);
+        overflow: hidden;
+      }
+      .app-frame.collapsed > .sidebar {
+        width: 64px;
+        overflow: visible;
+      }
+      .app-frame .mobile-only {
+        display: none;
+      }
+      .app-frame .desktop-topbar {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+      }
+      .home-hero {
+        position: relative;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 210px;
+        align-items: start;
+      }
+      .home-hero .hero-chips {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .home-hero .popup {
+        position: absolute;
+      }
+      .home-hero .tail {
+        width: 10px;
+        height: 14px;
+      }
+      @media (max-width: 900px) {
+        .app-frame,
+        .app-frame.collapsed {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        .app-frame > .sidebar,
+        .app-frame .desktop-only {
+          display: none;
+        }
+        .app-frame .mobile-only {
+          display: flex;
+        }
+        .app-frame .mobile-tabbar {
+          display: grid;
+        }
+        .home-hero .hero-chips {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+      @media (max-width: 700px) {
+        .home-hero {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        .home-hero .hero-bot {
+          display: none;
+        }
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>