fix: responsive diagram layout

CHANGELOG.md

@@ -15,6 +15,7 @@
   - Added component `ExerciseBoardSidebar` and its styling
   - Added component `ExerciseBoardSubheader` and its styling
 - Added warnings to notify users if they submit an incomplete diagram when doing the fill in the diagram exercise
+- Added responsive components to diagram page
 - Changed the colour of `ComponentPieces` to be based on its placement in the diagram by the user, with sidebar pieces being a neutral colour
 
 ### Bug Fix

app/diagram/page.module.css

@@ -1,11 +1,30 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  min-width: 0;
+  overflow: visible;
+}
+
 .leftCol {
   flex: 1;
-  min-width: 0;          /* ← lets it shrink below its content size */
+  min-width: 0;
   padding-left: var(--space-6);
   padding-right: var(--space-6);
   overflow: hidden;
 }
 
+.sidebar {
+  width: 100%;
+  flex-shrink: 0;
+  height: auto;
+  overflow: visible;
+}
+
+.sidebarPaper {
+  height: 100%;
+}
+
 .eyebrow {
   margin-top: var(--space-8);
   margin-bottom: var(--space-2);
@@ -29,3 +48,25 @@
   margin: 0 auto var(--space-4);
   flex-shrink: 0;
 }
+
+@media (min-width: 900px) {
+  .container {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+    overflow: hidden;
+  }
+
+  .sidebar {
+    width: 25%;
+    height: calc(100vh - var(--navbar-height));
+    overflow-x: auto;
+    overflow-y: hidden;
+    position: sticky;
+    top: var(--navbar-height);
+  }
+
+  .sidebarPaper {
+    height: 100%;
+  }
+}

app/diagram/page.tsx

@@ -14,9 +14,9 @@ import styles from './page.module.css'
 export default function DiagramPage() {
   const [selectedId, setSelectedId] = useState<string | null>(null)
 
-  return <main className="page-shell" style={{ display: 'flex', alignItems: 'flex-start', minWidth: 0, overflow: 'hidden'}}>
+  return <main className={`page-shell ${styles.container}`}>
       {/* Left: diagram + legend */}
-      <div className={styles.leftCol} style={{ minWidth: 0, flex: 1 }}>
+      <div className={styles.leftCol}>
         <p className={`text-eyebrow ${styles.eyebrow}`}>DIAGRAM · COMPONENTS & LAYERS</p>
         <p className={`text-h1 ${styles.heading}`}>Click any component to learn what it does.</p>
         <Paper elevation={4} sx={{ borderRadius: 'var(--radius-card)', overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '75vh', minHeight: 0 }}>
@@ -28,8 +28,10 @@ export default function DiagramPage() {
       </div>
 
       {/* Right: component sidebar */}
-      <Paper elevation={0} sx={{ width: '25rem', minWidth: '16rem', maxWidth: '30rem', flexShrink: 0, height: 'calc(100vh - var(--navbar-height))', overflowX: 'auto', overflowY: 'hidden', position: 'sticky', top: 'var(--navbar-height)' }}>
-        <ComponentSidebar selectedId={selectedId} />
-      </Paper>
+      <div className={styles.sidebar}>
+        <Paper elevation={0} className={styles.sidebarPaper}>
+          <ComponentSidebar selectedId={selectedId} />
+        </Paper>
+      </div>
   </main>
 }

components/diagram/ComponentSidebar.module.css

@@ -77,3 +77,19 @@
   width: 100%;
   min-width: 0;
 }
+
+@media (max-width: 900px) {
+  .sidebar {
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+    padding: var(--space-6);
+  }
+
+  .sidebarEmpty {
+    width: 100%;
+    height: auto;
+    min-height: 140px;
+    box-sizing: border-box;
+  }
+}