fix: Create page uses the viewport; state column stops word-wrapping

Dami committed Aug 1646f297b

Wide layout (1560px) with the scripts table taking the 3fr column; STATUS
and EXPIRY collapse into one compact cell that only says something
noteworthy — 'rejected' in red, or the expiry date for unpinned scripts.
Starred rows say nothing: the star IS pinned. Table cells never break
mid-word.

commit: 46f297b5bca03c33388a963defbf833d87e35561
parent: b3474cd58e3fe314743c482183810cf839a40cdc
author: Dami <dami.etoile@gmail.com>

3 files changed, +15 -5wrap lines

M	web/src/main.ts	1	+
M	web/src/pages/create.ts	14	+++++++++-----
M	web/src/style.css	5	+++++

M web/src/main.ts +1 -0

@@ -124,6 +124,7 @@ function render() {
124124   } else if (path === '/connect') {125125     renderConnect(main, ctx);126126   } else if (path === '/create') {127+    main.classList.add('wide');127128     renderCreate(main, ctx);128129   } else if (browseMatch) {129130     renderBrowse(main, ctx, browseMatch[1]);

M web/src/pages/create.ts +9 -5

@@ -18,7 +18,7 @@ export function renderCreate(main: HTMLElement, ctx: AppCtx): void {
1818   const uploadCard = h('div', { class: 'card' });1919   const trashCard = h('div', { class: 'card' });2020   main.append(21-    h('div', { class: 'home-grid' },21+    h('div', { class: 'home-grid create-grid' },2222       h('div', { class: 'home-col' }, scriptsCard),2323       h('div', { class: 'home-col' }, uploadCard, trashCard),2424     ),@@ -141,12 +141,16 @@ function paintScripts(
141141       h('td', null, starButton(s, () => void refresh())),142142       nameCell,143143       h('td', { class: 'mono' }, `v${s.version}`),144+      // One compact cell, noteworthy states only: the star already means145+      // pinned, and 'validated' is the unremarkable default.144146       h(145147         'td',146-        null,147-        s.status === 'validated' ? h('span', { class: 'ok-text' }, 'validated') : h('span', { class: 'error-text' }, 'rejected'),148+        { class: 'nowrap' },149+        s.status === 'rejected' ? h('span', { class: 'error-text' }, 'rejected') : null,150+        s.status !== 'rejected' && !s.starred151+          ? h('span', { class: 'muted' }, `expires ${fmtDate(s.expiresAt)}`)152+          : null,148153       ),149-      h('td', { class: 'muted' }, s.starred ? 'pinned' : `expires ${fmtDate(s.expiresAt)}`),150154       h(151155         'td',152156         { class: 'actions-cell' },@@ -181,7 +185,7 @@ function paintScripts(
181185       h(182186         'thead',183187         null,184-        h('tr', null, h('th'), h('th', null, 'Script'), h('th', null, 'Ver'), h('th', null, 'Status'), h('th', null, 'Expiry'), h('th')),188+        h('tr', null, h('th'), h('th', null, 'Script'), h('th', null, 'Ver'), h('th'), h('th')),185189       ),186190       h('tbody', null, rows),187191     ),

M web/src/style.css +5 -0

@@ -883,3 +883,8 @@ canvas.chart { display: block; width: 100%; }
883883   color: var(--text-dim, #888);884884   text-transform: uppercase;885885 }886+887+/* Create: the scripts table earns the wider column; cells never wrap mid-word */888+.create-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }889+table.list td.nowrap, table.list td.mono { white-space: nowrap; }890+table.list td { overflow-wrap: normal; word-break: keep-all; }