Skip to content

fix(website): use consistent checkbox css in search filters#6495

Open
corneliusroemer wants to merge 1 commit into
mainfrom
unify-checkbox-css
Open

fix(website): use consistent checkbox css in search filters#6495
corneliusroemer wants to merge 1 commit into
mainfrom
unify-checkbox-css

Conversation

@corneliusroemer
Copy link
Copy Markdown
Contributor

@corneliusroemer corneliusroemer commented May 22, 2026

We used different css for segment filters and strictness checkbox.

The checkbox was the only one to use DaisyUI CSS classes. Replacing with the standard pattern we use for checkboxes across search UI.

Tested locally: no more jumping, consistent look.

Resolves #6483

Screenshots

Before:

Google Chrome 2026-05-22 15 57 21

After:

Google Chrome 2026-05-22 15 57 12

🚀 Preview: https://unify-checkbox-css.loculus.org

We used different css for segment filters and strictness checkbox.

The checkbox was the only one to use DaisyUI CSS classes. Replacing with the standard pattern we use for checkboxes across search UI.

Tested locally: no more jumping, consistent look.

Resolves #6483
Copilot AI review requested due to automatic review settings May 22, 2026 13:56
@claude claude Bot added the website Tasks related to the web application label May 22, 2026
@corneliusroemer corneliusroemer added the preview Triggers a deployment to argocd label May 22, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Search UI’s “strict” checkbox styling in the date range filter to match the Tailwind-based checkbox pattern used elsewhere, addressing the reported “jumping”/inconsistent appearance on page load (Issue #6483).

Changes:

  • Replaced the DateRangeField strictness checkbox’s DaisyUI classes with the standard Tailwind checkbox classes used in other SearchPage components.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 121 to 125
<span className='text-gray-400 text-sm mr-2'>strict</span>
<input
type='checkbox'
className='checkbox checkbox-sm text-3xl [--chkbg:white] [--chkfg:theme(colors.gray.700)] checked:border-gray-300'
className='h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 cursor-pointer'
checked={strictMode}
Comment thread website/src/components/SearchPage/fields/DateRangeField.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview Triggers a deployment to argocd website Tasks related to the web application

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Strictness checkbox in collection date range filter jumps on page load

2 participants