From 41f82a8070d2a591467322f863304d5179c94710 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Mon, 4 Nov 2024 19:07:21 +0100
Subject: [PATCH] fix: make dashboard responsive again (instead of taking up
 all the space)

---
 .../dashboard/link/link_controls.tsx          |  4 +-
 .../components/dashboard/dashboard_header.tsx |  4 +-
 inertia/pages/dashboard.module.css            | 20 +++-
 inertia/pages/mantine_dashboard.tsx           | 95 ++++++++++---------
 4 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/inertia/components/dashboard/link/link_controls.tsx b/inertia/components/dashboard/link/link_controls.tsx
index 8ca5f2f..a4b4c95 100644
--- a/inertia/components/dashboard/link/link_controls.tsx
+++ b/inertia/components/dashboard/link/link_controls.tsx
@@ -74,7 +74,7 @@ export default function LinkControls({
 						onFavorite(link.id, !link.favorite, onFavoriteCallback)
 					}
 					leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />}
-					color="yellow"
+					color="var(--mantine-color-yellow-7)"
 				>
 					{link.favorite ? t('remove-favorite') : t('add-favorite')}
 				</Menu.Item>
@@ -82,7 +82,7 @@ export default function LinkControls({
 					component={InertiaLink}
 					href={appendLinkId(route('link.edit-form').path, link.id)}
 					leftSection={<GoPencil />}
-					color="var(--mantine-color-blue-4)"
+					color="blue"
 				>
 					{t('link.edit')}
 				</Menu.Item>
diff --git a/inertia/mantine/components/dashboard/dashboard_header.tsx b/inertia/mantine/components/dashboard/dashboard_header.tsx
index 26d9132..5f04d93 100644
--- a/inertia/mantine/components/dashboard/dashboard_header.tsx
+++ b/inertia/mantine/components/dashboard/dashboard_header.tsx
@@ -49,7 +49,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 									activeCollection?.id
 								)}
 								leftSection={<IoIosAddCircleOutline />}
-								color="var(--mantine-color-blue-4)"
+								color="blue"
 							>
 								{t('link.create')}
 							</Menu.Item>
@@ -60,7 +60,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 									activeCollection?.id
 								)}
 								leftSection={<GoPencil />}
-								color="var(--mantine-color-blue-4)"
+								color="blue"
 							>
 								{t('collection.edit')}
 							</Menu.Item>
diff --git a/inertia/pages/dashboard.module.css b/inertia/pages/dashboard.module.css
index 43208d6..ea77455 100644
--- a/inertia/pages/dashboard.module.css
+++ b/inertia/pages/dashboard.module.css
@@ -1,4 +1,22 @@
-.ml_bg_color {
+.app_wrapper {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.app_shell {
+	position: relative;
+	height: 100%;
+	max-width: 100%;
+	width: 1440px;
+}
+
+.ml_custom_class {
+	position: absolute !important;
 	background-color: light-dark(
 		var(--ml-bg-light),
 		var(--ml-bg-dark)
diff --git a/inertia/pages/mantine_dashboard.tsx b/inertia/pages/mantine_dashboard.tsx
index 9a0ffc7..7f11fac 100644
--- a/inertia/pages/mantine_dashboard.tsx
+++ b/inertia/pages/mantine_dashboard.tsx
@@ -39,52 +39,55 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 	return (
 		<MantineDashboardLayout>
 			<DashboardProviders {...props}>
-				<AppShell
-					layout="alt"
-					header={{ height: 50 }}
-					navbar={{
-						width: 300,
-						breakpoint: 'sm',
-						collapsed: { mobile: !openedNavbar },
-					}}
-					aside={{
-						width: 300,
-						breakpoint: 'md',
-						collapsed: { mobile: !openedAside },
-					}}
-					classNames={{
-						aside: classes.ml_bg_color,
-						footer: classes.ml_bg_color,
-						navbar: classes.ml_bg_color,
-						header: classes.ml_bg_color,
-					}}
-				>
-					<DashboardHeader
-						navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
-						aside={{ opened: openedAside, toggle: toggleAside }}
-					/>
-					<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
-					<AppShell.Main>
-						{props.activeCollection.links.length > 0 ? (
-							<ScrollArea
-								h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
-								p="md"
-							>
-								<Stack gap="xs">
-									{props.activeCollection.links.map((link) => (
-										<LinkItem key={link.id} link={link} showUserControls />
-									))}
-								</Stack>
-							</ScrollArea>
-						) : (
-							<NoLink />
-						)}
-					</AppShell.Main>
-					<DashboardAside isOpen={openedAside} toggle={toggleAside} />
-					<AppShell.Footer pl="xs" pr="xs">
-						<MantineFooter />
-					</AppShell.Footer>
-				</AppShell>
+				<div className={classes.app_wrapper}>
+					<AppShell
+						layout="alt"
+						header={{ height: 50 }}
+						navbar={{
+							width: 300,
+							breakpoint: 'sm',
+							collapsed: { mobile: !openedNavbar },
+						}}
+						aside={{
+							width: 300,
+							breakpoint: 'md',
+							collapsed: { mobile: !openedAside },
+						}}
+						classNames={{
+							aside: classes.ml_custom_class,
+							footer: classes.ml_custom_class,
+							navbar: classes.ml_custom_class,
+							header: classes.ml_custom_class,
+						}}
+						className={classes.app_shell}
+					>
+						<DashboardHeader
+							navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
+							aside={{ opened: openedAside, toggle: toggleAside }}
+						/>
+						<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
+						<AppShell.Main>
+							{props.activeCollection.links.length > 0 ? (
+								<ScrollArea
+									h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
+									p="md"
+								>
+									<Stack gap="xs">
+										{props.activeCollection.links.map((link) => (
+											<LinkItem key={link.id} link={link} showUserControls />
+										))}
+									</Stack>
+								</ScrollArea>
+							) : (
+								<NoLink key={props.activeCollection.id} />
+							)}
+						</AppShell.Main>
+						<DashboardAside isOpen={openedAside} toggle={toggleAside} />
+						<AppShell.Footer pl="xs" pr="xs">
+							<MantineFooter />
+						</AppShell.Footer>
+					</AppShell>
+				</div>
 			</DashboardProviders>
 		</MantineDashboardLayout>
 	);