Refine Harbor device ecosystem guidance and device panel layout

src/web/features/devices/DevicesPanel.tsx

@@ -327,7 +327,6 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
       closeLabel="Закрыть устройства"
       onClose={onClose}
     >
-        <header className="client-instructions-header client-devices-header">
           <div className="client-devices-kicker">
             <span>Gateway · {devices.length}</span>
             <span className="client-devices-refresh-wrap client-tooltip-anchor">
@@ -385,6 +384,7 @@ export function DevicesPanel({ feature }: { feature: DevicesFeature }) {
               <Tooltip>Обнулить трафик устройств</Tooltip>
             </span>
           </div>
+        <header className="client-instructions-header client-devices-header">
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">
             <p>Устройства, которые Gateway видит в локальной таблице соседей.</p>

src/web/styles/features/devices.css

@@ -15,11 +15,18 @@
 }
 
 .client-devices-kicker {
+  position: sticky;
+  top: 0;
+  z-index: 30;
   width: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   gap: 8px;
+  margin-bottom: 9px;
+  padding: 0 8px;
+  background: color-mix(in oklch, var(--client-bg) 99%, var(--client-panel));
 }
 
 .client-devices-kicker > span:first-child {
@@ -232,8 +239,9 @@
   animation: client-spin 900ms linear infinite;
 }
 
-.client-instructions-header .client-devices-refresh-wrap > .client-tooltip,
-.client-instructions-header .client-devices-sort-wrap > .client-tooltip {
+.client-devices-kicker .client-tooltip {
+  top: calc(100% + 6px);
+  bottom: auto;
 }
 
 @keyframes client-devices-refresh-progress {

src/web/styles/primitives.css

@@ -179,6 +179,10 @@
   visibility: hidden;
 }
 
+.client-secondary-menu:has(.client-rail-action.is-open) .client-rail-action > span {
+  opacity: 0;
+}
+
 .client-drawer {
   position: fixed;
   inset: 0 0 0 auto;
@@ -202,13 +206,6 @@
   transition-delay: 0s;
 }
 
-@media (min-width: 921px) {
-  .client-drawer {
-    right: 64px;
-    width: min(580px, calc(100vw - 64px));
-  }
-}
-
 .client-drawer-sheet {
   position: relative;
   min-height: 100%;