feat(app): flex-based layout

unionlabs · May 30, 2024 · f624ebf · f624ebf
1 parent 137fba7
commit f624ebf
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/app/src/app.html b/app/src/app.html
@@ -11,7 +11,7 @@
 </head>
 
 <body data-sveltekit-prefetch data-sveltekit-preload-data="hover" data-sveltekit-preload-code="hover">
-  <div class="size-screen flex flex-col">%sveltekit.body%</div>
+  <div class="max-w-screen h-screen max-h-screen flex flex-col">%sveltekit.body%</div>
 </body>
 
 </html>
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -18,6 +18,7 @@ import PreloadingIndicator from "$lib/components/preloading-indicator.svelte"
 import { QueryClient, MutationCache, notifyManager } from "@tanstack/svelte-query"
 import { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"
+    import { cn } from "$lib/utilities/shadcn";
 
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 
@@ -108,7 +109,7 @@ $: if ($navigating) console.log("Navigating to", $page.url.pathname)
   <Toaster position="bottom-right" />
 
   <Header />
-  <div class="flex-1"><slot /></div>
+  <slot />
   <Footer />
   <SvelteQueryDevtools
     position="bottom"

diff --git a/app/src/routes/explorer/+layout.svelte b/app/src/routes/explorer/+layout.svelte
@@ -1,13 +1,14 @@
 <script>
     import { cn } from "$lib/utilities/shadcn";
 </script>
-<div class="flex flex-row h-full flex-1">
+
+<main class="flex flex-row flex-1 overflow-y-hidden">
   <nav class={cn("flex flex-col border-solid border-r border-red-500 w-40")}>
     <a href="/explorer/blocks">blocks</a>
     <a href="/explorer/connections">connections</a>
   </nav>
 
-  <div class="flex-1">
+  <div class="flex-1 overflow-y-scroll">
     <slot/>
   </div>
-</div>
+</main>
diff --git a/app/src/routes/explorer/blocks/+page.svelte b/app/src/routes/explorer/blocks/+page.svelte
@@ -135,8 +135,8 @@ $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
 })
 </script>
 
-<main class="mb-12 mt-10 flex size-full min-size-full flex-col items-center justify-center">
-  <div class="rounded-md border-2 space-y-2 h-min max-h-[600px] overflow-auto w-6xl bg-card">
+<main class="p-4">
+  <div class="rounded-md border-2 space-y-2 h-min overflow-auto w-6xl bg-card">
     <div
       bind:this={virtualListElement}
       class={cn('rounded-md border border-secondary border-solid')}

diff --git a/app/src/routes/transfer/+page.svelte b/app/src/routes/transfer/+page.svelte
@@ -55,7 +55,7 @@ onMount(() => {
 export let data: PageData
 const { chains, assets } = data
 
-const devBorder = 0 && "outline outline-[1px] outline-pink-200/40"
+// const devBorder = 0 && "outline outline-[1px] outline-pink-200/40"
 
 const queryParams = queryParameters(
   {