openvibers/openvibe.live Commits

Channel header on a phone: your own name no longer runs under Share (#707)

OP OpenVibers committed 4 days ago · a373552074 · 3 files, +20 −8

The offline header's name block had a 0 flex basis, so whenever the actions fit beside the picture it shrank to
nothing: on your own channel (Share and Ask your agent, no Follow) at 390 and 430 px the name, handle and
OpenVibe profile pill ran under the buttons (found by the signed-in Live sweep, 11-09). It now keeps 220 px and
the actions wrap to their own row, from the left. At 360 px Follow and the language chip ran off the screen:
the actions wrap, Follow fills its row at a 44 px height, and the chip wraps like a sentence. Critical selectors
regenerated (scripts/perf/critical-css.js).

Changes

ddiff --git a/public/css/critical-selectors.json b/public/css/critical-selectors.json
iindex 5c808432..84df0ac0 100644
---- a/public/css/critical-selectors.json
++++ b/public/css/critical-selectors.json
@@@ -57,6 +57,8 @@
    ".card-ai-overview",
    ".card-ai-static",
    ".card-ai-toggle",
++  ".ch-analytics-period-btns .btn",
++  ".ch-analytics-period-btns .btn.active",
    ".ch-goal-widget",
    ".ch-goal-widget:not(.cgw-multi)",
    ".ch-offline-area",
@@@ -70,12 +72,13 @@
    ".ch-offline-screen",
    ".ch-panel-bar > .ch-vods-filter-bar",
    ".ch-panel-bar > .clips-taken-filters",
++  ".ch-panel-hint b",
++  ".ch-panel-hint i",
    ".ch-tab",
    ".ch-tab i",
    ".ch-tab-badge",
    ".ch-tab-badge[hidden]",
    ".ch-tab-panel",
--  ".ch-tab-panel.active",
    ".ch-tab.active",
    ".ch-tab.active::after",
    ".ch-tabs",
@@@ -85,6 +88,8 @@
    ".chat-avatar-wrap",
    ".chat-badge",
    ".chat-badge i",
++  ".chat-badge-admin",
++  ".chat-badge-streamer",
    ".chat-badge[data-tip]::after",
    ".chat-badge[data-tip]::before",
    ".chat-crossfeed-badge",
@@@ -277,12 +282,6 @@
    ".navbar",
    ".navbar > *",
    ".navbar:not(.ovnav-top)",
--  ".network-card-info",
--  ".network-card-info span",
--  ".network-card-info strong",
--  ".network-hub-header > i",
--  ".network-hub-header h3",
--  ".network-hub-header p",
    ".off-cyc-chip.active",
    ".off-cyc-title i",
    ".off-top-dur",
@@@ -332,6 +331,7 @@
    ".paste-modal-overlay",
    ".paste-modal-upload",
    ".pastes-grid",
++  ".pastes-page-info",
    ".pastes-pagination",
    ".pc-tools-row > button",
    ".pc-tools-row > button.btn-openvibe-bucks-mini",
ddiff --git a/public/css/features/channel.css b/public/css/features/channel.css
iindex 8f082e12..6fe873cd 100644
---- a/public/css/features/channel.css
++++ b/public/css/features/channel.css
@@@ -676,6 +676,11 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
      .live-tabs-summary { font-size: 0.7rem; padding: 0 8px; }
      .ch-cumulative-viewers { gap: 6px; }
      .ch-offline-header { flex-wrap: wrap; gap: 12px; padding: 16px; }
++    /* On a phone the actions take their own row under the name, from the left, and a button that does not fit goes
++       to the next line (Follow ran off a 360 px screen beside Share and Ask your agent). */
++    .ch-offline-header .ch-actions { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }
++    /* Follow, a visitor's main action, fills what is left of its row (all of it when it wraps). */
++    .ch-offline-header .ch-actions > .btn-follow { flex: 1 0 auto; justify-content: center; min-height: 44px; }
      .ch-avatar-lg { width: 56px; height: 56px; font-size: 1.4rem; }
      .viewer-badge, .uptime-badge { font-size: 0.68rem; padding: 2px 5px; }
      #video-element, #video-canvas { width: 100%; }
@@@ -1319,7 +1324,11 @@ button.viewer-badge:focus-visible { outline: 2px solid #93c5fd; outline-offset:
         was unreadable on Daylight's pink). */
      color: color-mix(in srgb, #f59e0b 35%, var(--text-primary)); background: linear-gradient(135deg, rgba(190,24,93,0.35), rgba(139,92,246,0.3));
      border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); white-space: nowrap; cursor: help;
++    /* Never wider than its row: "Japanese stream · chat auto-translated" ran off a 360 px screen; it wraps instead. */
++    max-width: 100%;
  }
++/* On a narrow phone it flows like a sentence inside a rounded box (as flex, its two halves wrapped side by side). */
++@media (max-width: 480px) { .ch-lang-chip { display: inline-block; white-space: normal; border-radius: 12px; line-height: 1.5; } }
  .ch-captions {
      margin: 10px 0 0; border-radius: 14px; overflow: hidden;
      background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--bg-card)), var(--bg-card));
ddiff --git a/public/css/style.css b/public/css/style.css
iindex 47bd02da..da47f51f 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -4691,7 +4691,10 @@ body :is(.modal-overlay, .bc-ws-confirm-overlay, .bc-modal, .bc-perm-overlay, .b
  /* Offline area reuses .stream-layout (main + chat sidebar). The offline screen fills
     the main column with small gutters; the header sits above it, mirroring the live page. */
  .ch-offline-area .ch-offline-screen { margin: 14px; width: auto; flex-shrink: 0; }
--.ch-offline-header-info { flex: 1; min-width: 0; }
++/* The name block keeps a real width: with a 0 basis it shrank to nothing whenever the actions fit beside the picture
++   (your own channel on a phone: Share and Ask your agent, no Follow), and its text ran under the buttons. Now the
++   actions wrap to their own row instead. */
++.ch-offline-header-info { flex: 1 1 220px; min-width: 0; }
  .ch-offline-header-info h1 { margin: 0 0 2px; font-size: 1.4rem; }
  .ch-offline-banner {
      text-align: center; padding: 60px 20px;