burrito.space / peek
experiments in a post-browser web
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(tags): overlay vim status bar on editor instead of reserving space

The vim status line in the tags embedded editor was always reserving
vertical space at the bottom, even when hidden. This made the editor
shorter than it needed to be.

Changed the status line to use position: absolute to overlay the bottom
of the editor. When vim mode is off, the status line is hidden and the
editor uses 100% of available height. When vim mode is on, the status
bar appears overlaid at the bottom of the editor area.

Removed the has-vim-status class toggling since it's no longer needed
for corner radius adjustments with the overlay approach.

burrito.space 3a072f24 7769f1e1

+10 -19
+7 -11
extensions/tags/home.css
··· 488 488 display: flex; 489 489 flex-direction: column; 490 490 flex: 1; 491 + position: relative; 491 492 } 492 493 493 494 .detail-editor-container .cm-editor { ··· 501 502 flex: 1; 502 503 } 503 504 504 - /* Vim status line below embedded editor */ 505 + /* Vim status line overlays the bottom of the editor */ 505 506 .detail-editor-status-line { 507 + position: absolute; 508 + bottom: 0; 509 + left: 0; 510 + right: 0; 506 511 border-radius: 0 0 8px 8px; 507 512 overflow: hidden; 508 - flex-shrink: 0; 513 + z-index: 5; 509 514 } 510 515 511 516 .detail-editor-status-line .vim-status-line { 512 517 border-radius: 0 0 8px 8px; 513 - } 514 - 515 - /* When vim status line is active, flatten bottom corners of the editor */ 516 - .detail-editor-container.has-vim-status { 517 - border-radius: 8px 8px 0 0; 518 - } 519 - 520 - .detail-editor-container.has-vim-status .cm-editor { 521 - border-radius: 8px 8px 0 0; 522 518 } 523 519 524 520 /* Detail sections (tags) */
+3 -8
extensions/tags/home.js
··· 397 397 CodeMirror.setVimMode(embeddedEditor, editorVimMode); 398 398 // Show/hide status line based on vim mode 399 399 if (embeddedStatusLine) { 400 - const editorContainer = document.querySelector('.detail-editor-container'); 401 400 if (editorVimMode) { 402 401 embeddedStatusLine.show(); 403 402 embeddedStatusLine.updateMode('normal'); 404 - editorContainer?.classList.add('has-vim-status'); 405 403 } else { 406 404 embeddedStatusLine.hide(); 407 - editorContainer?.classList.remove('has-vim-status'); 408 405 } 409 406 } 410 407 debug && console.log('[tags] Updated embedded editor vimMode:', editorVimMode); ··· 1046 1043 // Load vim mode preference from editor extension before creating editor 1047 1044 await loadEditorVimPreference(); 1048 1045 1049 - // Create status line container below the editor 1046 + // Create status line container inside the editor container (overlays bottom) 1050 1047 const statusLineContainer = document.createElement('div'); 1051 1048 statusLineContainer.className = 'detail-editor-status-line'; 1052 - container.after(statusLineContainer); 1049 + container.appendChild(statusLineContainer); 1053 1050 1054 1051 // Create status line (vim status bar) 1055 1052 embeddedStatusLine = new StatusLine({ container: statusLineContainer }); 1056 - if (editorVimMode) { 1057 - container.classList.add('has-vim-status'); 1058 - } else { 1053 + if (!editorVimMode) { 1059 1054 embeddedStatusLine.hide(); 1060 1055 } 1061 1056