Fix hand-drawn panel layout

Author: Edwin Chan

CENTRAL.md

@@ -33,7 +33,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 
 ### Recently landed
 
-- **Hand-drawn visual system** — `app/globals.css` now provides paper/ink design tokens, graph-paper backgrounds, asymmetric card and control contours, marker-color accents, irregular badges/tabs, and progressive `corner-shape`/`border-shape` enhancement. `app/layout.tsx` loads Shantell Sans for display/control text while Inter remains the body and math font. Route-specific coverage was visually audited across dashboard, problem catalog/detail, writeups, practice, classes, leaderboard, users/profiles, settings, and admin surfaces; FTW and Playground were intentionally excluded. Unsupported browsers retain asymmetric `border-radius`/`clip-path` fallbacks; details are in `docs/visual-system.md`.
+- **Hand-drawn visual system** — `app/globals.css` now provides paper/ink design tokens, graph-paper backgrounds, asymmetric squircle cards and controls, marker-color accents, irregular badges/tabs, and progressive `corner-shape`/`border-shape` enhancement. A signed-in production Chrome audit of `/problem-sets/1991-ajhsme` caught and removed percentage shape paths from variable-height panels, fixed oversized panel-header geometry, removed the blue statement band, and established a fixed labeled desktop sidebar while retaining the mobile sheet. `app/layout.tsx` loads Shantell Sans for display/control text while Inter remains the body and math font. Route-specific coverage was visually audited across dashboard, problem catalog/detail, writeups, practice, classes, leaderboard, users/profiles, settings, and admin surfaces; FTW and Playground were intentionally excluded. Unsupported browsers retain asymmetric `border-radius`/`clip-path` fallbacks; details are in `docs/visual-system.md`.
 - **Mobile/classes cleanup** — fixed mobile `/problem-sets` hiding task rows by restoring the responsive card table, stabilized the mobile sidebar grid to avoid icon reflow on tap/focus, and made dashboard auth/actions render as a compact mobile account card. `/classes` now has a teacher/admin `Announcements` subtab that lists existing class messages and supports author/admin deletion. Display-name fallbacks now treat literal `"null"`/`"undefined"` strings as empty via `lib/display-name.ts`.
 - **Mobile sidebar focus fix** — mobile sidebar sheet geometry now remains stable under `:hover`, `:focus`, and `:focus-within`, preventing the nav grid from jumping upward when a mobile tap focuses one of the upper links (source: `app/globals.css`).
 - **Answer previews and LaTeX grading** — Practice and problem-set answer boxes now render a small KaTeX preview above the input using `mathInputToTex(...)`. `lib/grading.ts` normalizes math delimiters and common LaTeX forms through `lib/math-input.ts`, so expression answers and answer keys can use `$...$`, `\sqrt{...}`, coefficients before functions like `5\sqrt{2}-7`, `\frac{...}{...}`, braced powers, and `\pi`.
@@ -89,3 +89,4 @@ VPS deploy is documented in `SETUP.md` (npm + pm2 + nginx + certbot + cron backu
 - Migration: schema gained `Announcement` and `_AnnouncementToClass` in `prisma/migrations/20260629110000_add_announcements/`. Deploy needs the normal Prisma migration step before the app starts serving class announcement routes.
 - `/api/practice/tags` is referenced from `practice/page.tsx` but I haven't reviewed it; check before touching.
 - `globals.css` has a "2026 refresh" overlay starting around line 2175 and two final hand-drawn override sections at the tail. Edit the tail for visual changes and preserve the fallback-before-experimental-property ordering.
+- Never use percentage-based `border-shape` paths on variable-height content. Keep shape paths to bounded decorative surfaces and test shared panel changes against a tall problem set.

DBSMO/Projects/dbsmo/Common Tasks.md

@@ -17,7 +17,7 @@ This note tells future agents where to edit [[dbsmo]] for common changes. It is
 
 Start with the final `Hand-drawn shape system` and `Hand-drawn route coverage` sections in `app/globals.css`; they intentionally override the older 2026 refresh and light-mode rehaul sections. Shared paper/ink/marker tokens live in `:root` with dark equivalents in `html.dark`. Common panels, actions, inputs, badges, navigation, tables, analytics surfaces, and problem-set controls are grouped there (source: `app/globals.css`).
 
-The public sign-in sketch markup lives in `app/page.tsx`. Keep it `aria-hidden` because it is decorative. Inter/Shantell Sans variables are configured in `app/layout.tsx`; do not apply the handwriting font to answer inputs, equations, or long body copy. `corner-shape` and `border-shape` are progressive enhancements, so preserve the asymmetric `border-radius` and `clip-path` fallbacks and test at desktop plus mobile widths. The current route audit excludes FTW and Playground. Implementation/support notes are in `docs/visual-system.md`.
+The public sign-in sketch markup lives in `app/page.tsx`. Keep it `aria-hidden` because it is decorative. Inter/Shantell Sans variables are configured in `app/layout.tsx`; do not apply the handwriting font to answer inputs, equations, or long body copy. `corner-shape` and `border-shape` are progressive enhancements, so preserve the asymmetric `border-radius` and `clip-path` fallbacks and test at desktop plus mobile widths. Never use percentage-based `border-shape` paths on variable-height panels: a 7,000 px problem panel turns a 1% path offset into 70 px. Use squircle radii for tall panels and include a long problem set in visual QA. The current route audit excludes FTW and Playground. Implementation/support notes are in `docs/visual-system.md`.
 
 ## Add or Change an Answer Type
 

DBSMO/Projects/dbsmo/Components.md

@@ -16,9 +16,9 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 ## Global Shell
 
 - `RootLayout` in `app/layout.tsx`: imports KaTeX CSS/global CSS, configures Inter and Shantell Sans CSS variables, sets metadata/viewport, injects an early theme script from `localStorage`, renders `SiteSidebar`, optional mobile nav toggle, `AnimeRouteEffects`, and `.site-content`.
-- The two final hand-drawn override sections in `app/globals.css` define paper/ink tokens, graph-paper surfaces, mixed card/control corners, marker accents, dark-mode equivalents, route-specific coverage, and progressive `corner-shape`/`border-shape` enhancement. Shantell Sans is scoped to headings and compact controls; content and math stay in Inter. `app/page.tsx` supplies the decorative math-sketch spans used by the public sign-in composition. The route audit covers all primary non-game surfaces; FTW and Playground are excluded. See [[Common Tasks]] and `docs/visual-system.md`.
+- The two final hand-drawn override sections in `app/globals.css` define paper/ink tokens, graph-paper surfaces, asymmetric squircle card/control corners, marker accents, dark-mode equivalents, route-specific coverage, and progressive `corner-shape`/`border-shape` enhancement. Percentage shape paths are limited to bounded, predictable-height decorative surfaces; tall panels use ordinary borders and squircle radii. Shantell Sans is scoped to headings, compact controls, and tabular display text; long-form content, inputs, and math stay in Inter. `app/page.tsx` supplies the decorative math-sketch spans used by the public sign-in composition. The route audit covers all primary non-game surfaces; FTW and Playground are excluded. See [[Common Tasks]] and `docs/visual-system.md`.
 - `AnimeRouteEffects` in `app/anime-route-effects.tsx`: client-only Anime.js v4 route reveal pass for visible page panels, rows, cards, and action controls; it reruns on pathname changes and exits for `prefers-reduced-motion`.
-- `SiteSidebar` in `app/site-sidebar.tsx`: server component that loads session/user and builds sidebar links based on raw admin role plus `hasPermission(...)`. It renders `SiteSidebarNav` and `GlobalMobileNavScrim`.
+- `SiteSidebar` in `app/site-sidebar.tsx`: server component that loads session/user and builds sidebar links based on raw admin role plus `hasPermission(...)`. It renders the DBSMO wordmark, `SiteSidebarNav`, and `GlobalMobileNavScrim`. At desktop widths `app/globals.css` keeps it fixed at 240 px with labels visible; at mobile widths it remains the existing off-canvas sheet.
 - `SiteSidebarNav` in `app/site-sidebar-nav.tsx`: client nav that maps link icon names to lucide icons and marks active links by pathname prefix.
 - `GlobalMobileNavToggle` and `GlobalMobileNavScrim` in `app/global-mobile-nav.tsx`: mobile sidebar controls used by the root shell/sidebar. Mobile sheet sizing is fixed in `app/globals.css` so hover/focus/focus-within states keep the same top padding and do not shift the nav grid during taps.
 - `AuthButton` in `app/auth-button.tsx`: sign-in/sign-out control. It renders Google sign-in, optional bypass buttons, session badge, and profile avatar link.

DBSMO/Projects/dbsmo/Risks and Pitfalls.md

@@ -67,7 +67,7 @@ Do not edit `.next/`, `node_modules/`, `.codegraph/`, `generated/`, `dist/`, or
 
 ## Experimental CSS Shape Support
 
-The final visual-system blocks in `app/globals.css` use `corner-shape` across shared surfaces and guarded `border-shape: shape(...)` contours on selected major panels, underlines, empty states, and the landing orbit. These APIs are not uniformly supported: functional boxes must keep their asymmetric `border-radius` fallback, and decorative custom paths must keep a `clip-path`/ordinary-border fallback. Do not move layout, hit targets, or required content into a shape-dependent clipped region. Shantell Sans is intentionally limited to display/control text; broadening it to body copy or math hurts legibility (sources: `app/globals.css`, `app/layout.tsx`, `app/page.tsx`, `docs/visual-system.md`).
+The final visual-system blocks in `app/globals.css` use `corner-shape` across shared surfaces and guarded `border-shape: shape(...)` contours only on bounded predictable-height elements, underlines, empty states, and the landing orbit. These APIs are not uniformly supported: functional boxes must keep their asymmetric `border-radius` fallback, and decorative custom paths must keep a `clip-path`/ordinary-border fallback. Never put a percentage-based shape path on a variable-height panel: production exposed a 7,000 px problem panel where a 1-2% Y offset became a 70-140 px diagonal wedge. Do not move layout, hit targets, or required content into a shape-dependent clipped region. Shantell Sans is intentionally limited to display/control text; broadening it to body copy or math hurts legibility (sources: `app/globals.css`, `app/layout.tsx`, `app/page.tsx`, `docs/visual-system.md`).
 
 ## Worktree Was Dirty at Scan Time
 

README.md

@@ -51,5 +51,6 @@ Session updates from the CodeGraph/Second Brain indexing pass onward:
 - Added live rendered answer previews in Practice and problem-set answer boxes, and expanded expression grading to understand common LaTeX input/keys such as `$5$`, `\sqrt{5}`, `5\sqrt{2}-7`, `\frac{1}{2}`, and `2^{1/2}`.
 - Rehauled the shared visual system around hand-drawn math-notebook shapes: graph-paper surfaces, irregular ink borders, marker accents, offset control shadows, mixed `corner-shape` geometry, and progressive `border-shape` contours with conventional browser fallbacks.
 - Audited and unified the non-game application routes around the same sketchbook language, including dashboard, catalog/set detail, writeups, practice, classes, leaderboard, users/profiles, settings, and admin surfaces. Added Shantell Sans for headings and controls while preserving Inter for dense content, tables, and math; FTW and Playground were intentionally excluded from the route-specific redesign.
+- Audited the signed-in production problem-set page in the real Chrome session and corrected the redesign: removed percentage shape paths from tall panels, normalized compact panel headers, removed the light-blue problem statement band, switched functional surfaces to softer hand-drawn squircles, and added a fixed labeled DBSMO desktop sidebar without changing the mobile sheet behavior.
 
 © 2026 Cosmic Crusader