From 6566eae2c72cea6d72491b58eba52ae0667f968d Mon Sep 17 00:00:00 2001 From: Stan Grams Date: Sat, 1 Aug 2026 11:19:31 +0200 Subject: [PATCH] fix(ui): keep workspace and rig context visible --- .../trx-frontend-http/assets/web/style.css | 61 ++++--------------- 1 file changed, 13 insertions(+), 48 deletions(-) diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index 09746afc..7ce96bb0 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -1404,36 +1404,20 @@ small { color: var(--text-muted); } padding: 0.9rem 0.2rem 0; } .header-rig-switch { - display: flex; + display: grid; + grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0.35rem; - position: relative; } .header-rig-summary { - position: absolute; - top: calc(100% + 0.3rem); - left: 0; - z-index: 20; - width: max-content; - max-width: min(28rem, calc(100vw - 2rem)); - padding: 0.25rem 0.45rem; - border: 1px solid color-mix(in srgb, var(--border-light) 75%, transparent); - border-radius: var(--radius-sm); - background: color-mix(in srgb, var(--card-bg) 96%, transparent); + display: block; + max-width: 20rem; color: var(--text-muted); - box-shadow: 0 7px 20px color-mix(in srgb, #000 24%, transparent); font-size: var(--fs-xs); line-height: 1.35; - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast); -} -.header-rig-switch:hover .header-rig-summary, -.header-rig-switch:focus-within .header-rig-summary, -.header-rig-switch.is-switching .header-rig-summary { - opacity: 1; - visibility: visible; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .header-rig-switch select { min-width: 8rem; @@ -2964,9 +2948,10 @@ button.is-active { #ptt-btn.is-active { background: var(--accent-red) !important; border-color: var(--accent-red) !important; color: white !important; } .is-busy { cursor: progress !important; opacity: 0.68; } .operator-layout-picker { - display: inline-flex; + display: inline-grid; + grid-template-columns: auto auto; align-items: center; - height: 2rem; + min-height: 2rem; padding-left: 0.6rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); @@ -2977,7 +2962,6 @@ button.is-active { letter-spacing: 0.04em; text-transform: uppercase; overflow: visible; - position: relative; } .operator-layout-picker::before { content: "Layout"; } .operator-layout-picker select { @@ -2996,34 +2980,15 @@ button.is-active { .operator-layout-picker:focus-within { border-color: var(--accent-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 20%, transparent); } .operator-layout-picker select:focus-visible { outline: 0; } .operator-layout-description { - position: absolute; - top: calc(100% + 0.35rem); - left: 0; - z-index: 25; - width: max-content; - max-width: min(22rem, calc(100vw - 2rem)); - padding: 0.35rem 0.55rem; - border: 1px solid var(--border-light); - border-radius: var(--radius-sm); - background: var(--card-bg); + grid-column: 1 / -1; + max-width: 22rem; + padding: 0 0.55rem 0.35rem 0; color: var(--text-muted); - box-shadow: 0 8px 24px color-mix(in srgb, #000 28%, transparent); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; - opacity: 0; - transform: translateY(-0.2rem); - visibility: hidden; - pointer-events: none; - transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); -} -.operator-layout-picker:hover .operator-layout-description, -.operator-layout-picker:focus-within .operator-layout-description { - opacity: 1; - transform: none; - visibility: visible; } .advanced-radio-controls { margin-top: var(--space-3);