diff --git a/apps/client/app/app.css b/apps/client/app/app.css index b075dba..ac3dee2 100644 --- a/apps/client/app/app.css +++ b/apps/client/app/app.css @@ -12,6 +12,9 @@ html, body { @apply bg-white dark:bg-[#0D0D0D]; + overflow-x: hidden; + width: 100%; + position: relative; @media (prefers-color-scheme: dark) { color-scheme: dark; diff --git a/apps/client/app/components/layout.tsx b/apps/client/app/components/layout.tsx index ebbc04e..bf58bfd 100644 --- a/apps/client/app/components/layout.tsx +++ b/apps/client/app/components/layout.tsx @@ -6,14 +6,14 @@ export default function Layout() { return (
-
+
diff --git a/apps/client/app/root.tsx b/apps/client/app/root.tsx index ad947a2..198b5b2 100644 --- a/apps/client/app/root.tsx +++ b/apps/client/app/root.tsx @@ -40,7 +40,7 @@ export function Layout({ children }: { children: React.ReactNode }) { - + diff --git a/apps/client/app/routes/home.tsx b/apps/client/app/routes/home.tsx index d96ffcb..84f990a 100644 --- a/apps/client/app/routes/home.tsx +++ b/apps/client/app/routes/home.tsx @@ -60,20 +60,20 @@ export default function Home({ loaderData }: Route.ComponentProps) { return ( <> -

Ironmount

-

+

Ironmount

+

Create, manage, monitor, and automate your volumes with ease.

-
- +
+ setSearchQuery(e.target.value)} /> {(searchQuery || statusFilter || backendFilter) && ( - @@ -101,42 +101,44 @@ export default function Home({ loaderData }: Route.ComponentProps) {
- - A list of your managed volumes. - - - Name - Backend - Mountpoint - Status - - - - {filteredVolumes.map((volume) => ( - navigate(`/volumes/${volume.name}`)} - > - {volume.name} - - - - - - - {volume.path} - - - - - - - +
+
+ A list of your managed volumes. + + + Name + Backend + Mountpoint + Status - ))} - -
+ + + {filteredVolumes.map((volume) => ( + navigate(`/volumes/${volume.name}`)} + > + {volume.name} + + + + + + + {volume.path} + + + + + + + + + ))} + + +
); }