responsive ui for all screens

src/App.css

@@ -395,6 +395,11 @@
     color: #fff;
 }
 
+/* Brand element – hidden on mobile, shown in sidebar on desktop */
+.bottom-nav-brand {
+    display: none;
+}
+
 /* ============================
    HISTORY PAGE
    ============================ */
@@ -1176,8 +1181,8 @@
     }
 }
 
-/* ---- Responsive: desktop (≥ 1024px) ---- */
+/* ---- Responsive: desktop (≥ 768px) ---- */
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
     .entry-modal {
         max-width: 620px;
         padding: 2rem;
@@ -1305,6 +1310,147 @@
     cursor: not-allowed;
 }
 
+/* ============================
+   RESPONSIVE – DESKTOP (≥ 860px)
+   Sidebar navigation + single-column content
+   ============================ */
+@media (min-width: 860px) {
+    /* ---- Sidebar navigation ---- */
+    .bottom-nav {
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100dvh;
+        width: 232px;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+        padding: 0 0.875rem 1.5rem;
+        gap: 4px;
+        border-top: none;
+        border-right: 1px solid var(--color-border);
+        background: var(--color-surface);
+        z-index: 100;
+    }
+
+    /* Brand header in sidebar */
+    .bottom-nav-brand {
+        display: block;
+        font-family: "Sniglet", system-ui;
+        font-size: 1.0625rem;
+        font-weight: 700;
+        color: var(--color-primary);
+        padding: 1.75rem calc(0.875rem + 10px) 1.25rem;
+        margin: 0 -0.875rem 0.5rem;
+        border-bottom: 1px solid var(--color-border);
+        letter-spacing: -0.01em;
+    }
+
+    /* Nav buttons become full-width rows */
+    .bottom-nav-btn {
+        flex-direction: row;
+        justify-content: flex-start;
+        width: 100%;
+        padding: 10px 14px;
+        border-radius: 12px;
+        min-height: 42px;
+    }
+
+    /* Always show labels in sidebar */
+    .bottom-nav-btn span {
+        display: inline;
+    }
+
+    /* Active pill keeps green but full-width */
+    .bottom-nav-btn-active {
+        padding: 10px 14px;
+    }
+
+    /* Offset all pages for the sidebar width */
+    .home-page,
+    .history-page,
+    .settings-page {
+        margin-left: 232px;
+    }
+
+    /* ---- Write / Home page ---- */
+    .journal-container {
+        padding: 2.5rem 2rem;
+        align-items: center;
+    }
+
+    .journal-card {
+        max-width: 760px;
+        width: 100%;
+        align-self: center;
+    }
+
+    /* ---- History page ---- */
+    .history-header {
+        padding: 2rem 2.5rem 0;
+    }
+
+    .history-container {
+        padding: 1.25rem 2.5rem 1.5rem;
+    }
+
+    /* ---- Settings page ---- */
+    .settings-header {
+        padding: 2rem 2.5rem 0;
+    }
+
+    .settings-container {
+        padding: 1.25rem 2.5rem 1.5rem;
+        max-width: 720px;
+    }
+}
+
+/* Desktop dark theme adjustments */
+@media (min-width: 860px) {
+    [data-theme="dark"] .bottom-nav {
+        background: #141414;
+        border-right-color: rgba(74, 222, 128, 0.1);
+    }
+
+    [data-theme="dark"] .bottom-nav-brand {
+        border-bottom-color: rgba(74, 222, 128, 0.1);
+    }
+}
+
+/* ============================
+   RESPONSIVE – WIDE DESKTOP (≥ 1100px)
+   Two-column history: calendar left, entries right
+   ============================ */
+@media (min-width: 1100px) {
+    /* Two-column layout: calendar left, entries right */
+    .history-container {
+        display: flex;
+        flex-direction: row;
+        gap: 1.5rem;
+        overflow: hidden;
+    }
+
+    .calendar-card {
+        flex-shrink: 0;
+        width: 320px;
+        align-self: flex-start;
+        margin-bottom: 0;
+    }
+
+    .recent-entries {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        margin-bottom: 0;
+    }
+
+    .recent-entries::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 /* ============================
    DARK THEME
    ============================ */

src/components/BottomNav.tsx

@@ -8,6 +8,9 @@ export default function BottomNav() {
 
   return (
     <nav className="bottom-nav">
+      {/* Brand – visible only in desktop sidebar */}
+      <div className="bottom-nav-brand">Grateful Journal</div>
+
       {/* Write */}
       <button
         type="button"

src/index.css

@@ -53,32 +53,7 @@ body {
     height: 100%;
     min-height: 100dvh;
     overflow: hidden;
-    /* Desktop: show as phone on a desk surface */
+    background: var(--color-bg-soft);
-    background: #c0ccc0;
-}
-
-/* ── Phone shell on desktop ───────────────────────────── */
-@media (min-width: 600px) {
-    body {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #b0bfb0;
-    }
-
-    #root {
-        width: 390px !important;
-        max-width: 390px !important;
-        height: 100dvh;
-        max-height: 100dvh;
-        border-radius: 0;
-        overflow: hidden;
-        box-shadow:
-            0 24px 80px rgba(0, 0, 0, 0.35),
-            0 4px 16px rgba(0, 0, 0, 0.2);
-        position: relative;
-        flex-shrink: 0;
-    }
 }
 
 h1 {
@@ -115,16 +90,3 @@ button:focus-visible {
 [data-theme="dark"] body {
     background: #0a0a0a;
 }
-
-@media (min-width: 600px) {
-    [data-theme="dark"] body {
-        background: #111;
-    }
-
-    [data-theme="dark"] #root {
-        box-shadow:
-            0 24px 80px rgba(0, 0, 0, 0.6),
-            0 4px 16px rgba(0, 0, 0, 0.4),
-            0 0 0 1px rgba(74, 222, 128, 0.08);
-    }
-}