Animate vertical transitions between client drawers

src/web/styles/features/devices.css

@@ -1,7 +1,3 @@
-.client-instructions.client-devices {
-  width: min(580px, 100vw);
-}
-
 .client-devices-header {
   margin-bottom: 28px;
 }
@@ -128,8 +124,8 @@
   transform: translate(0, 2px);
 }
 
-.client-devices-reset-wrap:hover > .client-tooltip,
-.client-devices-reset-wrap:has(> :focus-visible) > .client-tooltip {
+.client-devices-reset-wrap.client-tooltip-anchor:hover > .client-tooltip,
+.client-devices-reset-wrap.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip {
   transform: translate(0, 0);
 }
 

src/web/styles/features/diagnostics.css

@@ -1,7 +1,3 @@
-.client-instructions.client-diagnostics {
-  width: min(580px, 100vw);
-}
-
 .client-diagnostics-header {
   margin-bottom: 12px;
 }

src/web/styles/features/instructions.css

@@ -1,7 +1,3 @@
-.client-instructions {
-  width: min(470px, 100vw);
-}
-
 .client-instruction-list {
   display: grid;
   gap: 15px;

src/web/styles/features/routing.css

@@ -1,7 +1,3 @@
-.client-local-rules {
-  width: min(480px, 100vw);
-}
-
 .client-local-rules-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;

src/web/styles/features/servers.css

@@ -434,6 +434,7 @@
 
 .client-server-scroll {
   max-height: 330px;
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: 5px;

src/web/styles/features/subscription.css

@@ -38,13 +38,6 @@
   padding: 32px 30px 76px;
 }
 
-@media (min-width: 921px) {
-  .client-subscription-drawer {
-    right: 64px;
-    width: min(480px, calc(100vw - 64px));
-  }
-}
-
 .client-profiles-header {
   min-height: 44px;
   display: flex;
@@ -303,7 +296,7 @@
   grid-template-columns: 18px minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
-  padding: 0 8px;
+  padding: 0 8px 0 32px;
   border: 0;
   background: transparent;
   color: var(--client-text);

src/web/styles/primitives.css

@@ -183,6 +183,8 @@
   position: fixed;
   inset: 0 0 0 auto;
   z-index: 50;
+  width: min(580px, 100vw);
+  overflow-x: hidden;
   overflow-y: auto;
   background: color-mix(in oklch, var(--client-bg) 99%, var(--client-panel));
   color: var(--client-text);
@@ -200,6 +202,13 @@
   transition-delay: 0s;
 }
 
+@media (min-width: 921px) {
+  .client-drawer {
+    right: 64px;
+    width: min(580px, calc(100vw - 64px));
+  }
+}
+
 .client-drawer-sheet {
   position: relative;
   min-height: 100%;
@@ -484,10 +493,6 @@
   transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-subscription-drawer {
-  width: min(480px, 100vw);
-}
-
 .client-confirmation-popup {
   position: fixed;
   inset: 0;