mbeditor 0.12.9 → 0.13.1

data/app/assets/stylesheets/mbeditor/editor.css

@@ -8,10 +8,86 @@
   box-shadow: none !important;
 }
 
-/* Prevent Pico CSS from applying its primary-colour focus/active state to IDE buttons.
-   Pico sets --pico-background-color and --pico-border-color to its primary blue on
-   button:focus, which bleeds through as a blue tint on any button not explicitly
-   overriding its background with a literal value. */
+/* ── Pico containment ──────────────────────────────────────────────────────
+ *
+ * The host app's stylesheet loads alongside this one, and when it is Pico (the
+ * dummy app's is) it styles bare element and ARIA selectors — `button`,
+ * `[role=button]`, `[role=group]`, `[disabled]` — every one of which matches
+ * this UI's markup. Two shipped bugs came from exactly that: `[role=button]`
+ * painted the tab close buttons as filled primary squares, and
+ * `[disabled] { pointer-events: none }` stopped disabled toolbar buttons from
+ * receiving hover at all, so their tooltips never appeared.
+ *
+ * The technique is to zero Pico's own custom properties: every Pico button
+ * declaration reads from them, so neutralising the variables disarms the whole
+ * ruleset at once, which beats fighting each declaration on specificity. Only
+ * the few properties Pico hard-codes need explicit overrides.
+ *
+ * Two things make this safe to widen, and both depend on where the block sits:
+ *
+ *  - The root is wrapped in :where(), so these rules carry exactly Pico's own
+ *    specificity, no more. They win over Pico only because the whole of
+ *    editor.css is bundled after the whole of Pico.
+ *  - The block lives at the TOP of this file, so every component rule below —
+ *    .statusbar-btn, .project-actions, .tab-close — is later at equal or
+ *    greater specificity and still wins.
+ *
+ * That combination is what makes this a floor rather than a new source of
+ * truth: it can only remove Pico's opinions, never override this file's own.
+ * Moving it further down would silently invert that.
+ *
+ * Deliberately NOT reset: Pico's `*` box-sizing and background-repeat rules
+ * (this UI assumes border-box, which is what Pico sets), and `position` on
+ * [role=group] (Pico's `relative` is the safer value for any absolutely
+ * positioned descendant, and nothing here needs it to be static).
+ *
+ * Monaco is listed separately because its widgets portal out of the shell to
+ * document.body (.context-view, .action-widget), so a #mbeditor-root scope
+ * would miss them. Monaco renders its own actions as <a role="button">.
+ */
+:where(#mbeditor-root) :is(button, [type="button"], [type="submit"], [type="reset"], [role="button"], [role="group"]),
+.monaco-hover [role=button],
+.action-widget [role=button],
+.context-view [role=button],
+.monaco-editor [role=button],
+.monaco-diff-editor [role=button] {
+  --pico-background-color: transparent;
+  --pico-border-color: transparent;
+  --pico-color: inherit;
+  --pico-box-shadow: none;
+  --pico-form-element-spacing-vertical: 0;
+  --pico-form-element-spacing-horizontal: 0;
+}
+
+/* Properties Pico hard-codes, which the variable reset above cannot reach. */
+
+/* Pico's `[disabled] { pointer-events: none }` means a disabled control never
+ * receives hover, so neither a title attribute nor a CSS hover tooltip can
+ * fire on it — and a disabled button is exactly when a user most wants to be
+ * told what it is. */
+:where(#mbeditor-root) [disabled],
+:where(#mbeditor-root) [aria-disabled="true"] {
+  pointer-events: auto;
+}
+
+/* Pico lays [role=group] out as a full-width bordered input group. It is used
+ * here only to label toolbars for screen readers. */
+:where(#mbeditor-root) [role="group"] {
+  display: inline-flex;
+  width: auto;
+  margin-bottom: 0;
+}
+
+/* Pico gives every button a bottom margin to space form controls. */
+:where(#mbeditor-root) :is(button, [type="button"], [type="submit"], [type="reset"]) {
+  margin: 0;
+}
+
+/* Pico's focus/active state sets its primary blue on --pico-background-color
+   and --pico-border-color, which bleeds through as a blue tint on any button
+   not overriding its background with a literal value. Kept separate from the
+   block above: this one is intentionally more specific than a component rule,
+   because no component should be able to opt back into a Pico focus colour. */
 #mbeditor-root button:not(.pico-btn):focus,
 #mbeditor-root button:not(.pico-btn):focus-visible,
 #mbeditor-root button:not(.pico-btn):active {
@@ -129,57 +205,66 @@ html, body, #mbeditor-root {
 
 /* ── Activity Bar (VSCode-style, always visible) ───────── */
 .ide-activity-bar {
-  width: 48px;
-  min-width: 48px;
+  width: 40px;
+  min-width: 40px;
   flex-shrink: 0;
   background: var(--ide-panel-bg);
   border-right: 1px solid var(--ide-border);
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 4px 0;
+  /* stretch, not center: the buttons fill the bar edge to edge so the active
+     indicator can sit flush against the left of the screen. Centering them
+     left a gutter the indicator was inset by. */
+  align-items: stretch;
+  padding: 0;
   z-index: 10;
 }
 
 .ide-activity-bar-top {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 2px;
+  align-items: stretch;
+  gap: 0;
   flex: 1;
 }
 
 .ide-activity-bar-bottom {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding-bottom: 4px;
+  align-items: stretch;
+  gap: 0;
 }
 
-.ide-activity-btn {
-  width: 36px;
-  height: 36px;
+/* Scoped through the bar so the glyph size outranks the global
+   `button:not(.pico-btn) { font-size: 12px }` reset, which is more specific
+   than a bare class and was silently winning. */
+.ide-activity-bar .ide-activity-btn {
+  width: 100%;
+  height: 40px;
   background: transparent;
   border: none;
+  /* Always reserve the indicator's width so the glyph does not shift sideways
+     by a pixel the moment a panel is opened. */
+  border-left: 2px solid transparent;
   border-radius: 0;
   color: var(--ide-text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  font-size: 15px;
-  transition: background 0.12s ease, color 0.12s ease;
+  font-size: 17px;
+  transition: color 0.12s ease;
 }
 
-.ide-activity-btn:hover {
-  background: var(--ide-hover-bg);
+/* The glyph carries the state, not a filled box behind it. */
+.ide-activity-bar .ide-activity-btn:hover {
+  background: transparent;
   color: var(--ide-text);
 }
 
-.ide-activity-btn.active {
+.ide-activity-bar .ide-activity-btn.active {
   color: var(--ide-accent-fg);
-  border-left: 2px solid var(--ide-accent-fg);
+  border-left-color: var(--ide-accent-fg);
 }
 
 .sidebar-panel-title {
@@ -300,25 +385,25 @@ html, body, #mbeditor-root {
   border: 1px solid var(--ide-accent);
   border-radius: 3px;
   color: var(--ide-text);
-  font-size: 12px;
+  font-size: 14px;
   font-family: inherit;
   padding: 1px 4px;
   outline: none;
-  height: 18px;
-  line-height: 18px;
+  height: 21px;
+  line-height: 21px;
 }
 
 .tree-item-icon {
-  width: 16px;
-  margin-right: 5px;
-  font-size: 12px;
+  width: 20px;
+  margin-right: 6px;
+  font-size: 14px;
   flex-shrink: 0;
   text-align: center;
 }
 
 .tree-folder-icon { color: #dcb67a; }
 .tree-file-icon   { color: #78b4e0; }
-.tree-item-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
+.tree-item-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
 
 /* ── Custom File Icons ───────────────────────────────────── */
 .ruby-icon { color: #f26262 !important; }
@@ -791,23 +876,33 @@ html, body, #mbeditor-root {
 }
 
 /* ── Status Bar ──────────────────────────────────────────── */
+/* line-height: 1 is what keeps an icon and the number beside it on the same
+ * centre line. Pico's inherited 1.5 gave every text span a 16.5px line box
+ * inside a 22px bar while the icons' box was 11px, so the two were centred on
+ * different half-leadings; with 1 both boxes are the font's own content box
+ * and flex centres them together. */
 .ide-statusbar {
   display: flex;
   align-items: center;
   background: var(--ide-accent);
   height: 22px;
-  padding: 0 8px;
-  gap: 4px;
+  padding: 0;
+  gap: 0;
   flex-shrink: 0;
   font-size: 11px;
+  line-height: 1;
   color: var(--ide-accent-text);
 }
 
+/* One cell rhythm for every item, button or not. The branch, the message and
+ * the chips each carried their own padding on top of the bar's, so the gaps
+ * between them were all different widths. */
+.ide-statusbar > * { padding: 0 8px; }
+
 .statusbar-branch {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 13px;
+  gap: 4px;
   font-weight: 600;
   color: var(--ide-accent-text);
 }
@@ -841,7 +936,6 @@ html, body, #mbeditor-root {
   font-size: 12px;
   font-weight: 600;
   color: var(--ide-danger);
-  padding: 0 10px;
   animation: statusbar-pulse 2s ease-in-out infinite;
 }
 
@@ -941,7 +1035,6 @@ html, body, #mbeditor-root {
   color: color-mix(in srgb, var(--ide-accent-text) 45%, transparent);
   font-size: 10px;
   white-space: nowrap;
-  padding-left: 8px;
   cursor: pointer;
 }
 .statusbar-version:hover {
@@ -954,7 +1047,6 @@ html, body, #mbeditor-root {
   font-weight: 600;
   letter-spacing: 0.04em;
   opacity: 0.85;
-  padding: 0 6px;
 }
 
 .statusbar-zen-btn {
@@ -1140,52 +1232,88 @@ html, body, #mbeditor-root {
   to { transform: rotate(360deg); }
 }
 
+/* Tree rows. Both kinds are pinned to the same 22px because MbeditorApp
+   windows them by index * SEARCH_ROW_HEIGHT — change one and change both. */
+.search-result-file-row,
 .search-result-item {
-  height: 40px;
-  padding: 4px 6px;
+  height: 22px;
   cursor: pointer;
-  border-radius: 3px;
   transition: background 0.1s;
-  border-bottom: 1px solid var(--ide-input-bg);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   overflow: hidden;
   box-sizing: border-box;
   flex-shrink: 0;
 }
 
+.search-result-file-row { padding: 0 6px; }
+/* Indented under its file header, the way the explorer nests children. */
+.search-result-item { padding: 0 6px 0 24px; }
+
+.search-result-file-row:hover,
 .search-result-item:hover { background: var(--ide-hover-bg); }
 
+.search-result-chevron {
+  flex-shrink: 0;
+  width: 12px;
+  font-size: 12px;
+  color: var(--ide-text-muted);
+}
+
 .search-result-icon {
   flex-shrink: 0;
   width: 16px;
-  margin-top: 2px;
   text-align: center;
   color: #78b4e0;
 }
 
-.search-result-body {
-  min-width: 0;
-  flex: 1;
+.search-result-file-name {
+  font-size: 12px;
+  color: var(--ide-text);
+  white-space: nowrap;
+  flex-shrink: 0;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.search-result-file {
-  font-size: 11px;
-  color: var(--ide-accent-fg);
-  font-weight: 500;
+.search-result-file-dir {
+  font-size: 10px;
+  color: var(--ide-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Match count, VS Code's little pill on the right of the file row. */
+.search-result-count {
+  flex-shrink: 0;
+  margin-left: auto;
+  min-width: 16px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--ide-input-bg);
+  color: var(--ide-text-muted);
+  font-size: 10px;
+  line-height: 15px;
+  text-align: center;
 }
 
 .search-result-line-num {
+  flex-shrink: 0;
   font-size: 10px;
   color: var(--ide-text-muted);
-  margin-left: 4px;
+  font-family: monospace;
+  min-width: 28px;
+  text-align: right;
 }
 
 .search-result-text {
+  flex: 1;
+  min-width: 0;
   font-size: 11px;
   color: var(--ide-text-muted);
   font-family: monospace;
@@ -1194,6 +1322,47 @@ html, body, #mbeditor-root {
   text-overflow: ellipsis;
 }
 
+/* The match has to stay on screen at any panel width, so a hit line is three
+   boxes rather than one ellipsised string. Shrink order is what does the work:
+   the text BEFORE the match gives way first, then the text after it, and the
+   match itself only as a last resort — so it can never be the part that scrolls
+   out of view. `direction: rtl` is what moves the leading ellipsis to the start
+   of .search-result-pre; searchMatchParts() prefixes a U+200E so an all-symbol
+   segment can't be reordered by it. */
+.search-result-text-split {
+  display: flex;
+  align-items: center;
+  text-overflow: clip;
+}
+
+.search-result-pre,
+.search-result-post,
+.search-result-match {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+}
+
+.search-result-pre {
+  flex: 0 100 auto;
+  direction: rtl;
+  text-align: left;
+}
+
+.search-result-post { flex: 0 10 auto; }
+
+/* Never shrinks: flex distributes overflow across every shrinkable box in
+   proportion to its size, so even shrink:1 against a long tail cost the match a
+   character or two of ellipsis. max-width is what still bounds a match wider
+   than the panel — it clips instead of overflowing. */
+.search-result-match {
+  flex: 0 0 auto;
+  max-width: 100%;
+  background: color-mix(in srgb, var(--ide-accent) 40%, transparent);
+  color: var(--ide-text);
+  border-radius: 2px;
+}
+
 .search-results-loading-more {
   padding: 8px 10px;
   font-size: 11px;
@@ -1412,7 +1581,90 @@ html, body, #mbeditor-root {
   cursor: pointer;
 }
 .import-conflict-btn:hover { background: var(--ide-hover-bg, #4a4a4a); }
+.import-conflict-btn:disabled { opacity: 0.45; cursor: default; }
 .import-conflict-btn-danger { border-color: var(--ide-error, #f48771); color: var(--ide-error, #f48771); }
+.import-conflict-btn-primary {
+  background: var(--ide-accent, #0e639c);
+  border-color: var(--ide-accent, #0e639c);
+  color: #fff;
+}
+.import-conflict-btn-primary:hover:not(:disabled) { background: var(--ide-accent-hover, #1177bb); }
+
+/* Upload dialog — the pointed-at half of drag-and-drop import */
+.import-dialog { min-width: 460px; max-width: 620px; }
+.import-dialog .schema-modal-body { padding: 12px 16px; }
+.import-pick-row { display: flex; gap: 8px; }
+.import-pick-btn {
+  background: var(--ide-input-bg, #3c3c3c);
+  color: var(--ide-text, #d4d4d4);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 3px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.import-pick-btn:hover { background: var(--ide-hover-bg, #4a4a4a); }
+.import-pick-btn i { margin-right: 6px; opacity: 0.75; }
+.import-dialog-empty,
+.import-dialog-warning {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--ide-text-muted, #888);
+}
+.import-dialog-warning { color: var(--ide-warning, #cca700); }
+.import-dialog-section-title {
+  margin: 16px 0 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ide-text-muted, #888);
+}
+.import-dest-options { display: flex; flex-direction: column; gap: 2px; }
+.import-dest-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  padding: 4px 6px;
+  color: var(--ide-text, #d4d4d4);
+  font-size: 12px;
+  cursor: pointer;
+}
+.import-dest-option:hover { background: var(--ide-hover, rgba(255,255,255,0.06)); }
+.import-dest-option.active { background: var(--ide-selection-bg, rgba(14,99,156,0.35)); }
+.import-dest-radio { opacity: 0.7; font-size: 11px; }
+.import-dest-label {
+  font-family: var(--ide-mono-font, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.import-dest-hint { color: var(--ide-text-muted, #888); font-size: 11px; margin-left: auto; flex-shrink: 0; }
+.import-dest-input {
+  width: 100%;
+  margin-top: 8px;
+  box-sizing: border-box;
+  background: var(--ide-input-bg, #3c3c3c);
+  color: var(--ide-text, #d4d4d4);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 3px;
+  padding: 5px 8px;
+  font-family: var(--ide-mono-font, monospace);
+  font-size: 12px;
+}
+.import-dest-input:focus { outline: 1px solid var(--ide-accent, #0e639c); }
+.import-target-replaces {
+  margin-left: 8px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ide-warning, #cca700);
+}
 .schema-table {
   width: 100%;
   border-collapse: collapse;
@@ -1969,12 +2221,20 @@ html, body, #mbeditor-root {
   flex-shrink: 0;
 }
 
+/* The title yields the header to the action buttons rather than wrapping.
+ *
+ * It used to break-word onto three lines ("SAMPLE_ / WORKSPA / CE") because a
+ * long workspace name plus six buttons genuinely does not fit a 300px sidebar.
+ * flex-shrink against a `flex-shrink: 0` action group means the buttons always
+ * win: full title, then ellipsis, then gone. No JS measuring, and it adapts on
+ * its own to sections with fewer buttons — the Open Editors header keeps its
+ * title at the same width where Explorer has already dropped it. */
 .collapsible-title {
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .collapsible-actions {
@@ -1991,6 +2251,45 @@ html, body, #mbeditor-root {
   gap: 0;
 }
 
+/* Tooltip for the icon-only sidebar action buttons. See SidebarActionButton
+ * for why this is not a title attribute. Anchored to the button's right edge
+ * because .ide-sidebar-scrollable is overflow-x: hidden — a left-anchored or
+ * centred tooltip on the rightmost button would be clipped by the sidebar. */
+.sb-tip {
+  position: relative;
+  display: inline-flex;
+}
+.sb-tip::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 4000;
+  padding: 4px 7px;
+  background: var(--ide-panel-bg, #252526);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  color: var(--ide-text, #d4d4d4);
+  /* The section header sets uppercase, 600 weight and letter-spacing; a
+     tooltip inheriting those reads as another heading. */
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.08s ease 0.3s;
+}
+.sb-tip:hover::after,
+.sb-tip:focus-within::after {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sb-tip::after { transition: none; }
+}
+
 /* Open-editors panel: height is controlled by the --open-editors-height CSS variable
    set inline from React state (default 140px ≈ 5-6 items), drag-resizable via the
    .open-editors-resize-handle strip below. */
@@ -2319,7 +2618,7 @@ html, body, #mbeditor-root {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 15vh;
+  padding-top: 12vh;
   z-index: 9999;
 }
 
@@ -2327,8 +2626,9 @@ html, body, #mbeditor-root {
   background: var(--ide-panel-bg);
   border: 1px solid var(--ide-border-input);
   border-radius: 8px;
-  width: 500px;
-  max-height: 400px;
+  /* vw/vh caps keep the larger dialog inside a phone-sized viewport */
+  width: min(760px, 94vw);
+  max-height: min(620px, 72vh);
   display: flex;
   flex-direction: column;
   box-shadow: 0 16px 48px rgba(0,0,0,0.7);
@@ -2344,8 +2644,8 @@ html, body, #mbeditor-root {
   border: none;
   border-bottom: 1px solid var(--ide-border);
   color: var(--ide-text);
-  padding: 12px 34px 12px 16px;
-  font-size: 14px;
+  padding: 14px 40px 14px 18px;
+  font-size: 16px;
   outline: none;
   width: 100%;
   box-sizing: border-box;
@@ -2354,11 +2654,11 @@ html, body, #mbeditor-root {
 
 .quick-open-clear-btn {
   position: absolute;
-  right: 6px;
+  right: 8px;
   top: 50%;
   transform: translateY(-50%);
-  width: 22px;
-  height: 22px;
+  width: 26px;
+  height: 26px;
   border: none;
   border-radius: 4px;
   background: transparent;
@@ -2380,18 +2680,18 @@ html, body, #mbeditor-root {
 }
 
 .quick-open-result {
-  padding: 6px 16px;
+  padding: 8px 18px;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 12px;
+  gap: 10px;
+  font-size: 14px;
   transition: background 0.1s;
 }
 
 .quick-open-result-icon {
   flex-shrink: 0;
-  width: 16px;
+  width: 18px;
   text-align: center;
   color: #78b4e0;
 }
@@ -2405,10 +2705,10 @@ html, body, #mbeditor-root {
 .quick-open-result.selected { background: var(--ide-active-bg); }
 
 .quick-open-result-name { color: var(--ide-text); }
-.quick-open-result-path { color: var(--ide-text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.quick-open-result-path { color: var(--ide-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 .quick-open-section { margin-bottom: 4px; }
-.quick-open-section-header { padding: 6px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ide-text-muted); font-weight: 600; }
+.quick-open-section-header { padding: 8px 18px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ide-text-muted); font-weight: 600; }
 
 .quick-open-star-btn {
   flex-shrink: 0;
@@ -2417,7 +2717,7 @@ html, body, #mbeditor-root {
   cursor: pointer;
   padding: 2px 6px;
   color: var(--ide-text-muted);
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1;
   opacity: 0;
   transition: opacity 0.1s, color 0.1s;
@@ -2431,9 +2731,9 @@ html, body, #mbeditor-root {
 .quick-open-result-dir .quick-open-result-name { color: #dcb67a; }
 
 .quick-open-empty-hint {
-  padding: 20px 16px;
+  padding: 24px 18px;
   color: var(--ide-text-muted);
-  font-size: 12px;
+  font-size: 13px;
   text-align: center;
   line-height: 1.6;
 }
@@ -2652,26 +2952,8 @@ button:not(.pico-btn) {
   font-size: 12px;
 }
 
-/* Monaco widget isolation — Pico's [role=button] selector matches Monaco's
- * internal action elements (View Problem, Quick Fix…, lightbulb actions)
- * because Monaco renders them as <a role="button">. Without this reset, Pico
- * applies its primary-colour background, white text, and large form-element
- * padding, making those buttons huge and unreadable on certain themes.
- * Resetting the Pico CSS variables here is lower-impact than fighting
- * per-property specificity battles with Monaco's --vscode-* rules.
- */
-.monaco-hover [role=button],
-.action-widget [role=button],
-.context-view [role=button],
-.monaco-editor [role=button],
-.monaco-diff-editor [role=button] {
-  --pico-background-color: transparent;
-  --pico-border-color: transparent;
-  --pico-color: inherit;
-  --pico-box-shadow: none;
-  --pico-form-element-spacing-vertical: 0;
-  --pico-form-element-spacing-horizontal: 0;
-}
+/* Pico containment lives at the top of this file — see the block there. It has
+ * to sit above every component rule to stay a floor rather than an override. */
 
 /* Inputs and selects — keep compact but styled */
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
@@ -2684,7 +2966,11 @@ textarea {
   margin-bottom: 0;
 }
 
-/* Status bar buttons override (22px tall, full-bleed) */
+/* Status bar buttons override (22px tall, full-bleed).
+ * line-height must be set here too, not just on .ide-statusbar: Pico gives
+ * <button> its own line-height, so it does not inherit the bar's, and the
+ * count next to an icon ended up in a 16.5px line box beside the icon's 11px
+ * one. */
 .ide-statusbar button,
 .statusbar-btn {
   --pico-form-element-spacing-vertical: 0;
@@ -2692,6 +2978,7 @@ textarea {
   height: 22px;
   padding: 0 8px;
   font-size: 11px;
+  line-height: 1;
   border-radius: 2px;
   border: none;
   background: transparent;
@@ -3049,6 +3336,11 @@ button:not(.pico-btn) { margin-bottom: 0; }
   padding: 2px 6px;
 }
 .ide-problems-btn:hover { color: var(--ide-fg, #fff); }
+.ide-problems-btn:disabled { opacity: 0.4; cursor: default; }
+.ide-problems-btn:disabled:hover { color: var(--ide-fg-muted, #ccc); }
+.ide-problems-actions { display: flex; gap: 2px; }
+.ide-problems-actions .ide-problems-btn { white-space: nowrap; }
+.ide-problems-btn.is-on { color: var(--ide-accent, #0a84ff); }
 .ide-problems-body { flex: 1; overflow: auto; padding: 4px 0; font-size: 12px; }
 .ide-problems-empty {
   padding: 10px 14px;
@@ -3281,18 +3573,12 @@ button:not(.pico-btn) { margin-bottom: 0; }
 .ide-problems-frame { padding-left: 28px; }
 .ide-problems-frame .ide-problems-code { opacity: 1; }
 
-/* Status-bar ruby-lsp indicator. Healthy is a dim icon you can ignore;
-   degraded/off is amber with a label, because that one you should read. */
-.statusbar-lsp { display: inline-flex; align-items: center; gap: 4px; }
-.statusbar-lsp-ok { opacity: 0.45; }
-.statusbar-lsp-ok:hover { opacity: 1; }
-.statusbar-lsp-degraded,
-.statusbar-lsp-off { color: var(--ide-warning); }
-
-/* Status-bar problems indicator: bug count then warning count, VS Code style. */
-.statusbar-problems { display: inline-flex; align-items: center; gap: 4px; }
+/* Status-bar problems indicator: bug count then warning count, VS Code style.
+   The gap is the icon-to-its-own-number spacing; the warning icon opens the
+   second pair, so it gets the wider separator. */
+.statusbar-problems { gap: 4px; }
 .statusbar-problems-error-icon { color: var(--ide-danger); }
-.statusbar-problems-warning-icon { color: var(--ide-warning); }
+.statusbar-problems-warning-icon { color: var(--ide-warning); margin-left: 8px; }
 .statusbar-problems-count { font-variant-numeric: tabular-nums; }
 
 /* Search decorations off across engines — Chrome/Safari draw their own