Pārlūkot izejas kodu

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

Code_Uwe 3 nedēļas atpakaļ
vecāks
revīzija
13a9e3b632

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

@@ -9,7 +9,7 @@ export default function AppShell({ children }) {
 
 			{/* 
 				Layout strategy (2xl+):
-				- Center column is exactly 40% width.
+				- Center column is exactly 45% width.
 				- Left/right gutters are flexible.
 				- Sidebar is placed in the left gutter and aligned to the right edge,
 				  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).
 			*/}
 			<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">
 						{/* 
 							Sidebar width policy:

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

@@ -158,7 +158,7 @@ export default function QuickNav() {
 						</Button>
 					</DropdownMenuTrigger>
 
-					<DropdownMenuContent align="end" className="min-w-[14rem]">
+					<DropdownMenuContent align="end" className="min-w-56">
 						<DropdownMenuLabel>Niederlassung</DropdownMenuLabel>
 						<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">
 			{/* 
 				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.
 
 				Below 2xl:
 				- Full width for usability.
 			*/}
 			<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 gap-3">
 							<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 : [];
 
+	// 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 (
 		<Table className="table-fixed">
 			<TableCaption>
@@ -44,8 +49,10 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 					<TableHead>Datei</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>
 			</TableHeader>
 
@@ -110,14 +117,14 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 								</span>
 							</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
 										variant="outline"
 										size="sm"
 										asChild
-										className="w-36 justify-start"
+										className="shrink-0"
 									>
 										<a
 											href={pdfUrl}
@@ -135,7 +142,7 @@ export default function SearchResultsTable({ routeBranch, scope, items }) {
 										variant="outline"
 										size="sm"
 										asChild
-										className="w-36 justify-start"
+										className="shrink-0"
 									>
 										<Link href={dayHref} title="Zum Ordner">
 											<FolderOpen className="h-4 w-4" />