Skip to content

Fix search bar layout on narrow screens#1847

Merged
UnniKohonen merged 3 commits intomainfrom
fix-search-bar-layout-on-narrow-screens
Dec 3, 2025
Merged

Fix search bar layout on narrow screens#1847
UnniKohonen merged 3 commits intomainfrom
fix-search-bar-layout-on-narrow-screens

Conversation

@UnniKohonen
Copy link
Contributor

@UnniKohonen UnniKohonen commented Dec 3, 2025 •
edited
Loading

Reasons for creating this PR

Vocab and global search bar layout breaks on narrower screens, this PR fixes that.

Description of the changes in this PR

  • Fix layout for headerbar and global search bar on narrow screens
    • Force search bar elements to stay together
    • On narrow screens (below bootstrap xl breakpoint), put search bar below vocab title/global search text
  • Make search button square

Known problems or uncertainties in this PR

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@UnniKohonen UnniKohonen added this to the 3.0 milestone Dec 3, 2025
@UnniKohonen UnniKohonen self-assigned this Dec 3, 2025
@sonarqubecloud
Copy link

sonarqubecloud bot commented Dec 3, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
4.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@UnniKohonen UnniKohonen requested a review from osma December 3, 2025 11:30
osma
osma approved these changes Dec 3, 2025
View reviewed changes
Copy link
Member

@osma osma left a comment

Choose a reason for hiding this comment

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

LGTM. I tested both Firefox and Chromium and couldn't find any issues. Certainly better than what we had before!

@UnniKohonen UnniKohonen merged commit 5c01dac into main Dec 3, 2025
15 of 16 checks passed
@github-project-automation github-project-automation bot moved this to Issue/PR closed in Skosmos 3.x Backlog Dec 3, 2025
@UnniKohonen UnniKohonen deleted the fix-search-bar-layout-on-narrow-screens branch December 3, 2025 11:45
@UnniKohonen UnniKohonen moved this from Issue/PR closed to Done (verified in test.dev.finto.fi, set Milestone 3.0 for both issue & PR, update docs) in Skosmos 3.x Backlog Dec 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@osma osma osma approved these changes

Assignees

@UnniKohonen UnniKohonen

Labels

enhancement

Projects

None yet

Milestone

3.0

Development

Successfully merging this pull request may close these issues.

2 participants

@UnniKohonen @osma