Simplify client overview access controls and layout

test/web/client-controls.test.js

@@ -2,7 +2,6 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 
 import {
-  accessTabForKey,
   connectionAction,
   copyText,
   formatConnectionDuration,
@@ -94,16 +93,6 @@ test('copy uses the synchronous native path available on gateway HTTP', async ()
   assert.equal(textarea.removed, true);
 });
 
-test('Gateway access tabs wrap with arrows and support Home and End', () => {
-  const tabs = ['gateway', 'proxy'];
-
-  assert.equal(accessTabForKey(tabs, 'gateway', 'ArrowLeft'), 'proxy');
-  assert.equal(accessTabForKey(tabs, 'proxy', 'ArrowRight'), 'gateway');
-  assert.equal(accessTabForKey(tabs, 'proxy', 'Home'), 'gateway');
-  assert.equal(accessTabForKey(tabs, 'gateway', 'End'), 'proxy');
-  assert.equal(accessTabForKey(tabs, 'gateway', 'Enter'), 'gateway');
-});
-
 test('subscription usage combines traffic and caps progress', () => {
   assert.deepEqual(subscriptionUsage({ upload: 30, download: 80, total: 100, expire: 2 }), {
     upload: 30,

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

@@ -90,6 +90,19 @@ test('secondary menus share one right rail and both drawers open from the right'
   assert.match(rule('.client-local-rules'), /transform:\s*translateX\(104%\)/);
 });
 
+test('duration and Gateway access keep stable geometry without tabs', () => {
+  assert.match(rule('.client-state-detail'), /min-height:\s*44px/);
+  assert.match(rule('.client-duration-toggle'), /min-height:\s*44px/);
+  assert.match(component, /client-duration-word-row is-calendar/);
+  assert.match(component, /client-duration-word-row is-clock/);
+  assert.match(rule('.client-duration-toggle > .client-tooltip'), /right:\s*calc\(100% \+ 12px\)/);
+  assert.match(component, /\['gateway', 'GATEWAY'\]/);
+  assert.match(component, /\['socks5', 'SOCKS5'\]/);
+  assert.match(component, /\['http', 'HTTP'\]/);
+  assert.doesNotMatch(component, /client-access-tabs|role="tab"|role="tabpanel"/);
+  assert.match(rule('.client-proxies.is-gateway'), /width:\s*270px/);
+});
+
 test('responsive motion has a reduced-motion fallback', () => {
   const reducedMotion = /@media \(prefers-reduced-motion: reduce\) \{([\s\S]*)\n\}/.exec(styles)?.[1] || '';
 

test/web/rule-editor-contract.test.js

@@ -50,7 +50,7 @@ test('critical confirmations share one accessible blocking popup', () => {
   assert.match(styles, /\.client-confirmation-popup\.is-open[\s\S]*backdrop-filter: blur\(18px\)/);
 });
 
-test('copy feedback, drawers and Gateway tabs expose complete keyboard semantics', () => {
+test('copy feedback, drawers and Gateway access actions expose complete semantics', () => {
   assert.match(component, /className="client-live-region" role="status" aria-live="polite" aria-atomic="true"/);
   assert.match(component, /Не удалось скопировать/);
   assert.match(component, /Скопировано/);
@@ -59,12 +59,8 @@ test('copy feedback, drawers and Gateway tabs expose complete keyboard semantics
   assert.match(component, /aria-label="Закрыть локальные правила"/);
   assert.match(component, /instructionsCloseRef\.current\?\.focus\(\)/);
   assert.match(component, /localRulesCloseRef\.current\?\.focus\(\)/);
-  assert.match(component, /client-access-tab-\$\{tab\}/);
-  assert.match(component, /aria-controls={`client-access-panel-\$\{tab\}`}/);
-  assert.match(component, /tabIndex={accessTab === tab \? 0 : -1}/);
-  assert.match(component, /onKeyDown={\(event\) => navigateAccessTabs\(event, tab\)}/);
-  assert.match(component, /aria-labelledby="client-access-tab-gateway"/);
-  assert.match(component, /aria-labelledby={isGateway \? 'client-access-tab-proxy' : undefined}/);
+  assert.match(component, /aria-label={`Скопировать \$\{label\}: \$\{kind === 'gateway' \? gatewayAddress : proxyUrls\[kind\]\}`}/);
+  assert.doesNotMatch(component, /client-access-tabs|role="tab"|role="tabpanel"/);
   assert.match(styles, /\.client-drawer-close \{[\s\S]*width: 44px;[\s\S]*height: 44px/);
   assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-copy-button \{[\s\S]*min-height: 44px/);
   assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-local-rule-enabled,[\s\S]*\.client-local-rule-delete \{[\s\S]*width: 44px;[\s\S]*height: 44px/);