From 71d0e81ebd1f806667cb268c7a68d6136424528f Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Fri, 6 Dec 2024 16:34:35 +0100
Subject: [PATCH] NORY-15: improve root layout and styling

---
 dashboard/src/app/globals.css              |  2 +-
 dashboard/src/app/layout.tsx               | 12 ++++++------
 dashboard/src/app/user/data-table.tsx      |  4 +---
 dashboard/src/app/user/page.tsx            | 16 +++++++---------
 dashboard/src/components/ui/data-table.tsx |  1 +
 5 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/dashboard/src/app/globals.css b/dashboard/src/app/globals.css
index 0766540..262da57 100644
--- a/dashboard/src/app/globals.css
+++ b/dashboard/src/app/globals.css
@@ -73,6 +73,6 @@
     }
 
     body {
-        @apply bg-background text-foreground;
+        @apply bg-sidebar text-foreground;
     }
 }
\ No newline at end of file
diff --git a/dashboard/src/app/layout.tsx b/dashboard/src/app/layout.tsx
index 51548bd..94cc7a8 100644
--- a/dashboard/src/app/layout.tsx
+++ b/dashboard/src/app/layout.tsx
@@ -35,7 +35,7 @@ export const metadata = {
 };
 
 export const viewport: Viewport = {
-    themeColor: '#0B0908',
+    themeColor: '#18181b',
     width: 'device-width',
 };
 
@@ -56,10 +56,10 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
             enableSystem
             disableTransitionOnChange
         >
-            <SidebarProvider>
+            <SidebarProvider className="max-h-screen min-h-screen">
                 <AppSidebar className="mx-1"/>
-                <SidebarInset className="p-2">
-                    <header className="flex h-16 shrink-0 items-center gap-2 px-4">
+                <SidebarInset className="overflow-hidden p-6 space-y-6">
+                    <header className="flex h-4 items-center gap-2">
                         <SidebarTrigger className="-ml-1 p-1"/>
                         <Separator orientation="vertical" className="mr-2 h-4"/>
                         {
@@ -75,12 +75,12 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
                             </BreadcrumbList>
                         </Breadcrumb>
                     </header>
-                    <div className="flex flex-col p-4 pt-0">
+                    <div className="flex-1 overflow-scroll">
                         {children}
-                        <Toaster/>
                     </div>
                 </SidebarInset>
             </SidebarProvider>
+            <Toaster/>
         </ThemeProvider>
         </body>
         </html>
diff --git a/dashboard/src/app/user/data-table.tsx b/dashboard/src/app/user/data-table.tsx
index 124e07d..f68d10e 100644
--- a/dashboard/src/app/user/data-table.tsx
+++ b/dashboard/src/app/user/data-table.tsx
@@ -80,7 +80,5 @@ export function IdentityDataTable({ data }: IdentityDataTableProps) {
         },
     ];
 
-    return (
-        <DataTable columns={columns} data={data}/>
-    );
+    return <DataTable columns={columns} data={data}/>;
 }
diff --git a/dashboard/src/app/user/page.tsx b/dashboard/src/app/user/page.tsx
index dd7417e..ff0eecc 100644
--- a/dashboard/src/app/user/page.tsx
+++ b/dashboard/src/app/user/page.tsx
@@ -1,5 +1,4 @@
-import React, { Suspense } from 'react';
-import { DataTableFallback } from '@/components/ui/data-table-fallback';
+import React from 'react';
 import { IdentityDataTable } from '@/app/user/data-table';
 import { getIdentityApi } from '@/ory/sdk/server';
 import { SearchInput } from '@/components/search-input';
@@ -23,17 +22,16 @@ export default async function UserPage(
     }).then(response => response.data);
 
     return (
-        <div className="flex flex-col space-y-4">
+        <div className="space-y-4">
             <div>
                 <p className="text-3xl font-bold leading-tight tracking-tight">Users</p>
-                <p className="text-lg font-light">See and manage all identities registered with your Ory Kratos
-                    instance</p>
+                <p className="text-lg font-light">
+                    See and manage all identities registered with your Ory Kratos instance
+                </p>
             </div>
-            <div className="flex flex-col space-y-2">
+            <div className="space-y-2">
                 <SearchInput queryParamKey="query" placeholder="Search"/>
-                <Suspense fallback={<DataTableFallback columnCount={5} rowCount={20}/>}>
-                    <IdentityDataTable data={data}/>
-                </Suspense>
+                <IdentityDataTable data={data}/>
             </div>
         </div>
     );
diff --git a/dashboard/src/components/ui/data-table.tsx b/dashboard/src/components/ui/data-table.tsx
index e5698ac..125509e 100644
--- a/dashboard/src/components/ui/data-table.tsx
+++ b/dashboard/src/components/ui/data-table.tsx
@@ -2,6 +2,7 @@
 
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import React from 'react';
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];