Refine server picker layout and bump Harbor versions

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

@@ -41,15 +41,17 @@ test('server rows scroll without moving the subscription column or showing a scr
   assert.match(styles, /\.client-server-scroll::-webkit-scrollbar\s*\{[\s\S]*display:\s*none/);
   assert.match(simpleScroll, /max-height:\s*none/);
   assert.match(simpleScroll, /overflow:\s*visible/);
-  assert.match(grid, /width:\s*min\(100%, 180px\)/);
+  assert.match(grid, /width:\s*min\(100%, 220px\)/);
   assert.match(rule('.client-form-content'), /gap:\s*24px/);
   assert.match(rule('.client-server-toolbar-title'), /grid-column:\s*2/);
-  assert.match(rule('.client-server-toolbar-actions'), /grid-column:\s*3/);
+  assert.match(rule('.client-server-mode-toggle'), /grid-row:\s*2/);
+  assert.match(rule('.client-server-check'), /grid-column:\s*3/);
   assert.doesNotMatch(rule('.client-servers.is-scalable .client-server-grid'), /width:/);
 });
 
 test('tablet and mobile regions use normal flow with viewport-safe widths', () => {
   const responsive = /@media \(max-width: 920px\) \{([\s\S]*?)\n\}\n\n@media \(max-width: 560px\)/.exec(styles)?.[1] || '';
+  const mobile = /@media \(max-width: 560px\) \{([\s\S]*?)\n\}\n\n@media \(prefers-reduced-motion/.exec(styles)?.[1] || '';
 
   assert.match(responsive, /grid-template-columns:\s*minmax\(0, 1fr\)/);
   assert.match(responsive, /\.client-power-section,[\s\S]*\.client-form,[\s\S]*grid-column:\s*1/);
@@ -60,6 +62,8 @@ test('tablet and mobile regions use normal flow with viewport-safe widths', () =
   assert.match(responsive, /\.client-inline-error\.is-connection,[\s\S]*position:\s*static/);
 
   assert.match(rule('.client-duration-toggle'), /width:\s*min\(290px, 100%\)/);
+  assert.match(mobile, /\.client-server-toolbar \{[\s\S]*grid-template-rows:\s*44px 44px/);
+  assert.match(mobile, /\.client-server-check \{[\s\S]*width:\s*104px/);
   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-confirmation-dialog\s*\{[\s\S]*width:\s*min\(430px, calc\(100vw - 48px\)\)/);

test/web/server-picker.test.js

@@ -57,12 +57,12 @@ test('manual ping uses plain language and keeps results beside server names', ()
   assert.match(picker, /function ServerHealth/);
   assert.match(picker, /client-server-health-checking/);
   assert.match(picker, /function ServerCheckButton/);
-  assert.match(picker, /client-server-check client-tooltip-anchor/);
-  assert.match(picker, /<span className="client-tooltip" role="tooltip">/);
+  assert.match(picker, /<span>\{checking \? 'Проверяем' : 'Проверить пинг'\}<\/span>/);
   assert.doesNotMatch(picker, /TCP|Не проверен/);
-  assert.match(styles, /\.client-server \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\) auto minmax\(0, 1fr\);/);
-  assert.match(styles, /\.client-server-health \{[\s\S]*?grid-column: 3;[\s\S]*?justify-self: end;/);
-  assert.match(styles, /\.client-server-grid \{[\s\S]*?width: min\(100%, 180px\);/);
+  assert.match(picker, /<strong>\{server\.label\}<\/strong>[\s\S]*?<\/button>[\s\S]*?client-server-meta/);
+  assert.match(styles, /\.client-server-row \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\) 120px minmax\(0, 1fr\);/);
+  assert.match(styles, /\.client-server-row \.client-server \{[\s\S]*?width: 120px;/);
+  assert.match(styles, /\.client-server-meta \{[\s\S]*?grid-column: 3;[\s\S]*?margin-left: 10px;/);
   assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/);
   assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);
 });
@@ -73,7 +73,10 @@ test('server picker starts simple and reveals advanced controls on demand', () =
   assert.match(picker, /setAdvanced\(\(current\) => !current\)/);
   assert.match(picker, /<span>Поиск и фильтры<\/span>/);
   assert.match(picker, /client-server-toolbar-title">Список серверов/);
-  assert.match(picker, /client-server-toolbar-actions/);
+  assert.doesNotMatch(picker, /client-server-toolbar-actions/);
+  assert.match(styles, /\.client-servers\.is-scalable \{[\s\S]*?width: min\(100%, 300px\);/);
+  assert.match(styles, /\.client-server-mode-toggle \{[\s\S]*?grid-row: 2;/);
+  assert.match(styles, /\.client-server-check \{[\s\S]*?grid-column: 3;[\s\S]*?grid-row: 1;/);
   assert.match(picker, /client-server-mode-panel is-simple/);
   assert.match(picker, /client-server-mode-panel is-advanced/);
   assert.match(picker, /inert={advanced \? true : undefined}/);