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 {

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%;