Răsfoiți Sursa

fix(layout): adjust column widths in AppShell, TopNav, and SearchResultsTable for improved alignment and usability

Code_Uwe 3 săptămâni în urmă
părinte
comite
13a9e3b632

+ 2 - 2
components/app-shell/AppShell.jsx

@@ -9,7 +9,7 @@ export default function AppShell({ children }) {
 
 
 			{/* 
 			{/* 
 				Layout strategy (2xl+):
 				Layout strategy (2xl+):
-				- Center column is exactly 40% width.
+				- Center column is exactly 45% width.
 				- Left/right gutters are flexible.
 				- Left/right gutters are flexible.
 				- Sidebar is placed in the left gutter and aligned to the right edge,
 				- Sidebar is placed in the left gutter and aligned to the right edge,
 				  so it “docks” to the centered content without consuming its width.
 				  so it “docks” to the centered content without consuming its width.
@@ -19,7 +19,7 @@ export default function AppShell({ children }) {
 				- Sidebar is hidden (it would otherwise reduce main content width).
 				- Sidebar is hidden (it would otherwise reduce main content width).
 			*/}
 			*/}
 			<div className="flex-1 px-4 py-4">
 			<div className="flex-1 px-4 py-4">
-				<div className="mx-auto grid w-full gap-4 2xl:grid-cols-[1fr_minmax(0,40%)_1fr]">
+				<div className="mx-auto grid w-full gap-4 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
 					<aside className="hidden 2xl:col-start-1 2xl:block 2xl:justify-self-end">
 					<aside className="hidden 2xl:col-start-1 2xl:block 2xl:justify-self-end">
 						{/* 
 						{/* 
 							Sidebar width policy:
 							Sidebar width policy:

+ 1 - 1
components/app-shell/QuickNav.jsx

@@ -158,7 +158,7 @@ export default function QuickNav() {
 						</Button>
 						</Button>
 					</DropdownMenuTrigger>
 					</DropdownMenuTrigger>
 
 
-					<DropdownMenuContent align="end" className="min-w-[14rem]">
+					<DropdownMenuContent align="end" className="min-w-56">
 						<DropdownMenuLabel>Niederlassung</DropdownMenuLabel>
 						<DropdownMenuLabel>Niederlassung</DropdownMenuLabel>
 						<DropdownMenuSeparator />
 						<DropdownMenuSeparator />
 
 

+ 2 - 2
components/app-shell/TopNav.jsx

@@ -11,14 +11,14 @@ export default function TopNav() {
 		<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
 		<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
 			{/* 
 			{/* 
 				TopNav alignment strategy (2xl+):
 				TopNav alignment strategy (2xl+):
-				- Use the same 40% center column as the AppShell content grid.
+				- Use the same 45% center column as the AppShell content grid.
 				- This keeps header content perfectly aligned with Explorer/Search.
 				- This keeps header content perfectly aligned with Explorer/Search.
 
 
 				Below 2xl:
 				Below 2xl:
 				- Full width for usability.
 				- Full width for usability.
 			*/}
 			*/}
 			<div className="px-4">
 			<div className="px-4">
-				<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,40%)_1fr]">
+				<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
 					<div className="flex items-center justify-between gap-3 2xl:col-start-2">
 					<div className="flex items-center justify-between gap-3 2xl:col-start-2">
 						<div className="flex items-center gap-3">
 						<div className="flex items-center gap-3">
 							<Link href="/" className="font-semibold tracking-tight">
 							<Link href="/" className="font-semibold tracking-tight">

+ 14 - 7
components/search/SearchResultsTable.jsx

@@ -28,6 +28,11 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 
 
 	const list = Array.isArray(items) ? items : [];
 	const list = Array.isArray(items) ? items : [];
 
 
+	// UI fix:
+	// - In `table-fixed` layouts, the action column must be wide enough for two buttons.
+	// - We keep the buttons content-sized (no hard w-36 per button) and prevent shrink.
+	const ACTIONS_COL_WIDTH = "w-56"; // ~14rem (tweak to w-52/w-60 if you prefer)
+
 	return (
 	return (
 		<Table className="table-fixed">
 		<Table className="table-fixed">
 			<TableCaption>
 			<TableCaption>
@@ -44,8 +49,10 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 					<TableHead>Datei</TableHead>
 					<TableHead>Datei</TableHead>
 					<TableHead className="hidden md:table-cell">Pfad</TableHead>
 					<TableHead className="hidden md:table-cell">Pfad</TableHead>
 
 
-					{/* Fixed actions column so buttons are always reachable without scrolling. */}
-					<TableHead className="w-40 text-right">Aktionen</TableHead>
+					{/* Fixed actions column: wide enough for two buttons side-by-side */}
+					<TableHead className={`${ACTIONS_COL_WIDTH} text-right`}>
+						Aktionen
+					</TableHead>
 				</TableRow>
 				</TableRow>
 			</TableHeader>
 			</TableHeader>
 
 
@@ -110,14 +117,14 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 								</span>
 								</span>
 							</TableCell>
 							</TableCell>
 
 
-							{/* Actions: fixed-width column, buttons stacked to keep width small and stable. */}
-							<TableCell className="w-40">
-								<div className="flex gap-2">
+							{/* Actions: side-by-side, right-aligned, no fixed per-button width */}
+							<TableCell className={ACTIONS_COL_WIDTH}>
+								<div className="flex items-center justify-end gap-2">
 									<Button
 									<Button
 										variant="outline"
 										variant="outline"
 										size="sm"
 										size="sm"
 										asChild
 										asChild
-										className="w-36 justify-start"
+										className="shrink-0"
 									>
 									>
 										<a
 										<a
 											href={pdfUrl}
 											href={pdfUrl}
@@ -135,7 +142,7 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 										variant="outline"
 										variant="outline"
 										size="sm"
 										size="sm"
 										asChild
 										asChild
-										className="w-36 justify-start"
+										className="shrink-0"
 									>
 									>
 										<Link href={dayHref} title="Zum Ordner">
 										<Link href={dayHref} title="Zum Ordner">
 											<FolderOpen className="h-4 w-4" />
 											<FolderOpen className="h-4 w-4" />