Refine profile modal layout tokens

components/profile-modal.html

@@ -10,7 +10,7 @@
 >
   <div class="bv-modal-backdrop"></div>
 
-  <div class="bv-modal__panel modal-sheet relative flex max-h-modal-shell flex-col overflow-hidden" tabindex="-1">
+  <div class="bv-modal__panel modal-sheet profile-modal" tabindex="-1">
       <!-- Modal Header -->
       <div class="modal-header">
         <h2 id="profileModalTitle" class="text-xl font-bold text-text">Profile</h2>
@@ -33,13 +33,10 @@
       </div>
 
       <!-- Modal Body -->
-      <div class="p-6 flex-1 overflow-hidden min-h-0">
-        <div class="flex flex-col lg:flex-row gap-6 h-full min-h-0">
+      <div class="profile-modal__body">
+        <div class="profile-modal__layout">
           <!-- Left navigation column -->
-          <nav
-            class="flex flex-wrap gap-2 flex-shrink-0 lg:flex-col"
-            aria-label="Profile sections"
-          >
+          <nav class="profile-modal__nav" aria-label="Profile sections">
             <button
               id="profileNavAccount"
               type="button"
@@ -98,7 +95,7 @@
           </nav>
 
           <!-- Right content panes -->
-          <div class="flex-1 min-h-modal-pane lg:min-h-0 overflow-y-auto pr-1">
+          <div class="profile-modal__panes">
             <section
               id="profilePaneAccount"
               class="profile-pane space-y-6"

css/tailwind.source.css

@@ -1512,12 +1512,91 @@
     @apply flex flex-wrap items-center justify-between gap-3 text-sm text-muted;
   }
 
+  .profile-modal {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    max-block-size: var(--modal-shell-max-height);
+    overflow: hidden;
+  }
+
+  .profile-modal__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--space-lg);
+    min-block-size: 0;
+    overflow: hidden;
+    padding-block-start: var(--space-md);
+    padding-block-end: var(--space-lg);
+    padding-inline: var(--space-lg);
+  }
+
+  .profile-modal__layout {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--space-lg);
+    min-block-size: 0;
+  }
+
+  .profile-modal__nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  .profile-modal__panes {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-block-size: 0;
+    overflow-y: auto;
+    padding-inline-end: var(--profile-modal-scrollbar-offset);
+    scrollbar-gutter: stable;
+  }
+
   .profile-pane {
-    @apply min-h-modal-pane flex flex-col gap-lg;
+    display: flex;
+    flex-direction: column;
+    min-block-size: auto;
   }
 
   .profile-pane.hidden {
-    display: none;
+    display: none !important;
+  }
+
+  @supports not (scrollbar-gutter: stable) {
+    .profile-modal__panes {
+      padding-inline-end: calc(
+        var(--profile-modal-scrollbar-offset) + var(--space-2xs)
+      );
+    }
+  }
+
+  @media (min-width: theme("screens.lg")) {
+    .profile-modal__body {
+      gap: var(--space-xl);
+      padding-inline: var(--space-xl);
+    }
+
+    .profile-modal__layout {
+      display: grid;
+      align-items: flex-start;
+      block-size: 100%;
+      gap: var(--space-xl);
+      grid-template-columns:
+        minmax(
+          var(--profile-modal-nav-min-width),
+          var(--profile-modal-nav-max-width)
+        )
+        minmax(0, 1fr);
+    }
+
+    .profile-modal__nav {
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
   }
 
   /* Torrent helper classes */

css/tokens.css

@@ -237,6 +237,9 @@
   --modal-body-max-height: calc(92vh - 4rem);
   --modal-pane-max-height: 48vh;
   --modal-pane-min-height: 20rem;
+  --profile-modal-nav-min-width: 14rem;
+  --profile-modal-nav-max-width: 18rem;
+  --profile-modal-scrollbar-offset: var(--space-2xs);
   --modal-embed-height: 80vh;
   --profile-history-max-height: 26.25rem;
   --status-log-min-height: 5rem;