Fix device name and edit control layout

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.17.1',
-  gatewayClient: '0.18.1',
+  macClient: '0.17.2',
+  gatewayClient: '0.18.2',
   gatewayBackend: '0.18.0',
 });
 

src/web/components/DevicesPanel.jsx

@@ -574,7 +574,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                   </form>
                 ) : (
                   <>
-                    <h3 className="client-device-name-heading">
+                    <h3 className={`client-device-name-heading${hasName ? '' : ' is-address-only'}`}>
                       {hasName && <button
                         className="client-device-alias-trigger"
                         type="button"

src/web/styles.css

@@ -949,10 +949,6 @@ p {
   padding: 11px 0 0;
 }
 
-.client-device-main:has(.client-device-edit-wrap) {
-  padding-right: 27px;
-}
-
 .client-device-main > h3 {
   height: 23px;
   flex: 1 1 auto;
@@ -968,6 +964,10 @@ p {
   white-space: nowrap;
 }
 
+.client-device-main > h3.is-address-only {
+  flex: 0 1 auto;
+}
+
 .client-device-alias-trigger,
 .client-device-ip {
   min-width: 0;
@@ -1044,9 +1044,7 @@ p {
 }
 
 .client-device-edit-wrap {
-  position: absolute;
-  right: 0;
-  bottom: 0;
+  flex: 0 0 23px;
   width: 23px;
   height: 23px;
   opacity: 0.34;

test/web/device-inventory-contract.test.js

@@ -43,11 +43,12 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /client-device-alias-trigger[\s\S]*client-device-name-separator[\s\S]*client-device-ip/);
   assert.match(panel, /onClick=\{\(\) => startEditing\(device\)\}/);
   assert.match(panel, /\{!hasName && <span className="client-device-edit-wrap client-tooltip-anchor">/);
+  assert.match(panel, /client-device-name-heading\$\{hasName \? '' : ' is-address-only'\}/);
   assert.match(panel, /pencilAnimationId === device\.id \? ' is-writing'/);
   assert.match(panel, /onAnimationEnd=\{\(\) => setPencilAnimationId/);
   assert.match(panel, /COPY_FEEDBACK_MS = 800/);
   assert.match(panel, /IP скопирован/);
-  assert.doesNotMatch(panel, /client-device-name-feedback|client-device-name-primary|is-address-only/);
+  assert.doesNotMatch(panel, /client-device-name-feedback|client-device-name-primary/);
   assert.doesNotMatch(panel, /client-device-title/);
   assert.match(panel, /online \? 'В сети' : <TextMorph from="Не в сети" to=\{seen\.relative\} \/>/);
   assert.match(panel, /aria-label=\{`\$\{online \? 'В сети' : 'Не в сети'\}\. Последний контакт: \$\{seen\.tooltip\}`\}/);
@@ -117,7 +118,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-name-separator \{[\s\S]*color: var\(--client-muted\)/);
   assert.match(styles, /\.client-device-ip\.is-copied \{[\s\S]*client-device-ip-copy 800ms/);
   assert.match(styles, /\.client-device-main \{[^}]*height: 34px[\s\S]*align-items: flex-end[\s\S]*padding: 11px 0 0/);
-  assert.match(styles, /\.client-device-main:has\(\.client-device-edit-wrap\) \{[\s\S]*padding-right: 27px/);
+  assert.match(styles, /\.client-device-main > h3\.is-address-only \{[\s\S]*flex: 0 1 auto/);
   assert.match(styles, /\.client-device-last-seen \{[^}]*height: 10px[\s\S]*align-items: center/);
   assert.match(styles, /\.client-device-traffic-value\.has-delta > \.is-total[\s\S]*translateY\(-0\.18em\)/);
   assert.match(styles, /\.client-device-last-seen\.is-online \{[\s\S]*color: var\(--client-accent\)/);
@@ -126,7 +127,8 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-pin-wrap\.client-tooltip-anchor:hover > \.client-tooltip[\s\S]*translate\(0, 0\)/);
   assert.match(styles, /\.client-device-pin:hover:not\(:disabled\) svg[\s\S]*translateY\(-2px\) rotate\(-12deg\)/);
   assert.match(styles, /\.client-device-pin\[aria-pressed="true"\] svg/);
-  assert.match(styles, /\.client-device-edit-wrap \{[\s\S]*position: absolute;[\s\S]*right: 0;[\s\S]*bottom: 0/);
+  assert.match(styles, /\.client-device-edit-wrap \{[\s\S]*flex: 0 0 23px;[\s\S]*width: 23px/);
+  assert.doesNotMatch(styles, /\.client-device-edit-wrap \{[^}]*position: absolute/);
   assert.match(styles, /\.client-device-edit\.is-writing svg \{[\s\S]*client-device-pencil-write 620ms/);
   assert.match(styles, /@keyframes client-device-pencil-write[\s\S]*0%, 100%[\s\S]*translate\(1px, -1px\) rotate\(-5deg\)/);
   assert.match(styles, /\.client-device-traffic-plot \{[\s\S]*height: 100%;[\s\S]*min-height: 0;[\s\S]*overflow: hidden/);