openvibers/openvibe.live Commits

Phones: 12 px stat labels and chat times on the home and in chat; 44 px targets for the home's pills (#612)

OP OpenVibers committed 7 days ago · c7021717a7 · 3 files, +20 −11

* Phones: the home's stat labels and the chat timestamps read at 12 px; the home's pills and quotes take a 44 px target

* Phone stat tiles: icon beside the number, the label across the tile, so 12 px labels fit

Beside a 24 px icon column a label had 70 px: WATCHING, MESSAGES and STREAMERS were cut at 12 px. The icon now sits
on the number's row and the label and its change pill take the tile's whole width (12 px each). Measured on
production with this file: all six labels fit at 390 px, dark and light.

Changes

ddiff --git a/public/css/features/featured.css b/public/css/features/featured.css
iindex f17e9f1d..7d4528f6 100644
---- a/public/css/features/featured.css
++++ b/public/css/features/featured.css
@@@ -92,3 +92,7 @@
      .hf, .hf-live i { animation: none; }
      .hf-media video, .hf-media canvas, .hf-media img.hf-frame, .hf-now { transition: none; }
  }
++
++/* Touch pointers: the unmute pill answers a finger at 44 px (2026-11-05 phone sweep: 35.6 px tall). It sits on the
++   video overlay, so it takes the height itself rather than a hit area over the frame's own link. */
++@media (pointer: coarse) { .hf-sound { min-height: 44px; } }
ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex f2da9417..481d9fbd 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -1124,16 +1124,18 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
      .hero-stat-strip .hero-stat-delta { grid-column: 3; grid-row: 1; justify-self: end; }
      .hero-stat-strip .hero-stat-delta em { display: inline; }
  }
--/* Phones: three tight columns, number over label, short pill. */
++/* Phones: three tight columns. The icon sits beside the number and the label takes the tile's whole width, so a
++   12 px label fits (2026-11-06, Opus: beside a 24 px icon column the label had 70 px and "WATCHING", "MESSAGES" and
++   "STREAMERS" were cut at 12 px; at 8 px they were too small to read). The change pill is the third row, 12 px. */
  @media (max-width: 699px) {
      .hero-stats { min-height: 256px; margin-top: 14px; }
      .hero-stat-strip { gap: 6px; }
--    .hero-stat-strip .hero-stat { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; padding: 7px 8px; column-gap: 6px; row-gap: 2px; border-radius: 10px; }
--    .hero-stat-strip .hero-stat > i { grid-row: 1 / 3; width: 24px; height: 24px; font-size: 0.66rem; border-radius: 7px; }
--    .hero-stat-strip .hero-stat-meta { grid-row: 1; flex-direction: column; gap: 1px; }
--    .hero-stat-strip .hero-stat-num { font-size: clamp(0.9rem, 4.2vw, 1.05rem); }
--    .hero-stat-strip .hero-stat-label { font-size: 0.5rem; }
--    .hero-stat-strip .hero-stat-delta { grid-column: 2; grid-row: 2; justify-self: start; font-size: 0.5rem; padding: 1px 5px; }
++    .hero-stat-strip .hero-stat { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; padding: 7px 8px; column-gap: 6px; row-gap: 2px; border-radius: 10px; }
++    .hero-stat-strip .hero-stat > i { grid-row: 1; grid-column: 1; width: 20px; height: 20px; font-size: 0.62rem; border-radius: 6px; }
++    .hero-stat-strip .hero-stat-meta { display: contents; }
++    .hero-stat-strip .hero-stat-num { grid-row: 1; grid-column: 2; font-size: clamp(0.9rem, 4.2vw, 1.05rem); }
++    .hero-stat-strip .hero-stat-label { grid-row: 2; grid-column: 1 / -1; font-size: 0.75rem; }
++    .hero-stat-strip .hero-stat-delta { grid-row: 3; grid-column: 1 / -1; justify-self: start; font-size: 0.75rem; padding: 1px 6px; }
      .hero-stat-strip .hero-stat-delta em { display: none; }
  }
  @media (max-width: 359px) {
@@@ -1289,6 +1291,9 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
     invisible hit area (::after) where growing it would move the layout. Nothing changes on a mouse. */
  @media (pointer: coarse) {
      #page-home .digest-chip, #page-home .star-act, #page-home .hero-stat-more, #page-home .home-about-toggle { min-height: 44px; }
++    /* A pill or a one-line quote that cannot grow a hit area sideways without covering its neighbour: it takes the
++       height itself (2026-11-05 phone sweep: 33, 19 and 36 px tall). */
++    #page-home .hero-latest, #page-home .digest-hot-line { min-height: 44px; display: flex; align-items: center; }
      #page-home .star-act.star-expand { min-width: 44px; }
      #page-home .streamer-group-identity, #page-home .hf-who { min-height: 44px; display: flex; align-items: center; }
      #page-home .section-action, #page-home .digest-recap, #page-home .hf-hide, #page-home .hero-philosophy-btn, #page-home .hero-philosophy-link, #page-home .star-name a, #page-home .hero-golive-note a { position: relative; }
@@@ -1296,11 +1301,11 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
         under the old hit area (11-03 re-audit: "View all" measured 28 to 32px). The header sits above the rail, and the
         link's hit area grows up into the header's own room, never down into the cards: 44px. */
      #page-home .section-header { position: relative; z-index: 1; }
--    #page-home .section-action::after { content: ''; position: absolute; inset: -16px -4px 0; }
--    #page-home .digest-recap::after { content: ''; position: absolute; inset: -7px; }
++    #page-home .section-action::after { content: ''; position: absolute; inset: -17px -4px 0; }
++    #page-home .digest-recap::after { content: ''; position: absolute; inset: -8px; }
      #page-home .hf-hide::after { content: ''; position: absolute; inset: -11px; }
      /* Text links in a row: taller only, so neighbours never take each other's taps. */
--    #page-home .hero-philosophy-btn::after, #page-home .hero-philosophy-link::after, #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
++    #page-home .hero-philosophy-btn::after, #page-home .hero-philosophy-link::after, #page-home .star-name a::after, #page-home .hero-golive-note a::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
  }
  
  /* New here? (2026-10-30, the short-pages rule): on a phone the explainer at the foot of the home is a row of tabs and
ddiff --git a/public/css/style.css b/public/css/style.css
iindex 5083984b..39dffeed 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -4853,7 +4853,7 @@ button.uai-tl-more { background: none; border: none; cursor: pointer; padding: 0
  }
  .chat-stream-hop:hover { filter: brightness(1.1); }
  .chat-time-inline {
--    font-size: 0.7rem; color: var(--text-muted); margin-right: 4px;
++    font-size: 0.75rem; color: var(--text-muted); margin-right: 4px;
  }
  
  .btn-follow.following { background: var(--text-muted); }