fix weird scrolling bug

frontend/src/App.svelte

@@ -10,9 +10,11 @@
   let url: string = $state("/");
 </script>
 
-<main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-900">
+<div
+  class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-900 max-h-screen overflow-y-scroll overflow-x-scroll"
+>
   <Router bind:url>
-    <Navbar class="border-b">
+    <Navbar class="border-b absolute top">
       <div class="flex gap-5">
         <button
           class="grid grid-cols-3 items-center"
@@ -26,12 +28,14 @@
       </div>
       <DarkMode />
     </Navbar>
-    <Route path="/"><Lendings clientId={null} /></Route>
+    <main class="mt-20">
-    <Route path="/books"><Books /></Route>
+      <Route path="/"><Lendings clientId={null} /></Route>
-    <Route path="/clients"><Clients /></Route>
+      <Route path="/books"><Books /></Route>
+      <Route path="/clients"><Clients /></Route>
 
-    <Route path="/clients/:id" let:params>
+      <Route path="/clients/:id" let:params>
-      <Lendings clientId={parseInt(params.id)} />
+        <Lendings clientId={parseInt(params.id)} />
-    </Route>
+      </Route>
+    </main>
   </Router>
-</main>
+</div>

frontend/src/components/AuthorEditor.svelte

@@ -16,7 +16,7 @@
 <form onsubmit={submit}>
   <div class="m-5">
     <Label>Name</Label>
-    <Input type="text" bind:value={author.Name} />
+    <Input type="text" bind:value={author.Name} required />
   </div>
   <div class="m-5">
     <Button type="submit">Save</Button>

frontend/src/components/BookEditor.svelte

@@ -41,13 +41,13 @@
 
 <form onsubmit={submit}>
   <div class="m-5">
-    <Label>Name</Label>
+    <Label>Title</Label>
-    <Input type="text" bind:value={book.Title} />
+    <Input type="text" bind:value={book.Title} required />
   </div>
 
   <div class="m-5">
     <Label>ISBN</Label>
-    <Input pattern={ISBNRegex} type="text" bind:value={book.ISBN} />
+    <Input pattern={ISBNRegex} type="text" bind:value={book.ISBN} required />
   </div>
   <div class="m-5">
     <Label>Author</Label>
@@ -58,6 +58,7 @@
           return { value: a.ID, name: a.Name };
         })}
         bind:value={book.AuthorID}
+        required
       />
       <Button
         onclick={() => {

frontend/src/components/ClientEditor.svelte

@@ -16,12 +16,12 @@
 <form onsubmit={submit}>
   <div class="m-5">
     <Label>Name</Label>
-    <Input type="text" bind:value={client.Name} />
+    <Input type="text" bind:value={client.Name} required />
   </div>
 
   <div class="m-5">
-    <Label>ISBN</Label>
+    <Label>Email</Label>
-    <Input type="email" bind:value={client.Email} />
+    <Input type="email" bind:value={client.Email} required />
   </div>
 
   <div class="m-5">

frontend/src/components/LendingEditor.svelte

@@ -48,6 +48,7 @@
         return { value: b.ID, name: b.Title };
       })}
       bind:value={lending.BookID}
+      required
     />
   </div>
   <div class="m-5">
@@ -58,6 +59,7 @@
         return { value: c.ID, name: `${c.Email} ~ ${c.Name}` };
       })}
       bind:value={lending.ClientID}
+      required
     />
   </div>
   <div class="m-5">

frontend/src/routes/Books.svelte

@@ -2,6 +2,7 @@
   import {
     Badge,
     Button,
+    Heading,
     Modal,
     Spinner,
     Table,
@@ -34,6 +35,8 @@
   onMount(update);
 </script>
 
+<Heading class="m-5">Books</Heading>
+
 {#if book}
   <Modal bind:open={modal} title="Book">
     <BookEditor

frontend/src/routes/Clients.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     Button,
+    Heading,
     Modal,
     Table,
     TableBody,
@@ -32,6 +33,7 @@
   onMount(update);
 </script>
 
+<Heading class="m-5">Clients</Heading>
 {#if client}
   <Modal bind:open={modal} title="Client">
     <ClientEditor