Make the layout of the search cancel button flexible#15
Conversation
Updated the search component layout to use CSS Grid, allowing the cancel button to have a flexible width based on its content. This accommodates different word lengths in localized translations. - Replaced absolute positioning with CSS Grid on .dialog-frame. - Used display: contents for intermediate search containers to allow nested elements to participate in the grid. - Removed hardcoded --sl-search-cancel-space and width calculations. - Added a Playwright test to verify layout flexibility.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Merged into |
1 participant
The search component in the documentation app had a hardcoded layout for the "Cancel" button on mobile viewports, which used absolute positioning and fixed offsets. This caused issues with localized translations where "Cancel" might be significantly longer or shorter than the English original.
This change transitions the
.dialog-framecontainer to a CSS Grid layout. By usinggrid-template-columns: 1fr autoon mobile, the search input takes up the available space while the cancel button takes up only as much as it needs. To allow the deeply nested Pagefind UI elements to participate in this grid without breaking the library's required DOM structure, intermediate containers now usedisplay: contents.This approach removes the need for magic numbers and hardcoded spacing variables, making the UI more robust and internationalization-friendly.
PR created automatically by Jules for task 1611425416413641314 started by @miccy