Fixed missing whitespace around highlights in ol-chip#12493

ragini-pandey · 2026-04-30T08:16:04Z

Fix: restore whitespace around bolded  highlights inside ol-chip (subject pills in search results).

Technical

OLChip's .chip element uses display: inline-flex. When Solr highlight HTML such as Adventure stories is slotted into the chip, the slot's assigned nodes — a text node and an  element — become separate flex items. Per the CSS Flexbox spec, leading/trailing whitespace inside a flex item is collapsed, so the trailing space in "Adventure " is dropped and the chip renders as Adventurestories (visually Adventure**stories**).

The fix wraps <slot> in a single inline  so all slotted content forms one flex item, which in turn lays out its own children in a normal inline formatting context. Whitespace between the text and  is preserved. The .icon-slot and .count remain separate flex items, so :host([selected]) padding/icon positioning is unaffected.

The .label wrapper deliberately has no associated CSS rule:

display: inline would be a no-op —  is already inline, and flex items are blockified by the flex container regardless.
white-space: normal would block useful inheritance: a caller writing ol-chip { white-space: nowrap; } to force a single-line chip would have that value swallowed inside the shadow tree.

A code comment in render() explains the rationale so future readers know why the wrapper exists and why no styling is attached to it.

Why not other approaches:

white-space: pre on .chip would preserve the whitespace but also keep newlines/indentation from the source and disable wrapping — undesirable for chip labels.
::slotted(*) styling can't add a layout wrapper around the assigned nodes; it can only style each one individually, so it can't collapse them into one flex item.

Testing

1. Reproduce the bug in production search results (recommended):

docker compose up
Open http://localhost:8080/search?q=adventure&mode=everything
Subject pills with bolded matches must show a visible space between the regular and bolded portions, e.g. Adventure **stories** rather than Adventure**stories**.

2. Quick isolated DOM test (no full stack required):

Save the file below as openlibrary/components/lit/OLChip.test.html, then serve the lit/ folder and open the page:

cd openlibrary/components/lit
python3 -m http.server 8765
# open http://localhost:8765/OLChip.test.html

All five chips must render with visible whitespace where applicable. To confirm the fix actually does something, temporarily revert this PR's change (replace <slot></slot> with bare <slot></slot>) and reload — cases 1, 2, 4, 5 will collapse to Adventurestories-style output. Restore the change and the spaces return.

OLChip.test.html (paste this content)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>OLChip whitespace test (issue #12488)</title>
  <!-- Map bare "lit" specifier to a CDN build so we can import OLChip.js
       directly without running webpack/vite. -->
  <script type="importmap">
  {
    "imports": {
      "lit": "https://esm.sh/lit@3"
    }
  }
  </script>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 24px;
      max-width: 720px;
    }
    h1 { font-size: 18px; }
    section { margin-bottom: 20px; }
    section p { margin: 0 0 6px; color: #555; font-size: 13px; }
    .row { display: flex; flex-wrap: wrap; gap: 8px; }
    code { background: #f3f3f3; padding: 1px 4px; border-radius: 3px; }

    /* Mirror the prod CSS rule from search-result-item.css so <em>
       inside the slotted highlight is bold (not italic). */
    ol-chip em { font-weight: bold; font-style: normal; }
  </style>
</head>
<body>
  <h1>OLChip whitespace test &mdash; issue #12488</h1>
  <p>
    Each chip below must show a visible space between the regular text and the
    <strong>bolded</strong> highlight. Before the fix, cases 1, 2 and 4 rendered
    as e.g. <code>Adventurestories</code>.
  </p>

  <section>
    <p>1. Trailing highlight: <code>Adventure &lt;em&gt;stories&lt;/em&gt;</code></p>
    <div class="row">
      <ol-chip size="small">Adventure <em>stories</em></ol-chip>
    </div>
  </section>

  <section>
    <p>2. Leading highlight: <code>&lt;em&gt;Adventure&lt;/em&gt; stories</code></p>
    <div class="row">
      <ol-chip size="small"><em>Adventure</em> stories</ol-chip>
    </div>
  </section>

  <section>
    <p>3. No highlight (control): <code>Fiction</code></p>
    <div class="row">
      <ol-chip size="small">Fiction</ol-chip>
    </div>
  </section>

  <section>
    <p>4. Highlights on both sides: <code>&lt;em&gt;Adventure&lt;/em&gt; and &lt;em&gt;stories&lt;/em&gt;</code></p>
    <div class="row">
      <ol-chip size="small"><em>Adventure</em> and <em>stories</em></ol-chip>
    </div>
  </section>

  <section>
    <p>5. As a link (matches search-results usage):</p>
    <div class="row">
      <ol-chip size="small" href="#"><em>Adventure</em> stories</ol-chip>
    </div>
  </section>

  <script type="module" src="./OLChip.js"></script>
</body>
</html>

Cases verified:

#	Slotted content	Before fix	After fix
1	`Adventure <em>stories</em>`	`Adventurestories`	`Adventure stories`
2	`<em>Adventure</em> stories`	`Adventurestories`	`Adventure stories`
3	`Fiction` (control, no `<em>`)	`Fiction`	`Fiction` (unchanged)
4	`<em>Adventure</em> and <em>stories</em>`	`Adventureandstories`	`Adventure and stories`
5	`<ol-chip href="#"><em>Adventure</em> stories</ol-chip>` (link variant used by search)	`Adventurestories`	`Adventure stories`

Selected-state chips (with the close icon) and chips with count were also visually checked to ensure the icon position and count spacing did not regress. As an extra sanity check, applying ol-chip { white-space: nowrap; } from outside the component now correctly forces the chip onto a single line — confirming the wrapper does not block useful style inheritance.

Screenshot

Before / after screenshots from /search?q=adventure&mode=everything to be attached.

Stakeholders

@lokesh (Lead: front-end / LIT components) — per the issue's Lead: @lokesh label.
@cdrini — author of #12261 which adopted ol-chip for subject pills, and of the original report.

…hive#12488) OLChip's .chip uses display: inline-flex, which made each slotted node (text + ) a separate flex item, collapsing the whitespace between them. Wrap <slot> in an inline so the slotted content lays out as a single flex item in a normal inline formatting context, preserving spaces around bolded highlights.

mekarpeles · 2026-04-30T08:17:58Z

Thank you for the PR, @ragini-pandey.

@lokesh is assigned to this PR and currently has:

0 open PR(s) of equal or higher priority to review first

PR triage checklist (maintainers / Pam)

PR description — not empty; explains what the change does and how to verify it
References an issue — PR body contains a #NNN reference
- Linked issue is triaged — has a Priority: * label (not just Needs: Triage)
- Linked issue is assigned — has at least one assignee
Commit history clean — no WIP/fixup/conflict noise; commit messages are meaningful
CI passing — no failing check-runs
Test cases present — if the change touches substantive logic, test coverage exists or is explained
Proof of testing — PR body includes a description of what was tested, a screenshot, or a video

Note

This comment was automatically generated by Pam, Open Library's Project AI Manager, on behalf of @mekarpeles. Pam is designed to provide status visibility, perform basic project management functions and relevant codebase research, and provide actionable feedback so contributors aren't left waiting.

Copilot

Pull request overview

Fixes missing whitespace around  highlights when Solr-highlighted HTML is slotted into ol-chip (subject pills), addressing #12488 by ensuring highlighted text and surrounding text nodes layout as a single flex item.

Changes:

Wrapes the <slot> content in a .label span so mixed text/ highlight nodes render in one inline formatting context within the chip.
Adds .label styling and explanatory comment documenting the flex/whitespace behavior.

Per review: display: inline is redundant on a flex item (which is blockified anyway), and white-space: normal would block callers from inheriting white-space: nowrap onto the chip. The .label wrapper alone is sufficient to make slotted content a single flex item, which is what fixes the whitespace collapse.

Copilot

Pull request overview

Fixes missing whitespace in highlighted subject pills by ensuring Solr highlight markup (e.g. Adventure stories) is laid out as a single flex item inside ol-chip, preventing flexbox whitespace-collapsing between separate slotted nodes.

Changes:

Wraps the chip’s <slot> in a  so all slotted nodes render in one inline formatting context (preserving spaces around ).
Adds an in-code comment documenting the flexbox/slot behavior and why no .label styling is applied.

lokesh · 2026-05-05T18:44:31Z

Tested locally. LGTM

Before:

After:

Copilot AI review requested due to automatic review settings April 30, 2026 08:16

github-actions Bot assigned lokesh Apr 30, 2026

github-actions Bot added the Priority: 2 Important, as time permits. [managed] label Apr 30, 2026

Copilot AI reviewed Apr 30, 2026

View reviewed changes

Comment thread openlibrary/components/lit/OLChip.js Outdated

ragini-pandey requested a review from Copilot April 30, 2026 08:24

Copilot started reviewing on behalf of ragini-pandey April 30, 2026 08:24 View session

Copilot AI reviewed Apr 30, 2026

View reviewed changes

ragini-pandey changed the title ~~Fix missing whitespace around highlights in ol-chip (#12488)~~ Fixed missing whitespace around highlights in ol-chip Apr 30, 2026

lokesh merged commit 562e4f6 into internetarchive:master May 5, 2026
7 of 8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fixed missing whitespace around <em> highlights in ol-chip#12493

Fixed missing whitespace around <em> highlights in ol-chip#12493
lokesh merged 2 commits into
internetarchive:masterfrom
ragini-pandey:12488/fix/olchip-whitespace

ragini-pandey commented Apr 30, 2026 •

edited

Loading

Uh oh!

mekarpeles commented Apr 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

lokesh commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

ragini-pandey commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Technical

Testing

Screenshot

Stakeholders

Uh oh!

mekarpeles commented Apr 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

lokesh commented May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ragini-pandey commented Apr 30, 2026 •

edited

Loading