From 523e3e4eccd0be3d276e6e9e47032d2dea60106f Mon Sep 17 00:00:00 2001 From: cproudlock Date: Wed, 12 Aug 2026 15:47:36 -0400 Subject: [PATCH] geenforce: give the manifest entry rows room to breathe Every column in the entries table was sized to its button text with nothing spare, so with flex-wrap on the action cell the Edit and Delete buttons wrapped out of their 128px column and sat on top of the entry description. The order column was tighter still, and its Up/Down buttons carried almost no padding, which made them hard to hit as well as hard to read. Widened the order, type and action columns to fit their contents on one line, stopped the action cell wrapping, gave the buttons real padding, and added vertical cell padding with top alignment so a two-line entry no longer runs into the row beneath it. --- .../frontend/views/ManifestEditor.vue | 39 +++++++++++++++---- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/plugins/geenforce/frontend/views/ManifestEditor.vue b/plugins/geenforce/frontend/views/ManifestEditor.vue index 3a44225..57980e5 100644 --- a/plugins/geenforce/frontend/views/ManifestEditor.vue +++ b/plugins/geenforce/frontend/views/ManifestEditor.vue @@ -945,18 +945,41 @@ loadApplications() /* Modals: wider entry/preview, still responsive (global max-width + width:100%). */ .modal-entry { max-width: min(1100px, 96vw); } .toggle-all { font-weight: 400; font-size: 0.8rem; } -.entry-name { font-weight: 500; } -.entry-desc { font-size: 0.78rem; margin-top: 0.15rem; overflow-wrap: anywhere; } +.entry-name { font-weight: 500; line-height: 1.35; } +.entry-desc { + font-size: 0.78rem; + margin-top: 0.3rem; + line-height: 1.45; + overflow-wrap: anywhere; +} .scope-summary { margin: 0 0 0.75rem 0; font-size: 0.85rem; } /* Fixed layout so the Entry column flexes and the button columns never force a horizontal scroll. */ .scope-detail .entries-table { width: 100%; table-layout: fixed; } -.entries-table th.col-order, .entries-table td.order-cell { width: 58px; } -.entries-table th.col-type { width: 64px; } -.entries-table th.col-actions, .entries-table td.row-actions { width: 128px; } -.order-cell { display: flex; flex-direction: column; gap: 0.2rem; } -.order-cell .btn { padding: 0.1rem 0.3rem; } -.row-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; } +/* Every column was sized to the button text with nothing to spare, so the + action buttons wrapped out of their cell and landed on the description. The + widths below fit Edit + Delete on one line, and nowrap keeps them there. */ +.entries-table th.col-order, .entries-table td.order-cell { width: 84px; } +.entries-table th.col-type { width: 76px; } +.entries-table th.col-actions, .entries-table td.row-actions { width: 172px; } +.entries-table td { + /* A row is two lines of text plus stacked buttons; without vertical padding + and top alignment the rows run into each other. */ + padding: 0.6rem 0.6rem; + vertical-align: top; +} +.order-cell { display: flex; flex-direction: column; gap: 0.3rem; } +.order-cell .btn { + padding: 0.25rem 0.5rem; + width: 100%; +} +.row-actions { + display: flex; + gap: 0.4rem; + flex-wrap: nowrap; + white-space: nowrap; +} +.row-actions .btn { padding: 0.25rem 0.6rem; } .help-panel { margin: 0 0 1rem 0; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.75rem; background: var(--bg-card); } .help-panel summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }