| @@ -24,21 +24,23 @@ | ||
| 24 | 24 | } |
| 25 | 25 | |
| 26 | 26 | @media (max-width: 1400px) { |
| 27 | 27 | .metasync-layout { |
| 28 | - grid-template-columns: 200px 1fr 240px; | |
| 28 | + grid-template-columns: 200px 1fr; | |
| 29 | + grid-template-rows: auto auto; | |
| 29 | 30 | } |
| 30 | - .metasync-layout:not(:has(.metasync-layout-promo)) { | |
| 31 | - grid-template-columns: 200px 1fr; | |
| 31 | + .metasync-layout-nav { | |
| 32 | + grid-column: 1; | |
| 33 | + grid-row: 1 / -1; | |
| 32 | 34 | } |
| 33 | -} | |
| 34 | - | |
| 35 | -@media (max-width: 1280px) { | |
| 36 | - .metasync-layout { | |
| 37 | - grid-template-columns: 200px 1fr; | |
| 35 | + .metasync-layout-main { | |
| 36 | + grid-column: 2; | |
| 37 | + grid-row: 1; | |
| 38 | 38 | } |
| 39 | 39 | .metasync-layout-promo { |
| 40 | - display: none; | |
| 40 | + grid-column: 2; | |
| 41 | + grid-row: 2; | |
| 42 | + position: static; | |
| 41 | 43 | } |
| 42 | 44 | } |
| 43 | 45 | |
| 44 | 46 | @media (max-width: 900px) { |
| @@ -47,18 +49,24 @@ | ||
| 47 | 49 | } |
| 48 | 50 | .metasync-layout-nav { |
| 49 | 51 | display: none; |
| 50 | 52 | } |
| 53 | + .metasync-layout-promo { | |
| 54 | + position: static; | |
| 55 | + } | |
| 51 | 56 | } |
| 52 | 57 | |
| 53 | 58 | /* ── Left sidebar nav ────────────────────────────────────────────────── */ |
| 54 | 59 | |
| 55 | 60 | .metasync-layout-nav { |
| 61 | + position: -webkit-sticky; | |
| 56 | 62 | position: sticky; |
| 63 | + align-self: start; | |
| 57 | 64 | top: 52px; /* WP admin bar (32px) + breathing room */ |
| 58 | 65 | max-height: calc(100vh - 72px); |
| 59 | 66 | overflow-y: auto; |
| 60 | 67 | overflow-x: hidden; |
| 68 | + min-width: 0; /* prevent grid blowout */ | |
| 61 | 69 | background: var(--dashboard-card-bg); |
| 62 | 70 | border: 1px solid var(--dashboard-border); |
| 63 | 71 | border-radius: 12px; |
| 64 | 72 | padding: 8px; |
| @@ -187,11 +195,14 @@ | ||
| 187 | 195 | |
| 188 | 196 | /* ── Right promotional sidebar ──────────────────────────────────────── */ |
| 189 | 197 | |
| 190 | 198 | .metasync-layout-promo { |
| 199 | + position: -webkit-sticky; | |
| 191 | 200 | position: sticky; |
| 201 | + align-self: start; | |
| 192 | 202 | top: 52px; |
| 193 | 203 | display: flex; |
| 204 | + min-width: 0; /* allow sticky column to shrink within its grid cell */ | |
| 194 | 205 | flex-direction: column; |
| 195 | 206 | gap: 16px; |
| 196 | 207 | } |
| 197 | 208 | |
| @@ -473,8 +484,52 @@ | ||
| 473 | 484 | } |
| 474 | 485 | |
| 475 | 486 | .metasync-header-compact .metasync-status.connected .status-text { |
| 476 | 487 | color: var(--dashboard-success); |
| 488 | +} | |
| 489 | + | |
| 490 | +.metasync-header-compact .metasync-status.disconnected .status-text { | |
| 491 | + color: var(--dashboard-error); | |
| 492 | +} | |
| 493 | + | |
| 494 | +.metasync-header-compact .metasync-status.warning .status-dot { | |
| 495 | + background: var(--dashboard-warning, #ffb900); | |
| 496 | +} | |
| 497 | + | |
| 498 | +.metasync-header-compact .metasync-status.warning .status-text { | |
| 499 | + color: var(--dashboard-warning, #ffb900); | |
| 500 | +} | |
| 501 | + | |
| 502 | +/* ── Static header connection status (render_static_header) ─────────── */ | |
| 503 | +/* the static-header badge previously had no styling; mirror the | |
| 504 | + compact-header rules so connected / disconnected / warning render. */ | |
| 505 | + | |
| 506 | +.metasync-header .metasync-status { | |
| 507 | + display: flex; | |
| 508 | + align-items: center; | |
| 509 | + gap: 6px; | |
| 510 | + font-size: 12px; | |
| 511 | + color: var(--dashboard-text-secondary); | |
| 512 | +} | |
| 513 | + | |
| 514 | +.metasync-header .metasync-status .status-dot { | |
| 515 | + width: 7px; | |
| 516 | + height: 7px; | |
| 517 | + border-radius: 50%; | |
| 518 | + flex-shrink: 0; | |
| 519 | + background: var(--dashboard-error); | |
| 520 | +} | |
| 521 | + | |
| 522 | +.metasync-header .metasync-status.connected .status-dot { | |
| 523 | + background: var(--dashboard-success); | |
| 524 | +} | |
| 525 | + | |
| 526 | +.metasync-header .metasync-status.connected .status-text { | |
| 527 | + color: var(--dashboard-success); | |
| 528 | +} | |
| 529 | + | |
| 530 | +.metasync-header .metasync-status.disconnected .status-text { | |
| 531 | + color: var(--dashboard-error); | |
| 477 | 532 | } |
| 478 | 533 | |
| 479 | 534 | /* ── Theme toggle icon sizing ────────────────────────────────────────── */ |
| 480 | 535 | |
