⚠️ No Changeset found

Latest commit: 1f4ff2e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	1f4ff2e
🔍 Latest deploy log	https://app.netlify.com/projects/astro-starlight/deploys/6865014c93e8d100096f15b6
😎 Deploy Preview	https://deploy-preview-3271--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (🟢 up 1 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Couple of quick experiments:

• Moving the excerpt up and removing top padding visually links the excerpt with the title a bit better:

   /* Move excerpts up closer to the result title */
   #starlight__search .pagefind-ui__result-excerpt:not(:where(.pagefind-ui__result-nested *)) {
       margin-top: -0.75em; /* Magic number — would be good to derive this instead. */
       padding-top: 0;
   }
   
   /* When the title is focused, also highlight the excerpt */
   #starlight__search .pagefind-ui__result-title:focus-within + .pagefind-ui__result-excerpt:not(:where(.pagefind-ui__result-nested *)) {
       background-color: var(--sl-color-accent-low);
   }

  

• But this introduces issues of course with hover states:

  

• We can’t use outline because of the overlap, but we can simulate it using border on a pseudo element attached to the excerpt:

   #starlight__search .pagefind-ui__result-excerpt:not(:where(.pagefind-ui__result-nested *))::after {
       content: "";
       position: absolute;
       inset: -1px;
       border: 1px solid transparent;
       border-top: 0;
   }

  Which we reveal when the title is hovered or focused:

   #starlight__search .pagefind-ui__result-title:where(:hover,:focus-within) + .pagefind-ui__result-excerpt:not(:where(.pagefind-ui__result-nested *))::after {
       border-color: var(--sl-color-accent-high);
   }

  Hover version:

  

  Focus version:

  

The weird thing about this approach is that the excerpt is still not actually hoverable to click the link over the excerpt — only on the title. Not sure if there’s a reliable way to extend the interactive area down over the excerpt without hard coding the height. Anchor positioning might help? But it doesn’t have broad support yet.

Chatted with @HiDeoo and we’re closing this in favour of our project rewriting the search UI from scratch which he is currently working on.

Any solution we try here will likely feel hacky and not fully work. #3276 should reduce the risk of users hitting this, so also reduces the urgency of a hacky fix like this.