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 (#95)

OP OpenVibers committed 19 days ago · 121a965f28 · 5 files, +6 −6

Changes

ddiff --git a/public/css/app.css b/public/css/app.css
iindex d5dab64..213aefa 100644
---- a/public/css/app.css
++++ b/public/css/app.css
@@@ -39,7 +39,7 @@ form.inline { display: inline; }
  
  /* Listings: one card per listing — what kind, the title, where, the price on the right. */
  .txt { white-space: pre-line; }
--.listing-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
++.listing-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .listing-alert { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
  .listing { --k: 212; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); transition: border-color .15s, transform .15s; }
  .listing:hover { border-color: color-mix(in srgb, var(--accent, #3b82f6) 55%, var(--border, #1f2d47)); transform: translateY(-1px); }
@@@ -77,7 +77,7 @@ form.inline { display: inline; }
  
  /* Signed out on /post: what posting asks for. */
  .post-preview { margin-top: 18px; }
--.need-list { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
++.need-list { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
  .need-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); }
  .need-list b { color: var(--text-primary, #e6edf7); }
  .need-list span { font-size: .9rem; line-height: 1.45; color: var(--text-secondary, #96a7c2); }
ddiff --git a/public/css/board.css b/public/css/board.css
iindex a07d0b4..3dfcc27 100644
---- a/public/css/board.css
++++ b/public/css/board.css
@@@ -3,7 +3,7 @@
  .bd-tab { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); text-decoration: none; font-size: .9rem; }
  .bd-tab b { font-variant-numeric: tabular-nums; color: var(--accent-text, var(--accent, #3b82f6)); }
  a.bd-tab:hover { border-color: var(--accent, #3b82f6); }
--.bd-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
++.bd-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bd-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); scroll-margin-top: 80px; }
  .bd-item:target { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 1px var(--accent, #3b82f6); }
  .bd-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
ddiff --git a/public/css/everywhere.css b/public/css/everywhere.css
iindex 1275942..e44c133 100644
---- a/public/css/everywhere.css
++++ b/public/css/everywhere.css
@@@ -3,7 +3,7 @@
  .ew-kind { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); text-decoration: none; font-size: .9rem; }
  a.ew-kind:hover { border-color: var(--accent, #3b82f6); }
  .ew-kind.on { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 18%, var(--bg-secondary, #0f1729)); font-weight: 650; }
--.everywhere-sites { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
++.everywhere-sites { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
  .ew-site { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); transition: border-color .15s ease, transform .15s ease; }
  .ew-site:hover { border-color: var(--accent, #3b82f6); transform: translateY(-1px); }
  .ew-open { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-primary, #e6edf7); }
ddiff --git a/public/css/home.css b/public/css/home.css
iindex fadbfa0..5d18581 100644
---- a/public/css/home.css
++++ b/public/css/home.css
@@@ -9,7 +9,7 @@
  .home-stats b { display: block; font-size: 1.75rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary, #e6edf7); }
  .home-stats span { display: block; margin-top: 4px; font-size: .88rem; color: var(--text-secondary, #96a7c2); }
  
--.home-kinds, .home-cities { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
++.home-kinds, .home-cities { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .home-kinds { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
  .home-cities { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
  .home-kinds a, .home-cities a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); color: var(--text-primary, #e6edf7); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
ddiff --git a/public/css/homes.css b/public/css/homes.css
iindex 84a7a4d..9cac004 100644
---- a/public/css/homes.css
++++ b/public/css/homes.css
@@@ -4,7 +4,7 @@
  .homes-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); }
  .homes-card h3 { margin: 0 0 6px; font-size: 1rem; }
  .homes-card p { margin: 0; }
--.homes-states { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
++.homes-states { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
  .homes-states li.on a { font-weight: 700; }
  .homes-calc { max-width: 560px; }
  .homes-result { margin-top: 18px; max-width: 560px; }

diff --git a/public/css/app.css b/public/css/app.css

index d5dab64..213aefa 100644

--- a/public/css/app.css

+++ b/public/css/app.css

@@ -39,7 +39,7 @@ form.inline { display: inline; }

/* Listings: one card per listing — what kind, the title, where, the price on the right. */

.txt { white-space: pre-line; }

-.listing-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }

+.listing-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.listing-alert { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }

.listing { --k: 212; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); transition: border-color .15s, transform .15s; }

.listing:hover { border-color: color-mix(in srgb, var(--accent, #3b82f6) 55%, var(--border, #1f2d47)); transform: translateY(-1px); }

@@ -77,7 +77,7 @@ form.inline { display: inline; }

/* Signed out on /post: what posting asks for. */

.post-preview { margin-top: 18px; }

-.need-list { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

+.need-list { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

.need-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); }

.need-list b { color: var(--text-primary, #e6edf7); }

.need-list span { font-size: .9rem; line-height: 1.45; color: var(--text-secondary, #96a7c2); }

diff --git a/public/css/board.css b/public/css/board.css

index a07d0b4..3dfcc27 100644

--- a/public/css/board.css

+++ b/public/css/board.css

@@ -3,7 +3,7 @@

.bd-tab { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); text-decoration: none; font-size: .9rem; }

.bd-tab b { font-variant-numeric: tabular-nums; color: var(--accent-text, var(--accent, #3b82f6)); }

a.bd-tab:hover { border-color: var(--accent, #3b82f6); }

-.bd-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }

+.bd-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.bd-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); scroll-margin-top: 80px; }

.bd-item:target { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 1px var(--accent, #3b82f6); }

.bd-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }

diff --git a/public/css/everywhere.css b/public/css/everywhere.css

index 1275942..e44c133 100644

--- a/public/css/everywhere.css

+++ b/public/css/everywhere.css

@@ -3,7 +3,7 @@

.ew-kind { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); text-decoration: none; font-size: .9rem; }

a.ew-kind:hover { border-color: var(--accent, #3b82f6); }

.ew-kind.on { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 18%, var(--bg-secondary, #0f1729)); font-weight: 650; }

-.everywhere-sites { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

+.everywhere-sites { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }

.ew-site { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); transition: border-color .15s ease, transform .15s ease; }

.ew-site:hover { border-color: var(--accent, #3b82f6); transform: translateY(-1px); }

.ew-open { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-primary, #e6edf7); }

diff --git a/public/css/home.css b/public/css/home.css

index fadbfa0..5d18581 100644

--- a/public/css/home.css

+++ b/public/css/home.css

@@ -9,7 +9,7 @@

.home-stats b { display: block; font-size: 1.75rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary, #e6edf7); }

.home-stats span { display: block; margin-top: 4px; font-size: .88rem; color: var(--text-secondary, #96a7c2); }

-.home-kinds, .home-cities { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }

+.home-kinds, .home-cities { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.home-kinds { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

.home-cities { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

.home-kinds a, .home-cities a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); color: var(--text-primary, #e6edf7); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }

diff --git a/public/css/homes.css b/public/css/homes.css

index 84a7a4d..9cac004 100644

--- a/public/css/homes.css

+++ b/public/css/homes.css

@@ -4,7 +4,7 @@

.homes-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-card, #131c2e); }

.homes-card h3 { margin: 0 0 6px; font-size: 1rem; }

.homes-card p { margin: 0; }

-.homes-states { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

+.homes-states { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }

.homes-states li.on a { font-weight: 700; }

.homes-calc { max-width: 560px; }

.homes-result { margin-top: 18px; max-width: 560px; }