RHL-038 fix(search): adjust SearchPage layout for improved readability on desktop

components/search/SearchPage.jsx

@@ -11,7 +11,6 @@ import { isValidBranchParam } from "@/lib/frontend/params";
 
 import {
 	parseSearchUrlState,
-	serializeSearchUrlState,
 	SEARCH_SCOPE,
 } from "@/lib/frontend/search/urlState";
 import { normalizeSearchUrlStateForUser } from "@/lib/frontend/search/normalizeState";
@@ -196,61 +195,69 @@ export default function SearchPage({ branch: routeBranch }) {
 	});
 
 	return (
-		<ExplorerPageShell
-			title="Suche"
-			description={`Lieferscheine durchsuchen • Niederlassung ${routeBranch}`}
-			actions={actions}
-		>
-			<ExplorerSectionCard
+		/*
+			RHL-038:
+			- The Search page felt “too wide” on desktop.
+			- 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
 				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}
+				description={`Lieferscheine durchsuchen • Niederlassung ${routeBranch}`}
+				actions={actions}
 			>
-				<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>
+				<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>
 	);
 }