openvibers/openvibe.space 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 (#86)

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

Changes

ddiff --git a/public/css/hosting.css b/public/css/hosting.css
iindex 1f0aa09..485b9a6 100644
---- a/public/css/hosting.css
++++ b/public/css/hosting.css
@@@ -157,10 +157,10 @@
.hd-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hd-dim); }
.hd-details summary:hover { color: var(--hd-text); }
.hd-details[open] summary { margin-bottom: 8px; }
--.hd-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
++.hd-history { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 14px; }
.hd-history li { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-history time { color: var(--hd-dim); font-variant-numeric: tabular-nums; }
--.hd-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
++.hd-log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.hd-log__line { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; }
.hd-log__line > span:last-child { overflow-wrap: anywhere; }
.hd-log__line--error { background: color-mix(in srgb, var(--hd-bad) 9%, transparent); }
ddiff --git a/public/css/spaces.css b/public/css/spaces.css
iindex 9140836..935c27a 100644
---- a/public/css/spaces.css
++++ b/public/css/spaces.css
@@@ -73,7 +73,7 @@
/* A space's page */
.sp-frame { margin: 20px 0 8px; border: 1px solid var(--border, #2c3d5c); border-radius: 16px; overflow: hidden; background: #fff; }
.sp-frame iframe { display: block; width: 100%; height: min(70vh, 640px); border: 0; }
--.sp-caps { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 8px; }
++.sp-caps { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sp-caps li { display: flex; gap: 10px; align-items: baseline; }
.sp-caps i { color: var(--accent, #60a5fa); width: 18px; text-align: center; }
@@@ -119,7 +119,7 @@ body[data-page="spaces"] .page:has(.sp-editor) { padding-bottom: 0; }
/* The preview's server function calls (OV.fn): each call's status and its console lines. */
.sp-ed-fnlog { border-top: 1px solid var(--border, #2c3d5c); font-size: 0.84rem; max-height: 34vh; overflow: auto; }
.sp-ed-fnlog summary { cursor: pointer; padding: 6px 10px; }
--.sp-ed-fnlog ol { list-style: none; margin: 0; padding: 0 10px 8px; display: grid; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
++.sp-ed-fnlog ol { list-style: none; margin: 0; padding: 0 10px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sp-ed-fnlog li { white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-ed-fnlog .is-call { color: var(--text-secondary, #9fb0c8); margin-top: 4px; }
.sp-ed-fnlog .is-warn { color: #fbbf24; } .sp-ed-fnlog .is-error { color: #f87171; }