fix(ui): mobile layout — no horizontal page scroll, truncate names, scrollable card table

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