Improve profile modal mobile navigation

css/tailwind.source.css

@@ -1071,6 +1071,16 @@
     color: var(--color-text);
   }
 
+  .modal-back {
+    @apply inline-flex items-center gap-2;
+  }
+
+  @media (min-width: theme("screens.lg")) {
+    .modal-back {
+      display: none !important;
+    }
+  }
+
   .modal-body {
     @apply space-y-5 px-8 pb-8 pt-2;
     overscroll-behavior: contain;
@@ -1554,6 +1564,29 @@
     min-block-size: 0;
   }
 
+  .profile-modal__header {
+    align-items: center;
+  }
+
+  .profile-modal__header-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .profile-modal__menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .profile-modal__pane-wrapper {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-block-size: 0;
+  }
+
   .profile-modal__nav {
     display: flex;
     flex-wrap: wrap;
@@ -1593,6 +1626,18 @@
     }
   }
 
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
+    .profile-modal__layout[data-mobile-view="menu"]
+      .profile-modal__pane-wrapper {
+      display: none;
+    }
+
+    .profile-modal__layout[data-mobile-view="pane"]
+      .profile-modal__menu {
+      display: none;
+    }
+  }
+
   @media (min-width: theme("screens.lg")) {
     .profile-modal__body {
       gap: calc(var(--profile-modal-gap) + var(--space-2xs));
@@ -1620,6 +1665,10 @@
       inline-size: var(--profile-modal-nav-max-width);
       min-inline-size: var(--profile-modal-nav-min-width);
     }
+
+    .profile-modal__pane-wrapper {
+      block-size: 100%;
+    }
   }
 
   /* Torrent helper classes */