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

Fix 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 mvp-frontend milestone 2026-06-04 14:21:30 +02:00
johannes.vos added the
area
search-results
prio
medium
type
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 MVP Frontend 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 MVP Frontend 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 MVP Frontend on 2026-06-04 15:33:39 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
jakob.scheid
Labels
Clear labels
area/global
area
search-results
area
settings
area
startpage
prio
critical
prio
high
prio
low
prio
medium
type
bug
type
chore
type
docs
type
feature
type
refactor
type
testing
type/urgent
No Label
area
search-results
prio
medium
type
bug
Milestone
No items
No Milestone mvp-frontend
Projects
Clear projects
No project MVP Frontend
Assignees
Clear assignees
jakob.gregory (Jakob Gregory) jakob.scheid (Jakob Scheid) johannes.vos (Johannes D. Vos)
No Assignees johannes.vos
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Seekra/frontend#112
Delete Branch "bug/center-searchbar"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?