fix: mobile layout white spaces / underlying body showing

also changed mobile layout a tiny bit

src/app.css

@@ -3,4 +3,9 @@
 
 * {
   font-family: 'Inter', sans-serif;
+  scrollbar-color: var(--color-neutral-600) transparent;
+}
+
+body {
+  background-color: var(--color-neutral-800);
 }

src/lib/server/db/repos/lowdb/userRepo.ts

@@ -29,7 +29,7 @@ export class LowUserRepo implements IUserRepo {
   }
 
   async create(user: New<User>) {
-    if (!this.db.data.users.find((u) => u.name == user.name)) {
+    if (this.db.data.users.some((u) => u.name == user.name)) {
       return UserErrors.DUPLICATE_NAME;
     }
 

src/lib/v2/snippets/ListPage.svelte

@@ -2,7 +2,7 @@
   import { Button } from 'bits-ui';
   import IconPlus from '~icons/tabler/plus';
 
-  let { createHref = null, msgAdd = '', children } = $props();
+  let { createHref = null, msgAdd = '', empty = false, children } = $props();
 </script>
 
 {#if createHref}
@@ -21,7 +21,8 @@
 <div class="w-full sm:px-6 px-3 py-4 max-w-3xl mx-auto">
   {#if children}
     {@render children?.()}
-  {:else}
+  {/if}
+  {#if empty}
     <div class="p-4 text-center text-neutral-700">
       <p>Nothing here.</p>
       {#if createHref}

src/lib/v2/ui/NavBarLink.svelte

@@ -4,10 +4,11 @@
   let { Icon = null, children, active, ...others } = $props();
 </script>
 
-<li role="none">
+<li role="none" class="grow-1">
   <Button.Root
     role="menuitem"
-    class="flex items-center cursor-pointer px-4 py-1 rounded-full transition-all duration-300 ease-in-out
+    class="flex items-center justify-center cursor-pointer px-4 py-1 rounded-full
+      transition-all duration-300 ease-in-out
 		  {active ? 'bg-neutral-100 text-neutral-900' : 'hover:bg-neutral-600'}"
     {...others}
   >

src/routes/dash/+layout.svelte

@@ -34,10 +34,12 @@
     <NavBarLink Icon={IconHome} active={isActive('devices')} href="/dash/devices"
       >Devices</NavBarLink
     >
-    <NavBarLink Icon={IconUsers} active={isActive('users')} href="/dash/users">Users</NavBarLink>
+    {#if data.user.admin}
-    <NavBarLink Icon={IconUsersGroup} active={isActive('groups')} href="/dash/groups"
+      <NavBarLink Icon={IconUsers} active={isActive('users')} href="/dash/users">Users</NavBarLink>
-      >Groups</NavBarLink
+      <NavBarLink Icon={IconUsersGroup} active={isActive('groups')} href="/dash/groups"
-    >
+        >Groups</NavBarLink
+      >
+    {/if}
   </NavBar>
   <div class="flex grow">
     <div
@@ -97,6 +99,6 @@
   </div>
 </div>
 
-<div class="w-full h-svh bg-neutral-900 overflow-y-scroll sm:pt-20 pt-28">
+<div class="w-full h-dvh bg-neutral-900 overflow-y-auto sm:pt-20 pt-28">
   {@render children()}
 </div>

src/routes/dash/devices/+page.svelte

@@ -28,7 +28,11 @@
   });
 </script>
 
-<ListPage createHref={data.user.admin ? '/dash/devices/new' : null} msgAdd="Add Device">
+<ListPage
+  createHref={data.user.admin ? '/dash/devices/new' : null}
+  empty={data.devices.length == 0}
+  msgAdd="Add Device"
+>
   <div class="flex gap-4 flex-wrap justify-center">
     {#each data.devices as device}
       <ResCard

src/routes/dash/groups/+page.svelte

@@ -8,7 +8,11 @@
   store.pageTitle = 'Listing all groups';
 </script>
 
-<ListPage createHref={data.user.admin ? '/dash/groups/new' : null} msgAdd="Add Group">
+<ListPage
+  createHref={data.user.admin ? '/dash/groups/new' : null}
+  empty={data.groups.length == 0}
+  msgAdd="Add Group"
+>
   <div class="flex gap-4 flex-wrap justify-center">
     {#each data.groups as group}
       <ResCard

src/routes/login/+page.svelte

@@ -28,7 +28,7 @@
   <title>{env.PUBLIC_SITE_NAME} - Sign In</title>
 </svelte:head>
 
-<div class="flex items-center justify-center w-svw h-svh bg-neutral-900">
+<div class="flex items-center justify-center w-svw h-dvh bg-neutral-900">
   <div
     class="flex flex-col m-4 w-full max-w-120 bg-neutral-950 p-8 sm:p-12 sm:px
       rounded-2xl border border-neutral-700 shadow-xl"