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

Fix(navigation): 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 0.1.0 milestone 2026-06-04 13:25:51 +02:00
johannes.vos added the Area/Global
Priority
Low
4
 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 Project Board project 2026-06-04 13:25:51 +02:00
johannes.vos moved this to In progress in Project Board on 2026-06-04 13:26:15 +02:00
johannes.vos moved this to Review in Project Board 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 Project Board on 2026-06-04 13:41:12 +02:00
jakob.scheid changed title from Fix navbar alignment on mobile devices to Fix: navbar alignment on mobile devices 2026-07-20 12:18:58 +02:00
jakob.scheid changed title from Fix: navbar alignment on mobile devices to Fix(navigation): navbar alignment on mobile devices 2026-07-20 12:28:35 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
jakob.gregory
jakob.scheid
Labels
Clear labels
Area/Global
A global issue or pull request
 Area/Legal
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/Sidebar
The issue or pull request is related to the sidebar
 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/Style
Code style changes
 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/Global
Priority
Low
4
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
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Seekra/frontend#110