Games: the Vibe Heroes art fills its card on the home page instead of sitting in a banded square (#71)

OP OpenVibers committed 29 days ago · 23a0c85838 · 1 file, +8 −1

**The Vibe Heroes art fills its panel on the Games home.**

**Found:** while reviewing the network's home pages. The card art is painted on its own background and was shown with `object-fit: contain`, so at desktop width it sat as a square with dark bands on both sides of the panel.

**Change (`apps/client/index.html`):**
- The image gets `shot-cover`, which sets `object-fit: cover`.
- In the single-column phone layout, its panel is 300 px tall (up from 200), so the fanned cards keep their faces.
- The other cards' art (SVG scenes drawn to fit) is unchanged.

**Checked** by injecting exactly this CSS into the live page at 1280 and 390 px: the art fills the panel edge to edge at both widths, and all five cards stay recognisable.

Changes

ddiff --git a/apps/client/index.html b/apps/client/index.html
iindex ab5fe13..80fe8e7 100644
---- a/apps/client/index.html
++++ b/apps/client/index.html
@@@ -207,6 +207,10 @@
        .shot .shot-img {
          object-fit: contain;
        }
++      /* Art painted on its own background fills the panel (contain left it a square with bands either side). */
++      .shot .shot-img.shot-cover {
++        object-fit: cover;
++      }
        .game-body {
          padding: 26px;
          display: flex;
@@@ -286,6 +290,9 @@
          .game-card.wide {
            grid-template-columns: 1fr;
          }
++        .game-card.wide .shot:has(.shot-cover) {
++          min-height: 300px;
++        }
        }
        .cta-row {
          display: flex;
@@@ -674,7 +681,7 @@
            aria-label="Vibe Heroes: five hero cards fanned out, a legendary in the middle"
          >
            <img
--            class="shot-art shot-img"
++            class="shot-art shot-img shot-cover"
              src="/casual/vibe-heroes/heroes.webp"
              width="400"
              height="394"