style: header, navigation und _app.tsx

pages/_app.tsx

@@ -47,7 +47,10 @@ function MyApp({ Component, pageProps }: AppProps) {
   const [theme, setTheme] = useState(muiTheme);
   useEffect(() => {
     const observer = new MutationObserver(() => setTheme(buildTheme()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
     return () => observer.disconnect();
   }, []);
   return (
@@ -160,8 +163,8 @@ function AppContent({
     <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
       <Header />
       <div className="flex flex-grow w-full">
-        <Navigation className="w-56" />
-        <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
+        <Navigation className="w-56 mr-8" />
+        <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-base rounded-lg m-1 p-1 overflow-auto relative">
           {sessionExpired && (
             <div className="bg-red-500 text-white p-4 text-center">
               ❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist