Bump Harbor versions and tighten server picker layout

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.8.5',
+  macClient: '0.8.6',
-  gatewayClient: '0.8.5',
+  gatewayClient: '0.8.6',
   gatewayBackend: '0.8.0',
 });
 

src/web/components/ServerPicker.jsx

@@ -59,16 +59,16 @@ function ServerHealth({ ping, fallback }) {
 
 function ServerCheckButton({ checking, disabled, onClick }) {
   return <button
-    className={`client-server-check${checking ? ' is-checking' : ''}`}
+    className={`client-server-check client-tooltip-anchor${checking ? ' is-checking' : ''}`}
     type="button"
     aria-label={checking ? 'Проверяем пинг серверов' : 'Проверить пинг серверов'}
     disabled={checking || disabled}
     onClick={onClick}
   >
-    <span>Проверить пинг</span>
     <svg viewBox="0 0 24 24" aria-hidden="true">
       <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
     </svg>
+    <span className="client-tooltip" role="tooltip">{checking ? 'Проверяем пинг…' : 'Проверить пинг'}</span>
   </button>;
 }
 
@@ -194,7 +194,10 @@ export function ServerPicker({
     return <section className="client-servers" aria-label="Выберите сервер">
       {prompt && <span className="client-server-prompt">Выберите сервер</span>}
       <div className="client-server-toolbar is-single">
-        <ServerCheckButton checking={checking} onClick={checkVisible} />
+        <span className="client-server-toolbar-title">Список серверов</span>
+        <div className="client-server-toolbar-actions">
+          <ServerCheckButton checking={checking} onClick={checkVisible} />
+        </div>
       </div>
       <div className="client-server-grid">
         <ServerRow
@@ -232,17 +235,20 @@ export function ServerPicker({
   return <section className="client-servers is-scalable" aria-label="Выберите сервер">
     {prompt && <span className="client-server-prompt">Выберите сервер</span>}
     <div className="client-server-toolbar">
-      <button
+      <span className="client-server-toolbar-title">Список серверов</span>
-        className={`client-server-mode-toggle${advanced ? ' is-open' : ''}`}
+      <div className="client-server-toolbar-actions">
-        type="button"
+        <button
-        aria-expanded={advanced}
+          className={`client-server-mode-toggle${advanced ? ' is-open' : ''}`}
-        aria-label={advanced ? 'Скрыть поиск и фильтры' : 'Показать поиск и фильтры'}
+          type="button"
-        onClick={() => setAdvanced((current) => !current)}
+          aria-expanded={advanced}
-      >
+          aria-label={advanced ? 'Скрыть поиск и фильтры' : 'Показать поиск и фильтры'}
-        <span>Поиск и фильтры</span>
+          onClick={() => setAdvanced((current) => !current)}
-        <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
+        >
-      </button>
+          <span>Поиск и фильтры</span>
-      <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
+          <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
+        </button>
+        <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
+      </div>
     </div>
 
     <div className="client-server-mode-panels">

src/web/styles.css

@@ -2027,7 +2027,7 @@ p {
 .client-form-content {
   display: grid;
   align-content: start;
-  gap: 36px;
+  gap: 24px;
   opacity: 1;
   filter: blur(0);
   transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -2598,17 +2598,17 @@ p {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
-  width: min(100%, 220px);
+  width: min(100%, 180px);
   margin-inline: auto;
 }
 
 .client-server {
   min-width: 0;
   min-height: 44px;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: baseline;
-  justify-content: center;
+  gap: 0;
-  gap: 9px;
   padding: 6px 4px 7px;
   border: 0;
   border-bottom: 1px solid var(--client-border);
@@ -2663,6 +2663,8 @@ p {
 }
 
 .client-server strong {
+  grid-column: 2;
+  justify-self: center;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2679,6 +2681,8 @@ p {
 }
 
 .client-server-health {
+  grid-column: 3;
+  justify-self: end;
   display: grid;
   place-items: center;
   white-space: nowrap;
@@ -2719,14 +2723,27 @@ p {
 
 .client-server-toolbar {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  margin-bottom: 8px;
+  min-height: 32px;
+  margin-bottom: 4px;
 }
 
-.client-server-toolbar.is-single {
+.client-server-toolbar-title {
+  grid-column: 2;
+  color: var(--client-muted);
+  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.client-server-toolbar-actions {
+  grid-column: 3;
+  justify-self: end;
   display: flex;
-  justify-content: center;
+  align-items: center;
+  gap: 2px;
 }
 
 .client-server-mode-toggle {
@@ -2735,9 +2752,8 @@ p {
   align-items: center;
   justify-content: center;
   gap: 7px;
-  grid-column: 2;
   margin: 0;
-  padding: 5px 8px;
+  padding: 5px 4px;
   border: 0;
   background: transparent;
   color: var(--client-muted);
@@ -2747,26 +2763,23 @@ p {
 }
 
 .client-server-check {
-  grid-column: 3;
+  width: 32px;
-  justify-self: start;
+  height: 32px;
-  width: 116px;
   min-height: 32px;
-  padding: 5px 7px;
+  padding: 0;
   border: 0;
   background: transparent;
   color: var(--client-muted);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   cursor: pointer;
   transition: color 300ms ease, opacity 300ms ease, text-shadow 500ms ease;
 }
 
 .client-server-check svg {
-  width: 13px;
+  width: 16px;
-  height: 13px;
+  height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.6;
@@ -3441,7 +3454,7 @@ p {
   }
 
   .client-form-content {
-    gap: 48px;
+    gap: 32px;
   }
 
   .harbor-brand {
@@ -3464,12 +3477,18 @@ p {
 
   .client-server-filters button,
   .client-server-mode-toggle,
+  .client-server-check,
   .client-server-group-toggle,
   .client-server-more,
   .client-server-favorite {
     min-height: 44px;
   }
 
+  .client-server-check {
+    width: 44px;
+    height: 44px;
+  }
+
   .client-local-rule {
     grid-template-columns: 44px minmax(0, 1fr) 44px;
   }

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

@@ -41,7 +41,10 @@ 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%, 220px\)/);
+  assert.match(grid, /width:\s*min\(100%, 180px\)/);
+  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.doesNotMatch(rule('.client-servers.is-scalable .client-server-grid'), /width:/);
 });
 

test/web/server-picker.test.js

@@ -57,10 +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, /<span>Проверить пинг<\/span>/);
+  assert.match(picker, /client-server-check client-tooltip-anchor/);
+  assert.match(picker, /<span className="client-tooltip" role="tooltip">/);
   assert.doesNotMatch(picker, /TCP|Не проверен/);
-  assert.match(styles, /\.client-server \{[\s\S]*?align-items: baseline;[\s\S]*?justify-content: center;/);
+  assert.match(styles, /\.client-server \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\) auto minmax\(0, 1fr\);/);
-  assert.match(styles, /\.client-server-grid \{[\s\S]*?width: min\(100%, 220px\);/);
+  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, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/);
   assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);
 });
@@ -70,6 +72,8 @@ test('server picker starts simple and reveals advanced controls on demand', () =
   assert.match(picker, /aria-expanded={advanced}/);
   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.match(picker, /client-server-mode-panel is-simple/);
   assert.match(picker, /client-server-mode-panel is-advanced/);
   assert.match(picker, /inert={advanced \? true : undefined}/);