ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

geenforce: give the manifest entry rows room to breathe

Browse Source 
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.
This commit is contained in:
cproudlock
2026-08-12 15:47:36 -04:00
parent 9e34fafce5
commit 523e3e4ecc
1 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
plugins/geenforce/frontend/views/ManifestEditor.vue
View File

@@ -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; }