Animate vertical transitions between client drawers

test/web/responsive-layout-contract.test.js

@@ -76,6 +76,7 @@ test('server rows scroll inside the subscription drawer without moving the main
   const grid = rule('.client-server-grid');
 
   assert.match(scroll, /overflow-y:\s*auto/);
+  assert.match(scroll, /overflow-x:\s*hidden/);
   assert.match(scroll, /scrollbar-width:\s*none/);
   assert.match(styles, /\.client-server-scroll::-webkit-scrollbar\s*\{[\s\S]*display:\s*none/);
   assert.match(simpleScroll, /max-height:\s*352px/);
@@ -83,6 +84,7 @@ test('server rows scroll inside the subscription drawer without moving the main
   assert.match(simpleScroll, /scrollbar-width:\s*thin/);
   assert.match(grid, /width:\s*min\(100%, 220px\)/);
   assert.match(rule('.client-drawer'), /overflow-y:\s*auto/);
+  assert.match(rule('.client-drawer'), /overflow-x:\s*hidden/);
   assert.match(subscription, /client-profile-list[\s\S]*feature\.profiles\.map\(\(profile\) => <ProfileGroup/);
   assert.match(rule('.client-server-toolbar-title'), /grid-column:\s*2/);
   assert.match(rule('.client-server-mode-toggle'), /grid-row:\s*2/);
@@ -110,10 +112,7 @@ test('tablet and mobile regions use normal flow with viewport-safe widths', () =
   assert.match(mobile, /\.client-secondary-menu \{[\s\S]*right:\s*8px/);
   assert.match(mobile, /\.client-power-control > \.harbor-brand \{[\s\S]*scale\(1\.35\)/);
   assert.match(mobile, /\.client-server-check \{[\s\S]*width:\s*44px/);
-  assert.match(styles, /\.client-instructions\s*\{[\s\S]*width:\s*min\(470px, 100vw\)/);
-  assert.match(styles, /\.client-local-rules\s*\{[\s\S]*width:\s*min\(480px, 100vw\)/);
-  assert.match(styles, /\.client-instructions\.client-diagnostics\s*\{[\s\S]*width:\s*min\(580px, 100vw\)/);
-  assert.match(styles, /\.client-subscription-drawer\s*\{[\s\S]*width:\s*min\(480px, 100vw\)/);
+  assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
   assert.match(styles, /\.client-confirmation-dialog\s*\{[\s\S]*width:\s*min\(430px, calc\(100vw - 48px\)\)/);
 
   for (const viewport of [320, 390, 768]) {
@@ -128,11 +127,11 @@ test('tablet and mobile regions use normal flow with viewport-safe widths', () =
   assert.ok(Math.min(360, desktopOuterColumn) <= desktopOuterColumn, 'details fit the 1440px desktop grid');
 });
 
-test('secondary menus share one right rail and both drawers open from the right', () => {
+test('secondary menus share one right rail and switch equal drawers as a vertical tape', () => {
   const disabledRulesLabel = rule('.client-local-rules-toggle:disabled span');
   const zIndex = (selector) => Number(/z-index:\s*(\d+)/.exec(rule(selector))?.[1]);
 
-  assert.match(component, /<nav className="client-secondary-menu" aria-label="Дополнительные меню">/);
+  assert.match(component, /<nav[\s\S]*className="client-secondary-menu"[\s\S]*aria-label="Дополнительные меню"[\s\S]*onPointerDown=\{\(event\) => event\.stopPropagation\(\)\}/);
   assert.match(component, /<SubscriptionToggle[\s\S]*<InstructionsToggle[\s\S]*<DevicesToggle/);
   assert.match(subscription, /controls="client-subscription-drawer"/);
   assert.match(component, /<InstructionsToggle[\s\S]*<RoutingToggle/);
@@ -160,6 +159,7 @@ test('secondary menus share one right rail and both drawers open from the right'
   assert.match(styles, /@keyframes client-rail-info-refill[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
   assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
   assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
+  assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
   assert.match(rule('.client-drawer'), /transform:\s*translateX\(104%\)/);
   assert.match(rule('.client-drawer'), /z-index:\s*50/);
   assert.match(rule('.client-drawer'), /box-shadow:/);
@@ -167,12 +167,16 @@ test('secondary menus share one right rail and both drawers open from the right'
     ['.client-confirmation-popup', '.client-secondary-menu', '.client-drawer', '.harbor-versions'].map(zIndex),
     [100, 60, 50, 40],
   );
-  assert.match(rule('.client-instructions'), /width:\s*min\(470px, 100vw\)/);
-  assert.match(rule('.client-local-rules'), /width:\s*min\(480px, 100vw\)/);
+  assert.match(styles, /@media \(min-width: 921px\) \{[\s\S]*\.client-drawer \{[\s\S]*right:\s*64px;[\s\S]*width:\s*min\(580px, calc\(100vw - 64px\)\)/);
   assert.match(instructions, /<Drawer[\s\S]*className="client-instructions"/);
   assert.match(routing, /<Drawer[\s\S]*className="client-local-rules"/);
   assert.match(subscription, /<Drawer[\s\S]*className="client-subscription-drawer"/);
-  assert.match(component, /subscriptionFeature\.close\(\)[\s\S]*devicesFeature\.close\(\)[\s\S]*diagnosticsFeature\.close\(\)[\s\S]*instructionsFeature\.toggle\(\)/);
+  assert.match(component, /const DRAWER_ORDER = \['subscription', 'instructions', 'devices', 'diagnostics', 'routing'\]/);
+  assert.match(component, /function switchDrawer\(target: DrawerKey\)[\s\S]*from\.inert = true[\s\S]*translateY\(\$\{direction \* 100\}%\)[\s\S]*translateY\(\$\{-direction \* 100\}%\)/);
+  assert.match(component, /const cancel = \(\) => \{[\s\S]*from\.inert = false;[\s\S]*from\.removeAttribute\('aria-hidden'\)/);
+  assert.match(component, /DRAWER_SWITCH_MS = 620[\s\S]*prefers-reduced-motion: reduce[\s\S]*flushSync/);
+  assert.match(component, /current === 'routing' && routingFeature\.dirty[\s\S]*routingFeature\.requestClose\(\)/);
+  assert.doesNotMatch(component, /instructionsFeature\.close\(\)[\s\S]{0,180}devicesFeature\.close\(\)[\s\S]{0,180}subscriptionFeature\.toggle\(\)/);
 });
 
 test('connectivity diagnostics render stable compact tables before the first run', () => {