Four classes and one component. The rail is a fixed 208px; the main column takes the rest and owns its own scroll. min-w-0 on the main is what stops a wide table from pushing the rail off screen.

<div class="flex min-h-screen bg-gray-100">
  <Sidebar />
  <main class="min-w-0 flex-1 overflow-auto">{@render children?.()}</main>
</div>

Title left, actions right, bottom margin 6. Group and Lobby both use it; the NDO view uses a white bar with a bottom border instead, because its tabs hang off the bottom edge.

<div class="mb-6 flex items-start justify-between">
  <div>
    <h1 class="text-2xl font-bold text-gray-900">{name}</h1>
    <p class="mt-1 font-mono text-sm text-gray-400">{id}</p>
  </div>
  <div class="flex items-center gap-2"><!-- actions --></div>
</div>

A white strip above the lobby content, outside its p-6, so it spans the full width of the main column.

<div class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-2">
  <span class="text-sm text-gray-700">Signed in as <span class="font-semibold text-gray-900">{nickname}</span></span>
  <button class="rounded px-2 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50">Edit</button>
</div>

Every dialog in the app shares this: a blurred 40% black backdrop, a 12px-radius white card, a hairline-divided header and footer. Only max-w varies — sm for a choice, md for a form, lg for the NDO create form.

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
  <div class="relative w-full max-w-lg rounded-xl border border-gray-200 bg-white shadow-xl" role="dialog" aria-modal="true">
    <div class="border-b border-gray-100 px-6 py-4"><!-- title + subtitle --></div>
    <div class="max-h-[70vh] overflow-y-auto px-6 py-4 space-y-4"><!-- body --></div>
    <div class="flex justify-end gap-2 border-t border-gray-100 px-6 py-4"><!-- cancel + primary --></div>
  </div>
</div>