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): remove editor focus ring and visually connect vim status bar

Remove the blue focus border on the embedded CodeMirror editor in the
tags detail pane — it looked odd since the vim status bar sat outside it.

Change the vim status bar from absolute positioning to normal flex flow
(order: 2) so it renders below the editor as a continuous container.
The editor's bottom corners flatten when vim mode is active, and the
status bar picks up matching border/background styling. When vim mode
is off, the status bar container is hidden and the editor retains its
full border-radius.

burrito.space 3100ec71 3a072f24

+33 -8
+22 -6
extensions/tags/home.css
··· 488 488 display: flex; 489 489 flex-direction: column; 490 490 flex: 1; 491 - position: relative; 492 491 } 493 492 494 493 .detail-editor-container .cm-editor { 494 + order: 1; 495 495 flex: 1; 496 496 min-height: 0; 497 497 border-radius: 8px; 498 498 } 499 499 500 + /* When vim status bar is active, flatten the editor's bottom corners 501 + so it connects seamlessly with the status bar below. */ 502 + .detail-editor-container.vim-active .cm-editor { 503 + border-radius: 8px 8px 0 0; 504 + border-bottom: none; 505 + } 506 + 507 + /* Remove focus ring/border highlight from embedded editor — the vim status 508 + bar sits outside the cm-editor boundary so a highlight looks disjointed. */ 509 + .detail-editor-container .cm-editor.cm-focused { 510 + border-color: var(--base02); 511 + } 512 + 500 513 .detail-editor-container .cm-scroller { 501 514 overflow: auto; 502 515 flex: 1; 503 516 } 504 517 505 - /* Vim status line overlays the bottom of the editor */ 518 + /* Vim status line sits below the editor as a continuous part of the container. 519 + Uses the same border/background treatment as the cm-editor so they look unified. 520 + order: 2 ensures it renders below the editor (which is inserted after it in the DOM). */ 506 521 .detail-editor-status-line { 507 - position: absolute; 508 - bottom: 0; 509 - left: 0; 510 - right: 0; 522 + order: 2; 523 + border: 1px solid var(--base02); 524 + border-top: none; 511 525 border-radius: 0 0 8px 8px; 512 526 overflow: hidden; 527 + background: var(--base00); 513 528 z-index: 5; 514 529 } 515 530 516 531 .detail-editor-status-line .vim-status-line { 517 532 border-radius: 0 0 8px 8px; 533 + border-top: 1px solid var(--base02); 518 534 } 519 535 520 536 /* Detail sections (tags) */
+11 -2
extensions/tags/home.js
··· 395 395 await loadEditorVimPreference(); 396 396 if (embeddedEditor) { 397 397 CodeMirror.setVimMode(embeddedEditor, editorVimMode); 398 - // Show/hide status line based on vim mode 398 + // Show/hide status line and update container class based on vim mode 399 + const editorContainer = document.querySelector('.detail-editor-container'); 400 + const statusLineEl = document.querySelector('.detail-editor-status-line'); 399 401 if (embeddedStatusLine) { 400 402 if (editorVimMode) { 401 403 embeddedStatusLine.show(); 402 404 embeddedStatusLine.updateMode('normal'); 405 + if (statusLineEl) statusLineEl.style.display = ''; 406 + if (editorContainer) editorContainer.classList.add('vim-active'); 403 407 } else { 404 408 embeddedStatusLine.hide(); 409 + if (statusLineEl) statusLineEl.style.display = 'none'; 410 + if (editorContainer) editorContainer.classList.remove('vim-active'); 405 411 } 406 412 } 407 413 debug && console.log('[tags] Updated embedded editor vimMode:', editorVimMode); ··· 1050 1056 1051 1057 // Create status line (vim status bar) 1052 1058 embeddedStatusLine = new StatusLine({ container: statusLineContainer }); 1053 - if (!editorVimMode) { 1059 + if (editorVimMode) { 1060 + container.classList.add('vim-active'); 1061 + } else { 1054 1062 embeddedStatusLine.hide(); 1063 + statusLineContainer.style.display = 'none'; 1055 1064 } 1056 1065 1057 1066 embeddedEditor = CodeMirror.createEditor({