From 7717a82d5cb1c68c4c4fc78ff0275b7d5e6a3164 Mon Sep 17 00:00:00 2001
From: Michael Kaufmann <d00p@froxlor.org>
Date: Sat, 11 Nov 2023 14:53:18 +0100
Subject: [PATCH] adjust searchbar-size for better ux, fixes #1197

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>
---
 templates/Froxlor/assets/scss/components/_search.scss | 3 ++-
 templates/Froxlor/userarea.html.twig                  | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/templates/Froxlor/assets/scss/components/_search.scss b/templates/Froxlor/assets/scss/components/_search.scss
index 9a33495f..cbf0950b 100644
--- a/templates/Froxlor/assets/scss/components/_search.scss
+++ b/templates/Froxlor/assets/scss/components/_search.scss
@@ -17,7 +17,8 @@
 		position: absolute;
 		top: 2.75rem;
 		z-index: 50;
-		width: 70vh;
+		width: 90vw;
+		max-width: 750px;
 		max-height: 50vh;
 
 		background: $search-bg;
diff --git a/templates/Froxlor/userarea.html.twig b/templates/Froxlor/userarea.html.twig
index 9d540683..608a55cd 100644
--- a/templates/Froxlor/userarea.html.twig
+++ b/templates/Froxlor/userarea.html.twig
@@ -27,7 +27,7 @@
 			<a class="navbar-brand me-0 {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
 				<img src="{{ header_logo }}" alt="logo" class="header-logo d-inline-block align-text-top ms-md-3">
 			</a>
-			<div class="order-0 order-md-1 d-flex flex-grow-0 flex-md-grow-1" id="navbar">
+			<div class="order-0 order-md-1 d-flex flex-grow-0 flex-md-grow-auto" id="navbar">
 				<ul class="navbar-nav ms-md-auto me-3 me-lg-5">
 					<a class="nav-link d-md-none" data-bs-toggle="collapse" href="#collapseSearch" role="button" aria-expanded="false" aria-controls="collapseSearch">
 						<i class="fa-solid fa-search text-body-secondary"></i>
@@ -77,10 +77,10 @@
 				</ul>
 			</div>
 			<div class="order-1 order-md-0 collapse navbar-collapse" id="collapseSearch">
-				<form class="ms-3 mt-3 ms-lg-5 my-md-0" id="search" method="post">
-					<div class="d-flex align-items-center">
+				<form class="ms-3 mt-3 ms-lg-5 my-md-0 w-100" id="search" method="post">
+					<div class="d-flex align-items-center w-100">
 						<i class="fa-solid fa-search text-body-secondary"></i>
-						<input tabindex="1" class="search-input" title="search" type="search" placeholder="{{ lng('panel.search') }}...">
+						<input tabindex="1" class="search-input w-75" title="search" type="search" placeholder="{{ lng('panel.search') }}...">
 					</div>
 					<div class="search-results-box p-2 shadow" style="display:none;">
 						<div class="search-results list-group-flush"></div>