fix: make dashboard responsive again (instead of taking up all the space)

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>

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>

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)

inertia/pages/mantine_dashboard.tsx

@@ -39,6 +39,7 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 	return (
 		<MantineDashboardLayout>
 			<DashboardProviders {...props}>
+				<div className={classes.app_wrapper}>
 					<AppShell
 						layout="alt"
 						header={{ height: 50 }}
@@ -53,11 +54,12 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 							collapsed: { mobile: !openedAside },
 						}}
 						classNames={{
-						aside: classes.ml_bg_color,
-						footer: classes.ml_bg_color,
-						navbar: classes.ml_bg_color,
-						header: classes.ml_bg_color,
+							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 }}
@@ -77,7 +79,7 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 									</Stack>
 								</ScrollArea>
 							) : (
-							<NoLink />
+								<NoLink key={props.activeCollection.id} />
 							)}
 						</AppShell.Main>
 						<DashboardAside isOpen={openedAside} toggle={toggleAside} />
@@ -85,6 +87,7 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 							<MantineFooter />
 						</AppShell.Footer>
 					</AppShell>
+				</div>
 			</DashboardProviders>
 		</MantineDashboardLayout>
 	);