Refine Harbor device ecosystem guidance and device panel layout

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

@@ -205,6 +205,9 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /client-devices-reset-wrap client-tooltip-anchor[\s\S]*aria-label="Обнулить трафик устройств"[\s\S]*<Tooltip>Обнулить трафик устройств<\/Tooltip>/);
   assert.doesNotMatch(panel, /className="client-devices-reset"[\s\S]{0,320}<span>/);
   assert.match(styles, /\.client-devices-kicker \{[^}]*flex-wrap: nowrap/);
+  assert.match(panel, /<div className="client-devices-kicker">[\s\S]*<header className="client-instructions-header client-devices-header">/);
+  assert.match(styles, /\.client-devices-kicker \{[^}]*position: sticky;[^}]*top: 0;[^}]*z-index: 30/);
+  assert.match(styles, /\.client-devices-kicker \.client-tooltip \{[^}]*top: calc\(100% \+ 6px\);[^}]*bottom: auto/);
   assert.match(styles, /\.client-devices-reset-wrap \{[^}]*margin-left: auto/);
   assert.match(styles, /\.client-devices-reset-wrap > \.client-tooltip \{[^}]*white-space: nowrap/);
   assert.match(styles, /\.client-devices-reset-wrap\.client-tooltip-anchor:hover > \.client-tooltip,[\s\S]*transform: translate\(0, 0\)/);

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

@@ -163,11 +163,12 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
   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:/);
+  assert.match(styles, /\.client-secondary-menu:has\(\.client-rail-action\.is-open\) \.client-rail-action > span\s*\{[^}]*opacity:\s*0/);
   assert.deepEqual(
     ['.client-confirmation-popup', '.client-secondary-menu', '.client-drawer', '.harbor-versions'].map(zIndex),
     [100, 60, 50, 40],
   );
-  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.doesNotMatch(styles, /\.client-drawer\s*\{[^}]*right:\s*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"/);

test/web/style-boundaries.test.js

@@ -37,26 +37,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 818,
+    cascadeEdges: 821,
     customProperties: 103,
-    declarations: 3300,
+    declarations: 3308,
     important: 0,
     keyframes: 56,
-    media: 13,
+    media: 12,
     rules: 947,
-    variableReferences: 808,
+    variableReferences: 810,
   },
   hashes: {
-    cascadeEdges: 'e5115e193b09067562309034ecfed8dd35d7435562b581036da00190dfd95650',
+    cascadeEdges: '54abf37aa617e90947c3e0cfd35f2358f8873bda512992c5628950d828ea7486',
     customProperties: 'ef70fb1d9b61b177f1939f811babe1116bee631de26f5eac0aa0d0009ca5a1fb',
-    declarations: '3e6d3c24e0df278909fd0200470193378866819c1a62a6d0404e74297cab45d7',
+    declarations: '97e97ccb50010db1950b2a2ceeb3bdbcc8574aaee5a676724d3332a69fab537d',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
     duplicateSelectors: '0fa66e370695261a2a5c6a189752c07d518d80d68d3e79a3ba4bb34407893c0e',
     keyframes: 'd4378751f36eccc87923c12540315462055032a5d34978a0f45ecada0a5cc1ce',
-    ruleDeclarationSequences: 'ef07abd92d371c865e70dc8e709a396ec46056164035594a8cddda6b0f61a629',
-    selectors: '085df6f266f22b99fc429c089b3142f12fd6f74bfb9b86233c55bf8baa92469c',
-    variableReferences: '664c093241c4076ca05a9dda06ae88d4e7024c926c4636109790201df8212df4',
-    witnesses: 'ac771c94e7f2c409c3d317de610c2dae5722eb1d6f0b6626a4e1aa986c83fd94',
+    ruleDeclarationSequences: '14f4eceda4a1811799b7dc50491c9298c27c5796fa8fc8ce02104bdb268d7675',
+    selectors: '1420d737139ad3e03bbdcf5a4e1573443e500cda572b4461bdc578cd6b3c04de',
+    variableReferences: 'c8e01fce4a7f3a976040f20938ec8d70403bd003f66ef13b5637c77f9c4cef08',
+    witnesses: 'b47da99c00da77a5c9716796304fab2163fb21c6bc6753176f008f85a3420695',
   },
 };
 
@@ -405,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-DhqvaTQ4.css']);
+  assert.deepEqual(assets, ['index-0HVoD6xZ.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 127639);
-  assert.equal(sha256(built), 'c5e9ec300671c6660fb23bfaa725a53b165dd08e387362cfac3fbcf709a8d9e9');
+  assert.equal(built.byteLength, 127874);
+  assert.equal(sha256(built), '97241721abba48f5a120e08c425fb67b8b3ab560e59b479351ea455837838805');
 });