Fix cell max-width, header z-order, and sort command palette
- Cap cell and header max-width to 150px (was 200px for best-fit) - Bump header z-index to 10 (row-number corner to 11) so sticky headers stay above data cells when scrolling horizontally - Remove position:relative and z-index from cursor-cell so it no longer creates a stacking context that overlaps sticky headers - Sort command palette entries alphabetically (case-insensitive) Co-authored-by: Shelley <shelley@exe.dev>
This commit is contained in:
parent
af1629c58d
commit
9d56f5e8e2
|
|
@ -30,7 +30,7 @@ const tableContainer = $('#table-container');
|
||||||
// Default column width
|
// Default column width
|
||||||
const DEFAULT_COL_WIDTH = 120;
|
const DEFAULT_COL_WIDTH = 120;
|
||||||
const MIN_COL_WIDTH = 40;
|
const MIN_COL_WIDTH = 40;
|
||||||
const MAX_BEST_FIT = 200;
|
const MAX_BEST_FIT = 150;
|
||||||
|
|
||||||
// ===== Helpers =====
|
// ===== Helpers =====
|
||||||
function colLabel(i) {
|
function colLabel(i) {
|
||||||
|
|
@ -630,7 +630,9 @@ let activeCommandIndex = 0;
|
||||||
function renderCommandList(filter) {
|
function renderCommandList(filter) {
|
||||||
commandList.innerHTML = '';
|
commandList.innerHTML = '';
|
||||||
const lower = filter.toLowerCase();
|
const lower = filter.toLowerCase();
|
||||||
const filtered = commands.filter(c => c.Name.toLowerCase().includes(lower));
|
const filtered = commands
|
||||||
|
.filter(c => c.Name.toLowerCase().includes(lower))
|
||||||
|
.sort((a, b) => a.Name.toLowerCase().localeCompare(b.Name.toLowerCase()));
|
||||||
|
|
||||||
activeCommandIndex = 0;
|
activeCommandIndex = 0;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@ html, body {
|
||||||
#table-head th {
|
#table-head th {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 2;
|
z-index: 10;
|
||||||
background: var(--header-bg);
|
background: var(--header-bg);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
|
|
@ -102,6 +102,7 @@ html, body {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
max-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-head th.row-number-header {
|
#table-head th.row-number-header {
|
||||||
|
|
@ -110,7 +111,7 @@ html, body {
|
||||||
max-width: var(--row-num-width);
|
max-width: var(--row-num-width);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 3;
|
z-index: 11;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: var(--header-bg);
|
background: var(--header-bg);
|
||||||
}
|
}
|
||||||
|
|
@ -166,6 +167,7 @@ th .header-edit-input {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
cursor: cell;
|
cursor: cell;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
max-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-body td.row-number {
|
#table-body td.row-number {
|
||||||
|
|
@ -191,8 +193,6 @@ td.selected {
|
||||||
td.cursor-cell {
|
td.cursor-cell {
|
||||||
outline: 2px solid var(--selected-border);
|
outline: 2px solid var(--selected-border);
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Status bar */
|
/* Status bar */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue