Refresh Harbor docs and subscription controls

src/web/components/ClientOverviewPage.jsx

@@ -679,32 +679,36 @@ export function ClientOverviewPage({
               inert={editingSubscription ? true : undefined}
             >
               <div className="client-subscription-heading">
-                <span>Ваша подписка</span>
-                <button
-                  className="client-subscription-refresh client-tooltip-anchor"
-                  type="button"
-                  aria-label="Обновить подписку"
-                  disabled={refreshingInfo}
-                  onClick={refreshSubscription}
-                >
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
-                  </svg>
+                <span className="client-subscription-label">Ваша подписка</span>
+                <span className="client-icon-tooltip client-tooltip-anchor">
+                  <button
+                    className="client-subscription-refresh"
+                    type="button"
+                    aria-label="Обновить подписку"
+                    disabled={refreshingInfo}
+                    onClick={refreshSubscription}
+                  >
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
+                    </svg>
+                  </button>
                   <CloudTooltip>Обновить подписку</CloudTooltip>
-                </button>
-                <button
-                  className="client-subscription-delete client-tooltip-anchor"
-                  type="button"
-                  aria-label="Удалить подписку"
-                  disabled={busy}
-                  onClick={() => setConfirmingDelete(true)}
-                >
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path className="client-trash-lid" d="M4 7h16M9 7V4h6v3" />
-                    <path d="m6 7 1 13h10l1-13M10 11v5M14 11v5" />
-                  </svg>
+                </span>
+                <span className="client-icon-tooltip client-tooltip-anchor">
+                  <button
+                    className="client-subscription-delete"
+                    type="button"
+                    aria-label="Удалить подписку"
+                    disabled={busy}
+                    onClick={() => setConfirmingDelete(true)}
+                  >
+                    <svg viewBox="0 0 24 24" aria-hidden="true">
+                      <path className="client-trash-lid" d="M4 7h16M9 7V4h6v3" />
+                      <path d="m6 7 1 13h10l1-13M10 11v5M14 11v5" />
+                    </svg>
+                  </button>
                   <CloudTooltip>Удалить подписку</CloudTooltip>
-                </button>
+                </span>
               </div>
               <button
                 className="client-subscription-domain-button"

src/web/styles.css

@@ -1046,15 +1046,15 @@ p {
 
 .client-tooltip {
   position: absolute;
-  top: calc(100% + 6px);
+  bottom: calc(100% + 6px);
   left: 50%;
-  z-index: 12;
+  z-index: 50;
   width: max-content;
   max-width: 220px;
   padding: 6px 8px;
   border-radius: 8px;
-  background: color-mix(in oklch, var(--client-panel) 68%, transparent);
-  box-shadow: 0 7px 22px oklch(0.08 0.015 145 / 0.1);
+  background: color-mix(in oklch, var(--client-panel) 78%, transparent);
+  box-shadow: 0 8px 26px oklch(0.08 0.015 145 / 0.16);
   backdrop-filter: blur(10px) saturate(0.9);
   color: var(--client-text);
   font: 600 10px/1.35 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
@@ -1065,12 +1065,12 @@ p {
   visibility: hidden;
   filter: blur(2px);
   pointer-events: none;
-  transform: translate(-50%, -2px);
+  transform: translate(-50%, 2px);
   transition: opacity 90ms ease, filter 120ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 140ms;
 }
 
 .client-tooltip-anchor:hover > .client-tooltip,
-.client-tooltip-anchor:focus-visible > .client-tooltip {
+.client-tooltip-anchor:focus-within > .client-tooltip {
   opacity: 1;
   visibility: visible;
   filter: blur(0);
@@ -1078,6 +1078,13 @@ p {
   transition-delay: 20ms, 20ms, 20ms, 0s;
 }
 
+.client-icon-tooltip {
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+}
+
 .client-power-section p {
   min-height: 0;
   line-height: 20px;
@@ -1285,6 +1292,11 @@ p {
   pointer-events: none;
 }
 
+.client-subscription.is-editing .client-icon-tooltip {
+  opacity: 0;
+  pointer-events: none;
+}
+
 .client-subscription-edit,
 .client-subscription-summary {
   grid-area: 1 / 1;
@@ -1471,7 +1483,7 @@ p {
   color: var(--client-muted);
   text-align: center;
   cursor: pointer;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .client-subscription.is-editing .client-subscription-summary {
@@ -1481,7 +1493,7 @@ p {
   pointer-events: none;
 }
 
-.client-subscription-heading > span {
+.client-subscription-label {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.06em;