From 37a01e4d966b3d92045cc5c6fc289d5dec657a1d Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 21 May 2026 10:59:55 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20mobile=20layout=20=E2=80=94=20no=20h?=
 =?UTF-8?q?orizontal=20page=20scroll,=20truncate=20names,=20scrollable=20c?=
 =?UTF-8?q?ard=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Page scroll container is overflow-x-hidden so the interface stays fixed; long
  content can no longer push the page wider than the viewport (tree was ~50% cut off).
- CardTable wrapped in overflow-x-auto with a min-width so only the table scrolls
  horizontally on small screens.
- Sublesson and lesson-tree rows get min-w-0 so truncate works in flex; long names
  now ellipsize instead of overflowing. Tree drag handle + hover actions hidden on
  mobile (were unusable via touch anyway), freeing width for the name.
- Lesson detail title wraps and scales down on mobile.
---
 packages/frontend/src/components/CardTable.tsx     |  4 ++--
 packages/frontend/src/components/Layout.tsx        |  4 ++--
 packages/frontend/src/components/LessonTree.tsx    | 10 +++++-----
 packages/frontend/src/components/SublessonList.tsx |  6 +++---
 packages/frontend/src/pages/LessonDetail.tsx       |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/CardTable.tsx b/packages/frontend/src/components/CardTable.tsx
index bf13343..d790a4d 100644
--- a/packages/frontend/src/components/CardTable.tsx
+++ b/packages/frontend/src/components/CardTable.tsx
@@ -27,8 +27,8 @@ export function CardTable({
   }
 
   return (
-    <div className="overflow-hidden rounded-2xl">
-      <table className="w-full text-sm">
+    <div className="overflow-x-auto rounded-2xl [-webkit-overflow-scrolling:touch]">
+      <table className="w-full min-w-[640px] text-sm">
         <thead>
           <tr className="bg-brand-50/60 text-left text-xs font-semibold uppercase tracking-wider text-brand-700 dark:bg-slate-800/60 dark:text-brand-200">
             <th className="px-4 py-3">Vraag</th>
diff --git a/packages/frontend/src/components/Layout.tsx b/packages/frontend/src/components/Layout.tsx
index 51d9cae..d1fcdbe 100644
--- a/packages/frontend/src/components/Layout.tsx
+++ b/packages/frontend/src/components/Layout.tsx
@@ -98,8 +98,8 @@ export function Layout() {
           </nav>
         )}
       </header>
-      <main className="flex-1 overflow-auto">
-        <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
+      <main className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="mx-auto min-w-0 max-w-6xl px-4 py-6 sm:px-6">
           <Outlet />
         </div>
       </main>
diff --git a/packages/frontend/src/components/LessonTree.tsx b/packages/frontend/src/components/LessonTree.tsx
index 56fe5d4..addbafd 100644
--- a/packages/frontend/src/components/LessonTree.tsx
+++ b/packages/frontend/src/components/LessonTree.tsx
@@ -105,18 +105,18 @@ function TreeRow({ n, depth }: { n: LessonTreeNode; depth: number }) {
     <li style={{ paddingLeft: depth * 20 }} ref={setNodeRef}>
       <div
         style={style}
-        className="group flex items-center gap-2 rounded-2xl px-3 py-2 transition hover:bg-brand-50/70 dark:hover:bg-slate-800/60"
+        className="group flex min-w-0 items-center gap-2 rounded-2xl px-3 py-2 transition hover:bg-brand-50/70 dark:hover:bg-slate-800/60"
       >
         {isOwner && (
           <span
             {...attributes} {...listeners}
-            className="cursor-grab text-slate-400 hover:text-slate-700 active:cursor-grabbing"
+            className="hidden shrink-0 cursor-grab text-slate-400 hover:text-slate-700 active:cursor-grabbing sm:inline"
             title="Sleep om te herordenen"
             aria-label="Drag handle"
           >⋮⋮</span>
         )}
-        <span className={`h-2 w-2 rounded-full ${depth === 0 ? 'bg-brand-500' : 'bg-brand-300'}`} />
-        <Link to={`/lessons/${n.id}`} className="flex-1 truncate font-medium text-slate-800 dark:text-slate-100">
+        <span className={`h-2 w-2 shrink-0 rounded-full ${depth === 0 ? 'bg-brand-500' : 'bg-brand-300'}`} />
+        <Link to={`/lessons/${n.id}`} className="min-w-0 flex-1 truncate font-medium text-slate-800 dark:text-slate-100">
           {n.name}
           <span className="ml-2 rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
             {n.cardCount}
@@ -131,7 +131,7 @@ function TreeRow({ n, depth }: { n: LessonTreeNode; depth: number }) {
           )}
         </Link>
         {isOwner && (
-          <div className="flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
+          <div className="hidden shrink-0 items-center gap-1 opacity-0 transition group-hover:opacity-100 sm:flex">
             <button className="rounded-lg px-2 py-1 text-xs font-medium text-brand-700 hover:bg-brand-100 dark:text-brand-200 dark:hover:bg-brand-900/40" onClick={() => setAddingTo(n.id)}>+ subles</button>
             <button className="rounded-lg px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800" onClick={rename}>rename</button>
             <button className="rounded-lg px-2 py-1 text-xs font-medium text-danger-600 hover:bg-danger-50 dark:hover:bg-danger-400/10" onClick={remove}>delete</button>
diff --git a/packages/frontend/src/components/SublessonList.tsx b/packages/frontend/src/components/SublessonList.tsx
index 4017ad6..ebc21fb 100644
--- a/packages/frontend/src/components/SublessonList.tsx
+++ b/packages/frontend/src/components/SublessonList.tsx
@@ -8,9 +8,9 @@ export function SublessonList({ items }: { items: LessonTreeNode[] }) {
       <h2 className="mb-3 font-display text-xl font-bold">Sublessen</h2>
       <ul className="grid gap-2 sm:grid-cols-2">
         {items.map((c) => (
-          <li key={c.id} className="surface flex items-center justify-between p-3">
-            <Link to={`/lessons/${c.id}`} className="flex-1 truncate font-medium">{c.name}</Link>
-            <span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
+          <li key={c.id} className="surface flex items-center justify-between gap-2 p-3">
+            <Link to={`/lessons/${c.id}`} className="min-w-0 flex-1 truncate font-medium">{c.name}</Link>
+            <span className="shrink-0 rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
               {c.cardCount}
             </span>
           </li>
diff --git a/packages/frontend/src/pages/LessonDetail.tsx b/packages/frontend/src/pages/LessonDetail.tsx
index e85e41d..e872d50 100644
--- a/packages/frontend/src/pages/LessonDetail.tsx
+++ b/packages/frontend/src/pages/LessonDetail.tsx
@@ -110,8 +110,8 @@ export function LessonDetailPage() {
       </nav>
 
       <header className="surface flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <h1 className="flex items-center gap-2 font-display text-3xl font-bold">
+        <div className="min-w-0">
+          <h1 className="flex flex-wrap items-center gap-2 break-words font-display text-2xl font-bold sm:text-3xl">
             {node?.name ?? '…'}
             <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
               {visibilityBadge}