fix: prevent chat source citation clipping

[vibhor-aggr]

Summary

Closes #2408.

Prevents AI answer source/citation cards from being clipped horizontally by:

• allowing the source list to show a thin horizontal scrollbar instead of hiding the scroll affordance
• preventing individual source cards from shrinking in the flex row
• reserving right-side padding so the final card is not obscured by the fade overlay
• allowing long citation text or URLs to wrap inside the card

Verification

• npx prettier --check src/components/patterns/Searchbox/ChatSources.css
• npm run lint -- src/components/patterns/Searchbox/ChatSources.css (exits 0; CSS is ignored by the current ESLint config)
• git diff --check
• npm run build

[netlify]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	5b63b8f
🔍 Latest deploy log	https://app.netlify.com/projects/expressjscom-preview/deploys/6a7647453eaab6000892f645
😎 Deploy Preview	https://deploy-preview-2442--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 98 (🟢 up 1 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

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

[ShubhamOulkar]

Hi @vibhor-aggr, thank you for bringing up and fixing this issue.

Please add the ::before sudo element for chat-sources-scroll-container so that the gradient will appear on the left. @krzysdz pointed it out in the issue comment.

Adjust padding for chat-sources so that it will produce a non-overlapping scroller UI. As shown below.

2026-07-22.14-49-17.mp4

You can refer to the Web Content Accessibility Guidelines at https://www.w3.org/WAI/WCAG22/Techniques/general/G206

[vibhor-aggr]

Addressed in 5b63b8f3:

• added a mirrored ::before fade on the left edge
• reserved var(--space-16) padding on both inline edges so the first and last cards do not overlap either fade
• layered both fades consistently while keeping them non-interactive

Verification passed with Prettier, git diff --check, the full 2,307-page npm run build, and Playwright geometry checks at 800px and 375px widths. Both edge clearances match the 64px fade width.