WIP

components/search/SearchForm.jsx

@@ -54,26 +54,47 @@ export default function SearchForm({
 					- Use a responsive grid that becomes 3 columns on lg+
 					- Align items to the bottom so labels line up nicely.
 				*/}
-				<div className="grid gap-3 lg:grid-cols-[auto_1fr_auto] lg:items-end">
-					{/* 1) Scope (admin/dev only) */}
-					{isAdminDev ? (
-						<SearchScopeSelect
-							branch={branch}
-							scope={scope}
-							onScopeChange={onScopeChange}
+				<div className="flex items-start justify-between gap-3 flex-nowrap">
+					<div className="flex justify-start gap-2 items-center">
+						{/* 1) Scope (admin/dev only) */}
+						{isAdminDev ? (
+							<SearchScopeSelect
+								branch={branch}
+								scope={scope}
+								onScopeChange={onScopeChange}
+								isSubmitting={isSubmitting}
+							/>
+						) : null}
+
+						{/* 
+					Admin/dev: SINGLE branch selection.
+					We keep this *below* the main row so the top row stays exactly:
+					Scope | Query | Limit
+				*/}
+						{isAdminDev && scope === SEARCH_SCOPE.SINGLE ? (
+							<div>
+								<SearchSingleBranchCombobox
+									branch={branch}
+									branchesStatus={branchesStatus}
+									availableBranches={availableBranches}
+									onSingleBranchChange={onSingleBranchChange}
+									isSubmitting={isSubmitting}
+								/>
+							</div>
+						) : null}
+					</div>
+
+					<div className="flex flex-1">
+						{/* 2) Query (always) */}
+						<SearchQueryBox
+							qDraft={qDraft}
+							onQDraftChange={onQDraftChange}
+							onSubmit={onSubmit}
+							currentQuery={currentQuery}
 							isSubmitting={isSubmitting}
+							canSearch={canSearch}
 						/>
-					) : null}
-
-					{/* 2) Query (always) */}
-					<SearchQueryBox
-						qDraft={qDraft}
-						onQDraftChange={onQDraftChange}
-						onSubmit={onSubmit}
-						currentQuery={currentQuery}
-						isSubmitting={isSubmitting}
-						canSearch={canSearch}
-					/>
+					</div>
 
 					{/* 3) Limit (always) */}
 					<SearchLimitSelect
@@ -88,7 +109,7 @@ export default function SearchForm({
 					We keep this *below* the main row so the top row stays exactly:
 					Scope | Query | Limit
 				*/}
-				{isAdminDev && scope === SEARCH_SCOPE.SINGLE ? (
+				{/* {isAdminDev && scope === SEARCH_SCOPE.SINGLE ? (
 					<div>
 						<SearchSingleBranchCombobox
 							branch={branch}
@@ -98,7 +119,7 @@ export default function SearchForm({
 							isSubmitting={isSubmitting}
 						/>
 					</div>
-				) : null}
+				) : null} */}
 			</form>
 
 			{/* Multi scope branch picker remains below the form row (as requested). */}

components/search/SearchPage.jsx

@@ -201,63 +201,61 @@ export default function SearchPage({ branch: routeBranch }) {
 			- We intentionally cap the content to ~60% (centered) to improve readability.
 			- On smaller screens we keep full width for usability.
 		*/
-		<div className="w-full lg:w-[60%] lg:mx-auto">
-			<ExplorerPageShell
+		<ExplorerPageShell
+			title="Suche"
+			description={`Lieferscheine durchsuchen • Niederlassung ${routeBranch}`}
+			actions={actions}
+		>
+			<ExplorerSectionCard
 				title="Suche"
-				description={`Lieferscheine durchsuchen • Niederlassung ${routeBranch}`}
-				actions={actions}
+				description="Suchbegriff und Suchbereich auswählen."
+			>
+				<SearchForm
+					branch={routeBranch}
+					qDraft={qDraft}
+					onQDraftChange={setQDraft}
+					onSubmit={handleSubmit}
+					currentQuery={urlState.q}
+					isSubmitting={query.status === "loading"}
+					isAdminDev={isAdminDev}
+					scope={urlState.scope}
+					onScopeChange={handleScopeChange}
+					onSingleBranchChange={handleSingleBranchChange}
+					availableBranches={
+						branchesQuery.status === BRANCH_LIST_STATE.READY &&
+						Array.isArray(branchesQuery.branches)
+							? branchesQuery.branches
+							: []
+					}
+					branchesStatus={branchesQuery.status}
+					selectedBranches={urlState.branches}
+					onToggleBranch={handleToggleBranch}
+					onClearAllBranches={handleClearAllBranches}
+					limit={urlState.limit}
+					onLimitChange={handleLimitChange}
+				/>
+			</ExplorerSectionCard>
+
+			<ExplorerSectionCard
+				title="Ergebnisse"
+				description={resultsDescription}
+				headerRight={resultsHeaderRight}
 			>
-				<ExplorerSectionCard
-					title="Suche"
-					description="Suchbegriff und Suchbereich auswählen."
-				>
-					<SearchForm
-						branch={routeBranch}
-						qDraft={qDraft}
-						onQDraftChange={setQDraft}
-						onSubmit={handleSubmit}
-						currentQuery={urlState.q}
-						isSubmitting={query.status === "loading"}
-						isAdminDev={isAdminDev}
-						scope={urlState.scope}
-						onScopeChange={handleScopeChange}
-						onSingleBranchChange={handleSingleBranchChange}
-						availableBranches={
-							branchesQuery.status === BRANCH_LIST_STATE.READY &&
-							Array.isArray(branchesQuery.branches)
-								? branchesQuery.branches
-								: []
-						}
-						branchesStatus={branchesQuery.status}
-						selectedBranches={urlState.branches}
-						onToggleBranch={handleToggleBranch}
-						onClearAllBranches={handleClearAllBranches}
-						limit={urlState.limit}
-						onLimitChange={handleLimitChange}
-					/>
-				</ExplorerSectionCard>
-
-				<ExplorerSectionCard
-					title="Ergebnisse"
-					description={resultsDescription}
-					headerRight={resultsHeaderRight}
-				>
-					<SearchResults
-						branch={routeBranch}
-						scope={urlState.scope}
-						status={query.status}
-						items={query.items}
-						total={query.total}
-						error={mappedError}
-						onRetry={query.retry}
-						nextCursor={query.nextCursor}
-						onLoadMore={query.loadMore}
-						isLoadingMore={query.isLoadingMore}
-						loadMoreError={mappedLoadMoreError}
-						needsBranchSelection={needsBranchSelection}
-					/>
-				</ExplorerSectionCard>
-			</ExplorerPageShell>
-		</div>
+				<SearchResults
+					branch={routeBranch}
+					scope={urlState.scope}
+					status={query.status}
+					items={query.items}
+					total={query.total}
+					error={mappedError}
+					onRetry={query.retry}
+					nextCursor={query.nextCursor}
+					onLoadMore={query.loadMore}
+					isLoadingMore={query.isLoadingMore}
+					loadMoreError={mappedLoadMoreError}
+					needsBranchSelection={needsBranchSelection}
+				/>
+			</ExplorerSectionCard>
+		</ExplorerPageShell>
 	);
 }

components/search/form/SearchMultiBranchPicker.jsx

@@ -168,7 +168,7 @@ export default function SearchMultiBranchPicker({
 							- Checked state highlights the whole tile (border + background)
 							- Keep it compact so it still works with many branches
 						*/}
-						<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
+						<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
 							{branchOptions.map((b) => {
 								const id = String(b);
 								const checked = selectedSet.has(id);
@@ -204,10 +204,7 @@ export default function SearchMultiBranchPicker({
 										/>
 
 										<div className="grid gap-1.5 font-normal">
-											<p className="text-sm leading-none font-medium">{id}</p>
-											<p className="text-xs text-muted-foreground">
-												In Suche einbeziehen
-											</p>
+											<p className="text-xs  font-medium">{id}</p>
 										</div>
 									</Label>
 								);

components/search/form/SearchQueryBox.jsx

@@ -27,6 +27,7 @@ export default function SearchQueryBox({
 					onChange={(e) => onQDraftChange(e.target.value)}
 					placeholder="z. B. Bridgestone, Rechnung, Kundennummer…"
 					disabled={isSubmitting}
+					className="flex-1"
 				/>
 
 				<Button type="submit" disabled={!canSearch || isSubmitting}>

components/search/form/SearchScopeSelect.jsx

@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 const SCOPE_LABELS = Object.freeze({
-	[SEARCH_SCOPE.SINGLE]: "Diese Niederlassung",
+	[SEARCH_SCOPE.SINGLE]: "Eine Niederlassung",
 	[SEARCH_SCOPE.MULTI]: "Mehrere Niederlassungen",
 	[SEARCH_SCOPE.ALL]: "Alle Niederlassungen",
 });

components/search/form/SearchSingleBranchCombobox.jsx

@@ -63,7 +63,7 @@ export default function SearchSingleBranchCombobox({
 						role="combobox"
 						aria-expanded={open}
 						disabled={isSubmitting}
-						className="w-full justify-between sm:w-[18rem]"
+						className="w-full justify-between sm:w-40"
 						title="Niederlassung auswählen"
 					>
 						{branch}
@@ -71,10 +71,10 @@ export default function SearchSingleBranchCombobox({
 					</Button>
 				</PopoverTrigger>
 
-				<PopoverContent align="start" className="w-[18rem] p-0">
+				<PopoverContent align="start" className="w-40 p-0">
 					{listReady ? (
 						<Command>
-							<CommandInput placeholder="Niederlassung suchen…" />
+							<CommandInput placeholder="Suche…" />
 							<CommandList>
 								<CommandEmpty>Keine Treffer.</CommandEmpty>
 								<CommandGroup>