@meridianlabs/log-viewer 0.3.228 → 0.3.230

package/lib/styles/index.css

@@ -14295,6 +14295,12 @@ pre[class*="language-"] {
   --bs-border-radius-lg: 4px;
   --bs-popover-max-width: 50%;
   --bs-code-color: #8b0000;
+  /* Secondary/italic guidance text (e.g. "optional" next to the Reason
+     label in the edit dialogs). Bootstrap's --bs-secondary-color is
+     readable on a light surface; in VS Code dark themes it disappears
+     against the dialog background, so this variable is re-pointed at
+     --vscode-descriptionForeground below. */
+  --inspect-hint-foreground: var(--bs-secondary-color);
   --inspect-find-background: var(--bs-body-bg);
   --inspect-find-foreground: var(--bs-body-color);
   --inspect-input-background: var(--bs-body-bg);
@@ -14494,6 +14500,10 @@ body[class^="vscode-"] {
   --inspect-input-background: var(--vscode-input-background);
   --inspect-input-foreground: var(--vscode-input-foreground);
   --inspect-input-border: var(--vscode-input-border);
+  /* descriptionForeground is the muted-but-readable text VS Code uses
+     for inline guidance (e.g. quick-pick descriptions). Matches the
+     editor's contrast tuning in both light and dark themes. */
+  --inspect-hint-foreground: var(--vscode-descriptionForeground);
   --inspect-diff-add-color: var(--vscode-diffEditor-insertedTextBackground);
   --inspect-diff-remove-color: var(--vscode-diffEditor-removedTextBackground);
   --inspect-glass-color: var(--vscode-editor-foreground);
@@ -14604,6 +14614,98 @@ body[class^="vscode-"] .btn-primary {
   --bs-btn-disabled-opacity: 0.8;
 }
 
+/* Inside modal dialogs (edit tags / edit metadata / scoring detail)
+   the editor-tuned `--vscode-editorGroup-border` reads as nearly
+   invisible against dark themes — chip strips, the metadata grid,
+   and form-control inputs all lose their visual containers. Re-point
+   `--bs-border-color` to a widget-grade border so anything Bootstrap
+   styles with the border-color token (chip outlines, input borders,
+   table dividers, etc.) becomes legible. The fallback chain prefers
+   widget/editorWidget borders (typically tuned by themes for popups)
+   and only drops back to editorGroup-border if nothing else is set. */
+body[class^="vscode-"] .modal {
+  --bs-border-color: var(
+    --vscode-widget-border,
+    var(--vscode-editorWidget-border, var(--vscode-editorGroup-border))
+  );
+  /* Error banner inside dialogs: the global vscode block only re-points
+     `--bs-danger-bg-subtle` (at the diff-editor red wash), leaving
+     `--bs-danger-text-emphasis` and `--bs-danger-border-subtle` at
+     Bootstrap's light-mode dark-red values — unreadable on a VS Code
+     dark dialog. Use the editor's input-validation tokens (designed
+     for exactly this purpose: a tinted background with readable
+     foreground and a visible border) with a fallback to
+     `errorForeground` for themes that only define the foreground.
+     Also re-point `--bs-danger` so the required-field asterisk picks
+     up the same readable red. */
+  --bs-danger: var(--vscode-errorForeground);
+  --bs-danger-bg-subtle: var(
+    --vscode-inputValidation-errorBackground,
+    var(--vscode-diffEditor-removedTextBackground)
+  );
+  --bs-danger-text-emphasis: var(
+    --vscode-inputValidation-errorForeground,
+    var(--vscode-errorForeground)
+  );
+  --bs-danger-border-subtle: var(
+    --vscode-inputValidation-errorBorder,
+    var(--vscode-errorForeground)
+  );
+  /* Change-tracking summary in the dialog footer uses these tokens
+     for the italic body, the "Adding" / "Editing" lines, and the
+     "No tags yet —" placeholder inside the chip box. Bootstrap's
+     light-mode values are unreadable on a dark VS Code modal; remap
+     to descriptionForeground (matches the hint label) plus the
+     editor's source-control accent colors so the categories stay
+     distinguishable. (Removing already inherits the readable red
+     from `--bs-danger` re-pointed above.) */
+  --bs-secondary-color: var(--vscode-descriptionForeground);
+  --bs-success-text-emphasis: var(
+    --vscode-gitDecoration-addedResourceForeground,
+    var(--vscode-charts-green)
+  );
+  --bs-warning-text-emphasis: var(
+    --vscode-gitDecoration-modifiedResourceForeground,
+    var(--vscode-charts-yellow)
+  );
+}
+
+/* Form-control inputs inside dialogs (Author, Reason, "Add a tag…",
+   "Add a key…") should look like native VS Code inputs rather than
+   editor-background panes: surface the input background/foreground
+   tokens, and use the input placeholder token so the placeholder
+   text stays readable in dark themes. */
+body[class^="vscode-"] .modal .form-control {
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border-color: var(
+    --vscode-input-border,
+    var(--vscode-widget-border, var(--vscode-editorGroup-border))
+  );
+}
+
+body[class^="vscode-"] .modal .form-control::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+  opacity: 1;
+}
+
+/* Mirror .btn-primary for .btn-secondary so Cancel buttons and the
+   "+ Add" pill (both rendered with Bootstrap's btn-secondary) read as
+   native VS Code secondary buttons rather than the washed-out
+   Bootstrap gray that has poor contrast in dark themes. */
+body[class^="vscode-"] .btn-secondary {
+  --bs-btn-bg: var(--vscode-button-secondaryBackground);
+  --bs-btn-border-color: var(--vscode-button-secondaryBackground);
+  --bs-btn-hover-bg: var(--vscode-button-secondaryHoverBackground);
+  --bs-btn-hover-border-color: var(--vscode-button-secondaryHoverBackground);
+  --bs-btn-color: var(--vscode-button-secondaryForeground);
+  --bs-btn-hover-color: var(--vscode-button-secondaryForeground);
+  --bs-btn-disabled-color: var(--vscode-button-secondaryForeground);
+  --bs-btn-disabled-bg: var(--vscode-button-secondaryBackground);
+  --bs-btn-disabled-border-color: var(--vscode-button-secondaryBackground);
+  --bs-btn-disabled-opacity: 0.8;
+}
+
 body[class^="vscode-"] .navbar-brand {
   --bs-navbar-brand-color: var(--vscode-sideBarSectionHeader-foreground);
   --bs-navbar-brand-hover-color: var(--vscode-sideBarSectionHeader-foreground);
@@ -16193,40 +16295,46 @@ li > ul {
   margin-right: 0.5rem;
   color: var(--bs-red);
 }
-._headerContainer_gh2j2_1 {
-  display: grid;
-  grid-template-columns: max-content auto;
-  column-gap: 0rem;
+._headerContainer_19525_1 {
+  /* Flex (not grid) so an optional `children` action node sits inline
+     beside the label rather than wrapping onto a new row. The previous
+     2-column grid (`max-content auto`) treated icon / label-text /
+     children as three grid items in two columns, forcing the third
+     onto its own row. With flex, icon + label sit at the start and
+     any actions trailing in `children` flow inline (and can push
+     themselves to the far edge with `margin-left: auto`). */
+  display: flex;
+  align-items: center;
   padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   font-size: var(--inspect-font-size-small);
   font-weight: 600;
   border-bottom: solid 1px var(--bs-light-border-subtle);
 }
 
-._headerContainer_gh2j2_1._headerModern_gh2j2_11 {
+._headerContainer_19525_1._headerModern_19525_17 {
   color: var(--bs-secondary);
   padding: 0.25rem 0.5rem 0rem 0.5rem;
   border-bottom: none;
   background-color: var(--bs-body-bg);
 }
 
-._headerIcon_gh2j2_18:not(._headerIconEmpty_gh2j2_18) {
+._headerIcon_19525_24:not(._headerIconEmpty_19525_24) {
   padding-right: 0.2rem;
 }
 
-._body_gh2j2_22 {
+._body_19525_28 {
   background-color: var(--bs-body-bg);
   padding: 0.5rem !important;
 }
 
-._card_gh2j2_27 {
+._card_19525_33 {
   background-color: var(--bs-body-bg);
   border: solid 1px var(--bs-light-border-subtle);
   border-radius: var(--bs-border-radius);
   overflow: hidden;
 }
 
-._body_gh2j2_22._noPadding_gh2j2_34 {
+._body_19525_28._noPadding_19525_40 {
   padding: 0;
 }
 ._copyButton_1goi8_1 {
@@ -21850,6 +21958,413 @@ pre._value_8citi_25 {
 .message-band-btn.warning {
   color: var(--bs-warning-text-emphasis);
 }
+/* Shared chrome — variant-specific look in `.link` and `.pill` below. */
+._button_u0dz8_2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+  text-decoration: none;
+  text-transform: none;
+  /* Matches TagChip's line-height so chips and pills auto-size to the
+     same height and descenders aren't clipped. Keep in sync with
+     TagChip.module.css `.chip`. */
+  line-height: 1.1;
+  /* When the button sits in a flex row (the PrimaryBar tag strip),
+     prevent it from being shrunk past its content width. */
+  flex-shrink: 0;
+}
+
+/* Link variant — used in card headers (e.g. the Metadata card header)
+   where the action belongs next to the section title. Body-color text
+   so it reads as part of the header rather than a link, with a hover
+   tint to convey clickability. */
+._link_u0dz8_1 {
+  border: none;
+  color: var(--bs-body-color);
+  padding: 0.125rem 0.35rem;
+  border-radius: 4px;
+  /* Matches the pill variant's regular weight so the two Edit
+     affordances (metadata card header, tag-strip pill) read at the
+     same visual weight. */
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+._link_u0dz8_1:hover {
+  background: var(--bs-secondary-bg);
+}
+
+._link_u0dz8_1:focus-visible {
+  outline: 2px solid var(--bs-border-color);
+  outline-offset: 1px;
+}
+
+/* Pill variant — matches TagChip's outline-only style so the Edit
+   button can sit at the end of a chip strip without competing for
+   attention. Values here mirror TagChip.module.css `.chip`; keep
+   them in sync if either changes. (Height auto-sizes from
+   line-height + padding — no fixed height, so chip and pill stay
+   visually aligned without drift if font-size changes.) */
+._pill_u0dz8_1 {
+  color: var(--bs-body-color);
+  border: 1px solid var(--bs-border-color);
+  border-radius: 999px;
+  padding: 0.125rem 0.35rem;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+._pill_u0dz8_1:hover {
+  background: var(--bs-secondary-bg);
+}
+
+._pill_u0dz8_1:focus-visible {
+  outline: 2px solid var(--bs-border-color);
+  outline-offset: 1px;
+}
+._modal_8i1ew_1 {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  max-width: 90vw;
+  margin-top: 3rem;
+  border-radius: var(--bs-border-radius);
+  position: relative;
+  z-index: 1050;
+}
+
+/* Even vertical whitespace above and below the title across every
+   Modal consumer (tags, metadata, scoring detail, …). An earlier
+   `height: 2em` rule clamped the header below its natural padding-
+   based height; the title still rendered, but how much of the
+   padding survived varied by CSS load order, so some surfaces ended
+   up visibly tighter than others. Setting padding explicitly removes
+   that dependency. */
+._header_8i1ew_21 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+._modalTitle_8i1ew_26 {
+  font-weight: 600;
+}
+
+._btnClose_8i1ew_30 {
+  height: 0.8em;
+  width: 0.8em;
+}
+
+/* Backdrop styling for the glass effect */
+._backdrop_8i1ew_36 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--inspect-glass-color);
+  opacity: var(--inspect-glass-opacity);
+
+  z-index: 1040;
+}
+
+._overflowVisible_8i1ew_48 {
+  overflow: visible;
+}
+
+._overflowHidden_8i1ew_52 {
+  overflow: hidden;
+}
+
+._overflowScroll_8i1ew_56 {
+  overflow: scroll;
+}
+
+._overflowAuto_8i1ew_60 {
+  overflow: auto;
+}
+
+._noPadding_8i1ew_64 {
+  padding: 0;
+}
+
+/* Used when a custom footer node is supplied via the `footer` prop —
+   provides the consistent padding for consumer-supplied buttons.
+   Background is left to the modal-content default (white) so this
+   footer matches other modals across the viewer rather than getting
+   the tinted rail look. */
+._footerSlot_8i1ew_73 {
+  padding: 0.75rem 1.125rem;
+}
+._textarea_8mbr9_1 {
+  font-family: var(--bs-font-monospace);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  padding: 0.4rem 0.625rem;
+  resize: none;
+  /* No inner scrollbar — the surrounding container (e.g. the metadata
+     table scroll wrapper) handles overflow. The height is matched to
+     scrollHeight, so a scrollbar would only appear from a transient
+     measurement glitch. */
+  overflow: hidden;
+  /* Borderless, transparent flat-cell look so the textarea reads as
+     part of the surrounding grid (and `rowNew` highlights bleed
+     through unbroken). Overrides Bootstrap `form-control`'s border,
+     border-radius, and focus box-shadow. */
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+._textarea_8mbr9_1:focus {
+  outline: none;
+  box-shadow: none;
+  /* Subtle tinted background as the focus indicator — replaces the
+     form-control blue ring with something that doesn't visually
+     interrupt the grid. */
+  background: var(--bs-tertiary-bg);
+}
+._container_13ofn_1 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  color: var(--bs-secondary-color);
+  font-style: italic;
+  /* When placed in the dialog footer next to the action buttons, the
+     summary needs to absorb the leftover horizontal space and shrink
+     below its content width so individual lines can ellipsize rather
+     than push the buttons off the right edge. `min-width: 0` is
+     required because a flex item's default `min-width: auto` resolves
+     to the intrinsic min-content width — which would defeat the
+     ellipsis on long add/edit/remove lists. */
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+._line_13ofn_18 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._label_13ofn_24 {
+  font-weight: 600;
+  font-style: normal;
+}
+
+._items_13ofn_29 {
+  color: var(--bs-secondary-color);
+}
+
+._accentAdding_13ofn_33 {
+  color: var(--bs-success-text-emphasis);
+}
+
+._accentEditing_13ofn_37 {
+  color: var(--bs-warning-text-emphasis);
+}
+
+._accentRemoving_13ofn_41 {
+  color: var(--bs-danger);
+}
+/* Shared chrome for EditTagsDialog and EditMetadataDialog. */
+
+._body_13gwg_3 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+._section_13gwg_9 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+._labelRow_13gwg_15 {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+._label_13gwg_15 {
+  font-weight: 600;
+  color: var(--bs-body-color);
+  margin: 0;
+}
+
+._hint_13gwg_27 {
+  /* `--inspect-hint-foreground` defaults to --bs-secondary-color but
+     resolves to --vscode-descriptionForeground inside VS Code so the
+     italic "optional" stays readable against dark editor themes. */
+  color: var(--inspect-hint-foreground);
+  font-weight: 400;
+  font-style: italic;
+}
+
+._required_13gwg_36 {
+  color: var(--bs-danger);
+  margin-left: 0.15rem;
+}
+
+._divider_13gwg_41 {
+  border: none;
+  border-top: 1px solid var(--bs-border-color);
+  margin: 0.15rem 0;
+}
+
+._provenance_13gwg_47 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+._error_13gwg_53 {
+  padding: 0.4rem 0.6rem;
+  background: var(--bs-danger-bg-subtle);
+  color: var(--bs-danger-text-emphasis);
+  border: 1px solid var(--bs-danger-border-subtle);
+  border-radius: var(--bs-border-radius);
+}
+
+/* Footer layout: optional change-summary on the left, action buttons
+   pinned to the right via `margin-left: auto` on `.footerActions` so
+   the buttons stay flush right whether or not the summary is showing
+   (it returns null when there are no pending changes). */
+._footer_13gwg_62 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+._footerActions_13gwg_62 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+/* The scroll wrapper bounds the table's vertical reach so the add-key
+   row, provenance fields, and footer stay on-screen no matter how many
+   keys the user has. The chrome (border, rounded corners) moves to
+   this element since the inner table now overflows scrollwise. */
+._tableScroll_1i84k_5 {
+  max-height: 40vh;
+  overflow-y: auto;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 6px;
+  background: var(--bs-body-bg);
+}
+
+/* Single grid spanning every row so columns line up uniformly across
+   the whole table. Each row is a subgrid inheriting the parent track
+   layout, which keeps row-level styling (divider, "new" highlight)
+   attached to a single wrapper element rather than every cell. */
+._table_1i84k_5 {
+  display: grid;
+  grid-template-columns: minmax(140px, 220px) 1fr auto;
+  column-gap: 0.625rem;
+}
+
+._empty_1i84k_23 {
+  padding: 0.75rem 0.875rem;
+  color: var(--bs-secondary-color);
+  /* Span all columns when the table is otherwise empty. */
+  grid-column: 1 / -1;
+}
+
+._row_1i84k_30 {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: flex-start;
+}
+
+._rowDivider_1i84k_37 {
+  border-top: 1px solid var(--bs-border-color);
+}
+
+._rowNew_1i84k_41 {
+  background: var(--bs-success-bg-subtle);
+}
+
+/* Padding lives on the individual cells (not the .row wrapper) so the
+   subgrid tracks stay aligned to the parent's column lines — putting
+   padding on the wrapper would shift its content inward and break the
+   subgrid alignment. The first and last cells absorb the horizontal
+   inset that previously came from `.row { padding-inline: 0.75rem }`.
+
+   No vertical padding on `.value`: the textarea's own internal padding
+   (0.4rem top/bottom from AutogrowText) already provides breathing
+   room within the edit box, and an outer pad makes the row feel
+   over-stuffed. `.key` and `.remove` use a top inset that lines them
+   up with the textarea's first text baseline. */
+._key_1i84k_54 {
+  font-family: var(--bs-font-monospace);
+  word-break: break-all;
+  padding: 0.4rem 0 0 0.75rem;
+}
+
+._value_1i84k_51 {
+  min-width: 0;
+  padding: 0;
+}
+
+._remove_1i84k_54 {
+  background: transparent;
+  border: none;
+  padding: 0.4rem 0.75rem 0 0.4rem;
+  color: var(--bs-secondary-color);
+  cursor: pointer;
+  border-radius: 4px;
+  line-height: 1;
+}
+
+._remove_1i84k_54:hover {
+  color: var(--bs-danger);
+  background: var(--bs-tertiary-bg);
+}
+
+._remove_1i84k_54:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+._addRow_1i84k_87 {
+  margin-top: 0.625rem;
+  display: grid;
+  grid-template-columns: 1fr 7.5rem auto;
+  gap: 0.5rem;
+}
+
+._addKeyInput_1i84k_94 {
+  min-width: 0;
+}
+
+._typeSelect_1i84k_98 {
+  font-family: var(--bs-font-monospace);
+}
+
+._addButton_1i84k_102 {
+  white-space: nowrap;
+}
+._headerActions_1fn25_1 {
+  /* CardHeader is a flex row (icon → label → children); pushing this
+     wrapper with margin-left:auto sends the Edit affordance to the
+     right edge of the header. */
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+._emptyMetadata_1fn25_10 {
+  color: var(--bs-secondary-color);
+  font-style: italic;
+  padding: 0.25rem 0.5rem;
+}
 ._item_1uzhd_1 {
   margin-bottom: 0em;
 }
@@ -22260,85 +22775,148 @@ pre._value_8citi_25 {
 ._text_1yknn_20 {
   margin-top: -2px;
 }
-._grid_er9fb_1 {
-  display: grid;
-  grid-template-columns: fit-content(50%) fit-content(50%);
-  column-gap: 3em;
-  align-items: flex-start;
+._chipBox_yxwie_1 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  min-height: 2.25rem;
+  padding: 0.375rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  background: var(--bs-body-bg);
 }
-._button_12472_1 {
+
+._empty_yxwie_12 {
+  color: var(--bs-secondary-color);
+  padding: 0.2rem 0.25rem;
+}
+
+._addRow_yxwie_17 {
   display: flex;
-  border: none;
-  flex-direction: row;
-  background-color: unset;
-  color: var(--bs-link-color);
+  gap: 0.5rem;
+  margin-top: 0.5rem;
 }
 
-._button_12472_1:hover {
-  color: var(--bs-link-hover-color);
-  cursor: pointer;
+._input_yxwie_23 {
+  flex: 1;
 }
 
-._label_12472_14 {
-  margin-left: 0.4em;
+._addButton_yxwie_27 {
+  white-space: nowrap;
 }
-._modal_1tj8p_1 {
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: center;
-  max-width: 90vw;
-  margin-top: 3rem;
-  border-radius: var(--bs-border-radius);
-  position: relative;
-  z-index: 1050;
+._chip_17zs5_1 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.35rem;
+  /* Cap chip width so one giant tag can't push the inline Edit button
+     off the right edge of the header. The label inside ellipsizes. */
+  max-width: 18rem;
+  min-width: 0;
+  /* Outline-only look — transparent fill, body weight text. Keeps
+     the chips from competing with the task title for visual weight. */
+  background: transparent;
+  color: var(--bs-body-color);
+  border-radius: 999px;
+  border: 1px solid var(--bs-border-color);
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  /* When the chip is rendered as a <button> (clickable header chip),
+     inherit the surrounding font so the user-agent button styling
+     doesn't switch the text to system fonts at the wrong size. */
+  font: inherit;
+  /* line-height > 1 so the label's `overflow: hidden` box (used for
+     ellipsis on long tags) contains the full glyph extent, including
+     descenders on g/p/q/y/j. With line-height: 1 the box was exactly
+     the font size and the bottom of descenders was clipped. The chip
+     auto-sizes from this + padding instead of using a fixed height,
+     so any future font-size change stays in proportion. */
+  line-height: 1.1;
 }
 
-._header_1tj8p_14 {
-  height: 2em;
+._chipLabel_17zs5_31 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 
-._modalTitle_1tj8p_18 {
-  font-weight: 600;
+/* Pending-add variant inside the editor: keep the green outline so it
+   still reads as "new", but no fill (matches the saved-chip style). */
+._chipNew_17zs5_40 {
+  border-color: var(--bs-success-border-subtle);
+  color: var(--bs-success-text-emphasis);
 }
 
-._btnClose_1tj8p_22 {
-  height: 0.8em;
-  width: 0.8em;
+/* Applied when the chip is rendered as a clickable <button> (header
+   context). Mirrors the Edit/overflow pills' hover + focus treatment
+   so the whole strip behaves consistently. */
+._chipClickable_17zs5_48 {
+  cursor: pointer;
 }
 
-/* Backdrop styling for the glass effect */
-._backdrop_1tj8p_28 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--inspect-glass-color);
-  opacity: var(--inspect-glass-opacity);
+._chipClickable_17zs5_48:hover {
+  background: var(--bs-secondary-bg);
+}
 
-  z-index: 1040;
+._chipClickable_17zs5_48:focus-visible {
+  outline: 2px solid var(--bs-border-color);
+  outline-offset: 1px;
 }
 
-._overflowVisible_1tj8p_40 {
-  overflow: visible;
+._chipRemove_17zs5_61 {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-left: 0.125rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
 }
 
-._overflowHidden_1tj8p_44 {
-  overflow: hidden;
+._chipRemove_17zs5_61:hover {
+  opacity: 1;
+  color: var(--bs-danger);
+}
+/* Base rules for the tag chip strip. Layout primitives only — context
+   (alignment, margins, shrink behavior) is supplied by the consumer via
+   the `className` prop. */
+._tagRow_pg3wd_4 {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+._grid_q7chi_1 {
+  display: grid;
+  grid-template-columns: fit-content(50%) fit-content(50%);
+  column-gap: 3em;
+  align-items: flex-start;
 }
 
-._overflowScroll_1tj8p_48 {
-  overflow: scroll;
+/* TaskTab-context override for <TagStrip>. Centers chips vertically
+   inside the MetaDataGrid value cell so they line up with the "tags"
+   label on the left. Base flex rules come from TagStrip.module.css. */
+._tagPillAlign_q7chi_11 {
+  align-items: center;
+}
+._button_12472_1 {
+  display: flex;
+  border: none;
+  flex-direction: row;
+  background-color: unset;
+  color: var(--bs-link-color);
 }
 
-._overflowAuto_1tj8p_52 {
-  overflow: auto;
+._button_12472_1:hover {
+  color: var(--bs-link-hover-color);
+  cursor: pointer;
 }
 
-._noPadding_1tj8p_56 {
-  padding: 0;
+._label_12472_14 {
+  margin-left: 0.4em;
 }
 ._container_w43k4_1 {
   display: grid;
@@ -22636,55 +23214,90 @@ thead th {
   gap: 0.1em;
   padding-right: 1em;
 }
-._container_17txe_1 {
+._container_1x0td_1 {
   display: flex;
   padding-top: 0;
   margin-left: 0.5rem;
   min-width: 250px;
 }
 
-._wrapper_17txe_8 {
+/* Body column expands to fill whatever space the right-hand results
+   panel doesn't claim. Previously the right column was a fixed `1fr`
+   share, so even on wide windows the title block was capped at ~half
+   the wrapper — which forced the inline tag strip to wrap chips long
+   before there was any real space pressure (large empty gap between
+   the Edit button and the right column). With `auto` the results
+   panel takes its natural width and the body absorbs the rest. */
+._wrapper_1x0td_15 {
   display: grid;
-  grid-template-columns: minmax(auto, 1fr) 1fr;
+  grid-template-columns: minmax(0, 1fr) auto;
   width: 100%;
 }
 
-._toggle_17txe_14 {
+._toggle_1x0td_21 {
   margin-top: 0.3em;
   font-size: 1em;
   padding: 0rem 0.1rem 0.1rem 0rem;
   display: flex;
 }
 
-._body_17txe_21 {
+._body_1x0td_28 {
   display: flex;
   flex-direction: column;
   margin-left: 0.2rem;
 }
 
-._bodyContainer_17txe_27 {
+/* Single-line flex row: title + model + tag chips. Items align by
+   text baseline so the eval name, model name, and first row of chips
+   all sit on the same line. (Subsequent wrapped chip rows fall below,
+   inside the tag row's own box.) A small bottom margin reserves
+   breathing room between the chip block and the secondary row
+   (filename / copy / download). */
+._bodyContainer_1x0td_40 {
   margin-top: 0.1rem;
-  display: grid;
-  grid-template-columns: minmax(30px, max-content) minmax(100px, max-content);
+  margin-bottom: 0.4rem;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  column-gap: 0.5rem;
+  min-width: 0;
+}
+
+/* Header-context overrides for <TagStrip>. The base flex rules
+   (display/wrap/gap) live in TagStrip.module.css; this class adds the
+   bits that only make sense inside the title+chips flex contention:
+     - flex-shrink: 1 + min-width: 0 — the chip strip must shrink below
+       its content width so chips wrap instead of pushing the trailing
+       Edit pill past the right edge. (Default `min-width: auto`
+       resolves to the content's intrinsic min and would prevent
+       shrinking even with flex-shrink: 1.)
+   Vertical alignment to the title/model baseline is handled by the
+   parent `.bodyContainer`'s `align-items: baseline` — no margin or
+   internal `align-items` is needed here. */
+._tagRowHeader_1x0td_61 {
+  flex-shrink: 1;
+  min-width: 0;
 }
 
-._taskTitle_17txe_33 {
+._taskTitle_1x0td_66 {
   font-weight: 600;
-  margin-right: 0.3rem;
+  /* The eval name always renders in full — no ellipsis. The tag row
+     wraps to additional lines instead of squeezing the title. */
+  flex-shrink: 0;
 }
 
-._taskModel_17txe_38 {
-  padding-top: 0.4rem;
+._taskModel_1x0td_73 {
+  flex-shrink: 0;
 }
 
-._taskStatus_17txe_42 {
+._taskStatus_1x0td_77 {
   display: flex;
   justify-content: end;
   margin-right: 1em;
   margin-bottom: 0;
 }
 
-._secondaryContainer_17txe_49 {
+._secondaryContainer_1x0td_84 {
   opacity: 0.7;
   margin-top: -0.1rem;
   padding-bottom: 0;
@@ -22693,7 +23306,7 @@ thead th {
   gap: 0.5rem;
 }
 
-._buttonGroup_17txe_58 {
+._buttonGroup_1x0td_93 {
   display: flex;
   gap: 0.15rem;
   align-items: center;