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

Fix navbar alignment on mobile devices #110

Merged
jakob.scheid merged 3 commits from feature/fix-navbar-alignment-on-mobile-devices into main 2026-06-04 13:40:29 +02:00
Conversation 2 Commits 3 Files Changed 2
+6 -3
johannes.vos commented 2026-06-04 13:25:51 +02:00
Member
Copy Link
Copy Source

Description

This PR fixes the alignment issue on mobile devices (e.g., iPhone 12) where the navbar items (Seekra logo and Dark/Light toggle) were sitting too far inward.

By reducing the horizontal padding from 40px to 16px on screens below 48rem (768px), the elements now push outward to align correctly with the rest of the layout's edge. Additionally, the mobile search bar wrapper padding was adjusted to match this spacing perfectly.

Related Issues

Closes #102

Changes

  • src/features/nav/components/Navbar.vue:
    • Added a media query for (max-width: 48rem) to reduce .global-nav horizontal padding to 16px.
## Description This PR fixes the alignment issue on mobile devices (e.g., iPhone 12) where the navbar items (Seekra logo and Dark/Light toggle) were sitting too far inward. By reducing the horizontal padding from `40px` to `16px` on screens below `48rem` (`768px`), the elements now push outward to align correctly with the rest of the layout's edge. Additionally, the mobile search bar wrapper padding was adjusted to match this spacing perfectly. ## Related Issues Closes #102 ## Changes - **`src/features/nav/components/Navbar.vue`**: - Added a media query for `(max-width: 48rem)` to reduce `.global-nav` horizontal padding to `16px`.
grafik.png
18 KiB
grafik.png
johannes.vos added this to the mvp-frontend milestone 2026-06-04 13:25:51 +02:00
johannes.vos added the area/global
prio
low
 labels 2026-06-04 13:25:51 +02:00
johannes.vos self-assigned this 2026-06-04 13:25:51 +02:00
johannes.vos added this to the MVP Frontend project 2026-06-04 13:25:51 +02:00
johannes.vos moved this to In progress in MVP Frontend on 2026-06-04 13:26:15 +02:00
johannes.vos moved this to Review in MVP Frontend on 2026-06-04 13:26:18 +02:00
jakob.gregory approved these changes 2026-06-04 13:27:59 +02:00
jakob.scheid approved these changes 2026-06-04 13:39:55 +02:00
jakob.scheid added 3 commits 2026-06-04 13:39:59 +02:00
style(nav): reduce navbar horizontal padding on small screens for better alignment 98579b726b
move main content padding CSS variables to the app wrapper 592eb7222f
feat(navbar-padding): use the responsivity of the main content padding CSS variables c919263c36
jakob.scheid force-pushed feature/fix-navbar-alignment-on-mobile-devices from da912fcbf5 to c919263c36 2026-06-04 13:39:59 +02:00 Compare
jakob.scheid merged commit 37515268d7 into main 2026-06-04 13:40:29 +02:00
jakob.scheid deleted branch feature/fix-navbar-alignment-on-mobile-devices 2026-06-04 13:40:30 +02:00
jakob.scheid moved this to Done in MVP Frontend on 2026-06-04 13:41:12 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
jakob.gregory
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/global
prio
low
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
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Seekra/frontend#110
Delete Branch "feature/fix-navbar-alignment-on-mobile-devices"

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?