The home fits a phone: hero, chips and rails bleed to the 12 px gutter (#8)

OP OpenVibers committed 12 days ago · 76785f80de · 1 file, +2 −0

Shared's room hero, chips and rails bleed 16 px past the page gutter on a phone, but Shoes'
gutter is 12 px there, so the home was 4 px wider than the screen (11-01 phone sweep). Under
640 px they now bleed 12 px. Checked against production at 320, 390 and 600: overflow 0.

Changes

ddiff --git a/public/css/shoes.css b/public/css/shoes.css
iindex 53f1d91..5bc6c3a 100644
---- a/public/css/shoes.css
++++ b/public/css/shoes.css
@@@ -84,6 +84,8 @@
  .crumbs a { color: inherit; }
  @media (max-width: 900px) { .sh-search { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .sh-search { grid-template-columns: 1fr; } .sh-wrap { width: min(100% - 24px, 1180px); } }
++/* Shared's room hero, chips and rails bleed 16 px past a 16 px gutter; this site's phone gutter is 12 px (11-01 phone sweep: +4 px) */
++@media (max-width: 640px) { .sh-wrap .ovk-rail { --ovk-rail-bleed: 12px; } .sh-wrap .sc-room-hero, .sh-wrap .sc-room-chips { margin-inline: -12px; padding-inline: 12px; } }
  
  /* The room's motif: one stroke draws the shoe, then three stores' tags slide in and the lowest lights up. Motion
     follows the network's tokens (Calm stills it); reduced motion shows the finished picture. */