Seekra/frontend
3
3
Fork 0
generated from Seekra/repository-template
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

Fix(search): centering of search bar on small screens #112

Merged
jakob.scheid merged 3 commits from bug/center-searchbar into main 2026-06-04 15:33:15 +02:00
Conversation 1 Commits 3 Files Changed 1
+3 -1
johannes.vos commented 2026-06-04 14:21:30 +02:00
Member
Copy Link
Copy Source

Description

This PR fixes the layout bug where the search bar appeared off-center on small viewports (such as the search results view on mobile).

The issue was caused by an asymmetric padding-left and custom width: calc(...) on the .search-wrapper. This has been replaced with a clean, symmetric padding configuration utilizing box-sizing: border-box. The necessary text indentation has been safely moved directly onto the input element instead.

Related Issues

Closes #111

Changes

  • src/features/search/components/Searchbar.vue:
    • Restructured .search-wrapper to use symmetric padding and width: 100%.
    • Added box-sizing: border-box to prevent layout overflow.
    • Moved visual text padding directly into the .search-wrapper input style.
## Description This PR fixes the layout bug where the search bar appeared off-center on small viewports (such as the search results view on mobile). The issue was caused by an asymmetric `padding-left` and custom `width: calc(...)` on the `.search-wrapper`. This has been replaced with a clean, symmetric padding configuration utilizing `box-sizing: border-box`. The necessary text indentation has been safely moved directly onto the `input` element instead. ## Related Issues Closes #111 ## Changes - **`src/features/search/components/Searchbar.vue`**: - Restructured `.search-wrapper` to use symmetric padding and `width: 100%`. - Added `box-sizing: border-box` to prevent layout overflow. - Moved visual text padding directly into the `.search-wrapper input` style.
grafik.png
21 KiB
grafik.png
johannes.vos added this to the 0.1.0 milestone 2026-06-04 14:21:30 +02:00
johannes.vos added the Area/Search Results
Priority
Medium
3
Kind/Bug labels 2026-06-04 14:21:30 +02:00
johannes.vos self-assigned this 2026-06-04 14:21:30 +02:00
johannes.vos added this to the Project Board project 2026-06-04 14:21:30 +02:00
johannes.vos added 2 commits 2026-06-04 14:21:31 +02:00
style(searchbar): make wrapper padding symmetric and set width to 100% 6d7dd7dc40
style(searchbar): apply internal text indentation to the input field 91fa06898f
johannes.vos moved this to Review in Project Board on 2026-06-04 14:22:39 +02:00
jakob.scheid added 1 commit 2026-06-04 15:32:54 +02:00
fix(search-bar): re-add left padding d9c19b252e
jakob.scheid approved these changes 2026-06-04 15:32:59 +02:00
jakob.scheid merged commit 76fda9e5c6 into main 2026-06-04 15:33:15 +02:00
jakob.scheid deleted branch bug/center-searchbar 2026-06-04 15:33:15 +02:00
jakob.scheid moved this to Done in Project Board on 2026-06-04 15:33:39 +02:00
jakob.scheid changed title from Fix centering of search bar on small screens to Fix: centering of search bar on small screens 2026-07-20 12:19:03 +02:00
jakob.scheid changed title from Fix: centering of search bar on small screens to Fix(search): centering of search bar on small screens 2026-07-20 12:28:42 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
jakob.scheid
Labels
Clear labels
Area/Global
A global issue or pull request
 Area/Search Results
An issue or pull requests related to the search results feature
 Area/Settings
The issue or pull request is related to the settings
 Area/Start page
Related to the start page
 Compat/Breaking
Breaking change that will not be backward compatible
 Kind/Bug
Something is not working
 Kind/Chore
Chore and maintainerance
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Refactor
Refactoring code
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
 Kind/Urgent
The issue or pull request is urgent
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Low
4
The priority is low
Priority
Medium
3
The priority is medium
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Will Not Fix
3
This issue will not be fixed
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
No labels Area/Search Results Kind/Bug
Priority
Medium
3
Milestone
No items
No Milestone 0.1.0
Projects
Clear projects
No projects
Project Board
Done
Assignees
Clear assignees
jakob.gregory (Jakob Gregory) jakob.scheid (Jakob Scheid) johannes.vos (Johannes Vos)
No Assignees johannes.vos
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Seekra/frontend#112