diff --git a/src/pages/student/Analytics.tsx b/src/pages/student/Analytics.tsx index c5b276f..7293e27 100644 --- a/src/pages/student/Analytics.tsx +++ b/src/pages/student/Analytics.tsx @@ -13,7 +13,7 @@ import { CircularProgress } from "../../components/CircularProgress"; export const Analytics = () => { return ( -
+

Analytics

diff --git a/src/pages/student/Home.tsx b/src/pages/student/Home.tsx index 3983f9c..3dcbf60 100644 --- a/src/pages/student/Home.tsx +++ b/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; } diff --git a/src/pages/student/Lessons.tsx b/src/pages/student/Lessons.tsx index 3efe06b..485ca61 100644 --- a/src/pages/student/Lessons.tsx +++ b/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; - } } diff --git a/src/pages/student/Practice.tsx b/src/pages/student/Practice.tsx index 195e1e3..873cac1 100644 --- a/src/pages/student/Practice.tsx +++ b/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; } diff --git a/src/pages/student/Profile.tsx b/src/pages/student/Profile.tsx index fb75504..bdc58a0 100644 --- a/src/pages/student/Profile.tsx +++ b/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; } diff --git a/src/pages/student/Rewards.tsx b/src/pages/student/Rewards.tsx index cdd16ff..c29952d 100644 --- a/src/pages/student/Rewards.tsx +++ b/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); diff --git a/src/pages/student/drills/page.tsx b/src/pages/student/drills/page.tsx index 0bf1895..54878b0 100644 --- a/src/pages/student/drills/page.tsx +++ b/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; } diff --git a/src/pages/student/hard-test-modules/page.tsx b/src/pages/student/hard-test-modules/page.tsx index b917774..00c46ad 100644 --- a/src/pages/student/hard-test-modules/page.tsx +++ b/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; } diff --git a/src/pages/student/targeted-practice/page.tsx b/src/pages/student/targeted-practice/page.tsx index 945d1fa..8645e97 100644 --- a/src/pages/student/targeted-practice/page.tsx +++ b/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; - gap: 0.55rem; max-height: 380px; overflow-y: auto; + display: grid; + 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; - background: white; border: 2.5px solid #f3f4f6; - border-radius: 16px; padding: 0.75rem 0.9rem; + display: flex; + align-items: center; + 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);