Răsfoiți Sursa

RHL-038 fix(layout): update column width in AppShell and TopNav for consistent layout

Code_Uwe 3 săptămâni în urmă
părinte
comite
e09a8abfee
2 a modificat fișierele cu 4 adăugiri și 4 ștergeri
  1. 2 2
      components/app-shell/AppShell.jsx
  2. 2 2
      components/app-shell/TopNav.jsx

+ 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 50% width.
+				- Center column is exactly 40% 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,50%)_1fr]">
+				<div className="mx-auto grid w-full gap-4 2xl:grid-cols-[1fr_minmax(0,40%)_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:

+ 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 60% center column as the AppShell content grid.
+				- Use the same 40% 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,50%)_1fr]">
+				<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,40%)_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">