Refine Harbor device ecosystem guidance and device panel layout

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 {