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): pleace search bar below navbar #98

Closed
johannes.vos wants to merge 1 commits from bugfix/search-bar-below-navbar into main
pull from: bugfix/search-bar-below-navbar
merge into: :main
Conversation 2 Commits 1 Files Changed 2
+47 -7
johannes.vos commented 2026-06-01 17:11:31 +02:00
Member
Copy Link
Copy Source

Search bar below navbar (Bugfix)

I realize that the commit isn't safe; I'll fix the problem right away.

Goal

Move the Search bar below the navbar. -> when under 1000px.

Changes

Navbar.vue

  1. Added @media (max-width: 1000px) to hide search bar from navbar on small screens

SearchResultsView.vue

  1. Imported Searchbar component and added state management for search query
  2. Added .search-bar-container below navbar, hidden by default
  3. Added @media (max-width: 1000px) to show search bar container on small screens only
  4. Styling includes proper spacing, centering, and border separator

Related issues

Closes: #97

# Search bar below navbar (Bugfix) **I realize that the commit isn't safe; I'll fix the problem right away.** ## Goal Move the Search bar below the navbar. -> when under 1000px. ## Changes ### `Navbar.vue` 1. Added @media (max-width: 1000px) to hide search bar from navbar on small screens ### `SearchResultsView.vue` 1. Imported Searchbar component and added state management for search query 2. Added .search-bar-container below navbar, hidden by default 3. Added @media (max-width: 1000px) to show search bar container on small screens only 4. Styling includes proper spacing, centering, and border separator ## Related issues Closes: #97
viewport-1000px.png
60 KiB
viewport-390px-average-width.png
53 KiB
viewport-1001px.png
60 KiB
viewport-1000px.png viewport-390px-average-width.png viewport-1001px.png
johannes.vos added this to the responsive-design-ready milestone 2026-06-01 17:11:31 +02:00
johannes.vos added the Kind/BugArea/Search Results
Priority
Critical
1
 labels 2026-06-01 17:11:31 +02:00
johannes.vos self-assigned this 2026-06-01 17:11:31 +02:00
johannes.vos added this to the Project Board project 2026-06-01 17:11:31 +02:00
johannes.vos added 1 commit 2026-06-01 17:11:31 +02:00
refactor: update search bar visibility and layout for better responsiveness 65806b2d1b
johannes.vos moved this to Review in Project Board on 2026-06-01 17:14:37 +02:00
jakob.scheid reviewed 2026-06-01 17:34:31 +02:00
src/features/nav/components/Navbar.vue
@@ -93,2 +94,4 @@
width: 70%;
}
@media (max-width: 1000px) {
jakob.scheid commented 2026-06-01 17:34:31 +02:00
Owner
Copy Link
Copy Source

That is not a major device width break.

That is not a major device width break.
johannes.vos commented 2026-06-01 18:17:13 +02:00
Author
Member
Copy Link
Copy Source

It‘s the critical width where it look bad

It‘s the critical width where it look bad
jakob.scheid commented 2026-06-01 18:30:35 +02:00
Owner
Copy Link
Copy Source

Please use 67.5rem (the width where tablets begin)

Please use `67.5rem` (the width where tablets begin)
jakob.scheid moved this to Done in Project Board on 2026-06-01 18:03:49 +02:00
jakob.scheid closed this pull request 2026-06-01 18:03:54 +02:00
johannes.vos reopened this pull request 2026-06-01 18:16:23 +02:00
jakob.scheid reviewed 2026-06-01 18:31:43 +02:00
src/features/search/views/SearchResultsView.vue
@@ -37,0 +60,4 @@
border-bottom: 1px solid var(--border);
}
@media (max-width: 1000px) {
jakob.scheid commented 2026-06-01 18:31:43 +02:00
Owner
Copy Link
Copy Source

Please use 67.5rem (the width where tablets begin)

Please use `67.5rem` (the width where tablets begin)
johannes.vos closed this pull request 2026-06-01 18:44:24 +02:00
jakob.scheid changed title from Search bar below navbar to Fix: pleace search bar below navbar 2026-07-20 12:14:34 +02:00
jakob.scheid changed title from Fix: pleace search bar below navbar to Fix(search): pleace search bar below navbar 2026-07-20 12:27:24 +02:00
jakob.scheid modified the milestone from responsive-design-ready to 0.1.0 2026-07-22 11:36:56 +02:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.
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
Critical
1
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#98