shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: sidebar spacing and topics overflowing

Browse Source
This commit is contained in:
Sheikh Muhtadee Aslam Taron
2026-03-10 07:38:56 +06:00
parent a1295a0eb3
commit c09ecd7926
9 changed files with 101 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/student/Analytics.tsx
View File

@ -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>

7
src/pages/student/Home.tsx
View File

@ -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; }

8
src/pages/student/Lessons.tsx
View File

@ -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;
}
}

7
src/pages/student/Practice.tsx
View File

@ -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; }

7
src/pages/student/Profile.tsx
View File

@ -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; }

24
src/pages/student/Rewards.tsx
View File

@ -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);

7
src/pages/student/drills/page.tsx
View File

@ -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; }

7
src/pages/student/hard-test-modules/page.tsx
View File

@ -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; }

40
src/pages/student/targeted-practice/page.tsx
View File

@ -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);