fix react example styling

examples/react/src/App.tsx

@@ -8,7 +8,6 @@ import IndexPage from "~/routes/_index";
 const Admin = lazy(() => import("~/routes/admin"));
 import { Center } from "~/components/Center";
 import { ClientProvider } from "bknd/client";
-import "bknd/dist/styles.css";
 
 export default function () {
    const [app, setApp] = useState<App | undefined>(undefined);

examples/react/src/routes/_index.tsx

@@ -12,8 +12,7 @@ export default function IndexPage({ app }: { app: App }) {
    const total = todos?.body.meta.total || 0;
 
    return (
-      <div id="app">
-         <Center className="flex-col gap-10 max-w-96 mx-auto text-lg">
+      <Center className="flex-col gap-10 max-w-96 mx-auto">
          <div className="flex flex-col gap-2 items-center">
             <img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" />
             <p className="font-mono">local</p>
@@ -89,6 +88,5 @@ export default function IndexPage({ app }: { app: App }) {
                </div>*/}
          </div>
       </Center>
-      </div>
    );
 }

examples/react/src/routes/admin.tsx

@@ -1,5 +1,6 @@
 import { Admin, type BkndAdminProps } from "bknd/ui";
 import type { App } from "bknd";
+import "bknd/dist/styles.css";
 
 export default function AdminPage({
    app,

examples/react/src/styles.css

@@ -1,6 +1,5 @@
-/* @todo: currently not working nicely */
-#app {
 @import "tailwindcss";
+
 :root {
    --background: #ffffff;
    --foreground: #171717;
@@ -18,8 +17,12 @@
    --color-foreground: var(--foreground);
 }
 
-   width: 100%;
-   min-height: 100dvh;
+body {
    @apply bg-background text-foreground flex;
    font-family: Arial, Helvetica, sans-serif;
 }
+
+#root {
+   width: 100%;
+   min-height: 100dvh;
+}