fix: sidebar spacing and topics overflowing

src/pages/student/Analytics.tsx

@@ -13,7 +13,7 @@ import { CircularProgress } from "../../components/CircularProgress";
 
 export const Analytics = () => {
   return (
-    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
+    <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4 lg:pl-[calc(17rem+2rem)] lg:mr-0">
       <h1 className="font-satoshi-bold text-3xl text-center tracking-tight">
         Analytics
       </h1>

src/pages/student/Home.tsx

@@ -32,6 +32,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .home-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   /* ── Blobs ── */
   .h-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
   .h-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:hWobble1 14s ease-in-out infinite; }

src/pages/student/Lessons.tsx

@@ -45,6 +45,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .ls-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   .ls-blob { position:fixed; pointer-events:none; z-index:0; filter:blur(48px); opacity:0.35; }
   .ls-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:lsWobble1 14s ease-in-out infinite; }
   .ls-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:lsWobble2 16s ease-in-out infinite; }
@@ -78,7 +85,6 @@ const STYLES = `
     .ls-inner {
       max-width: var(--content-max);
       padding: 2rem 2rem 6rem;
-      
     }
   }
 

src/pages/student/Practice.tsx

@@ -34,6 +34,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .pr-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   /* ── Blobs ── */
   .pr-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
   .pr-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:prWobble1 14s ease-in-out infinite; }

src/pages/student/Profile.tsx

@@ -29,6 +29,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .pf-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   .pf-blob { position: fixed; pointer-events: none; z-index: 0; filter: blur(48px); opacity: 0.35; }
   .pf-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:pfWobble1 14s ease-in-out infinite; }
   .pf-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:pfWobble2 16s ease-in-out infinite; }

src/pages/student/Rewards.tsx

@@ -45,6 +45,13 @@ const STYLES = `
     overflow: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .rw-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   .rw-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
   .rw-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:rwWobble1 14s ease-in-out infinite; }
   .rw-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:rwWobble2 16s ease-in-out infinite; }
@@ -203,6 +210,23 @@ const STYLES = `
     top:auto;
   }
 
+  /* Tablet/small desktop: shift pill right to avoid sidebar overlap */
+  @media (min-width: 768px) and (max-width: 1200px) {
+    .rw-island-wrap {
+      left: calc(17rem + 10rem); /* sidebar width + gap */
+      transform: none;
+      align-items: flex-start;
+    }
+  }
+  /* Tablet/small desktop: shift pill right to avoid sidebar overlap */
+  @media (min-width: 1200px) {
+    .rw-island-wrap {
+      left: 50%;
+      transform: none;
+      align-items: flex-start;
+    }
+  }
+
   .rw-island-card {
     background:rgba(255,251,244,0.92);
     backdrop-filter:blur(20px);

src/pages/student/drills/page.tsx

@@ -34,6 +34,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .dr-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   .dr-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
   .dr-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:drWobble1 14s ease-in-out infinite; }
   .dr-blob-2 { width:190px;height:190px;background:#a5f3fc;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:drWobble2 16s ease-in-out infinite; }

src/pages/student/hard-test-modules/page.tsx

@@ -36,6 +36,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .htm-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   .htm-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
   .htm-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:htmWobble1 14s ease-in-out infinite; }
   .htm-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:htmWobble2 16s ease-in-out infinite; }

src/pages/student/targeted-practice/page.tsx

@@ -78,6 +78,13 @@ const STYLES = `
     overflow-x: hidden;
   }
 
+  /* On desktop, account for sidebar */
+  @media (min-width: 768px) {
+    .tp-screen {
+      padding-left: calc(17rem + 1.25rem);
+    }
+  }
+
   .tp-blob { position:fixed;pointer-events:none;z-index:0;filter:blur(48px);opacity:0.35; }
   .tp-blob-1 { width:240px;height:240px;background:#fde68a;top:-80px;left:-80px;border-radius:60% 40% 70% 30%/50% 60% 40% 50%;animation:tpWobble1 14s ease-in-out infinite; }
   .tp-blob-2 { width:190px;height:190px;background:#a5f3c0;bottom:-50px;left:6%;border-radius:40% 60% 30% 70%/60% 40% 60% 40%;animation:tpWobble2 16s ease-in-out infinite; }
@@ -210,17 +217,36 @@ const STYLES = `
 
   /* ── Topic grid ── */
   .tp-topic-grid {
-    display: grid; grid-template-columns: 1fr;
+    display: grid;
-    gap: 0.55rem; max-height: 380px; overflow-y: auto;
+    grid-template-columns: 1fr;
+    gap: 0.55rem;
+    max-height: 380px;
+    overflow-y: auto;
     padding-right: 0.25rem;
   }
-  @media(min-width: 460px) { .tp-topic-grid { grid-template-columns: 1fr 1fr; } }
+  @media (min-width: 460px) {
+    .tp-topic-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  @media (min-width: 900px) {
+    .tp-topic-grid {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 0.65rem;
+      max-width: 100%;
+      overflow-x: visible;
+    }
+  }
 
   /* ── Topic card ── */
   .tp-topic-card {
-    display: flex; align-items: center; gap: 0.75rem;
+    display: flex;
-    background: white; border: 2.5px solid #f3f4f6;
+    align-items: center;
-    border-radius: 16px; padding: 0.75rem 0.9rem;
+    gap: 0.65rem;
+    background: white;
+    border: 2.5px solid #f3f4f6;
+    border-radius: 14px;
+    padding: 0.6rem 0.7rem;
     cursor: pointer;
     transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
                 box-shadow 0.15s ease,
@@ -228,6 +254,8 @@ const STYLES = `
                 background 0.15s ease;
     box-shadow: 0 2px 8px rgba(0,0,0,0.04);
     user-select: none; -webkit-tap-highlight-color: transparent;
+    min-width: 0;
+    max-width: 100%;
   }
   .tp-topic-card:hover {
     transform: translateY(-2px);