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)
Changes
@@@ -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); }@@@ -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; }
@@ -157,10 +157,10 @@
@@ -157,10 +157,10 @@
.hd-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hd-dim); }
.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 summary:hover { color: var(--hd-text); }
.hd-details[open] summary { margin-bottom: 8px; }
.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 li { display: flex; gap: 10px; flex-wrap: wrap; }
.hd-history time { color: var(--hd-dim); font-variant-numeric: tabular-nums; }
.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 { 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 > span:last-child { overflow-wrap: anywhere; }
.hd-log__line--error { background: color-mix(in srgb, var(--hd-bad) 9%, transparent); }
.hd-log__line--error { background: color-mix(in srgb, var(--hd-bad) 9%, transparent); }
@@ -73,7 +73,7 @@
@@ -73,7 +73,7 @@
/* A space's page */
/* 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 { 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-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 li { display: flex; gap: 10px; align-items: baseline; }
.sp-caps i { color: var(--accent, #60a5fa); width: 18px; text-align: center; }
.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; }
@@ -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. */
/* 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 { 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 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 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-call { color: var(--text-secondary, #9fb0c8); margin-top: 4px; }
.sp-ed-fnlog .is-warn { color: #fbbf24; } .sp-ed-fnlog .is-error { color: #f87171; }
.sp-ed-fnlog .is-warn { color: #fbbf24; } .sp-ed-fnlog .is-error { color: #f87171; }