openvibers/openvibe.host Commits

Phones: list grids size their columns with minmax(0, 1fr) (or a min(…, 100%) minimum), so one long line can never widen a page past the screen (#155)

OP OpenVibers committed 19 days ago · 2becfa7fa2 · 2 files, +4 −4

Changes

ddiff --git a/public/css/catalog.css b/public/css/catalog.css
iindex 605239d..cdf8069 100644
---- a/public/css/catalog.css
++++ b/public/css/catalog.css
@@@ -67,10 +67,10 @@
  .hc-method strong { color: var(--hs-fg); }
  
  /* Providers and promotions. */
--.hc-providers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; }
++.hc-providers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: .75rem; }
  .hc-providers li { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border: 1px solid var(--hs-line); border-radius: 12px; background: var(--hs-card); }
  .hc-providers li span { color: var(--hs-muted); font-size: 14px; }
--.hc-promos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
++.hc-promos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .75rem; }
  .hc-promo { padding: 1rem 1.1rem; border: 1px solid var(--hs-line); border-radius: 12px; background: var(--hs-card); }
  .hc-promo h3 { margin: .1rem 0 .4rem; font-size: 1.05rem; }
  .hc-promo p { margin: .35rem 0; }
@@@ -162,7 +162,7 @@
  .hd-check-row input { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; min-height: 2.75rem; font-size: 1.05rem; color: var(--hs-fg); background: var(--hs-bg); }
  .hd-check-row button { flex: none; min-height: 2.75rem; padding: 0 1.25rem; font-weight: 700; background: var(--accent-strong, #2563eb); color: var(--on-accent-strong, #fff); }
  .hd-check-note { margin: .45rem 0 0; font-size: 13px; color: var(--hs-muted); }
--.hd-registrars { list-style: none; margin: .5rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
++.hd-registrars { list-style: none; margin: .5rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); gap: .5rem; }
  .hd-registrars a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border: 1px solid var(--hs-line); border-radius: 10px; background: var(--hs-card); color: var(--hs-fg); text-decoration: none; overflow-wrap: anywhere; }
  .hd-registrars a:hover { border-color: var(--hs-accent); }
  .hd-registrars span { font-weight: 600; }
ddiff --git a/public/css/console.css b/public/css/console.css
iindex b97bb5b..4cebafd 100644
---- a/public/css/console.css
++++ b/public/css/console.css
@@@ -36,7 +36,7 @@
  .cs-card { padding: 18px; border: 1px solid var(--border, #2c3d5c); border-radius: 16px; background: var(--bg-secondary, #101828); margin-top: 14px; }
  .cs-grid .cs-card { margin-top: 0; }
  .cs-card h2 { margin: 0 0 12px; font-size: 1.1rem; }
--.cs-accts, .cs-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
++.cs-accts, .cs-log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs-acct { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border, #2c3d5c); border-radius: 12px; }
  .cs-acct form { margin: 0; }
  .cs-form { display: grid; gap: 12px; }