From d62afd5673ffcb2aafde2172f10685cdecc1549f Mon Sep 17 00:00:00 2001
From: schreifuchs <kontakt@schreifuchs.ch>
Date: Fri, 7 Mar 2025 12:55:57 +0100
Subject: [PATCH] fix weird scrolling bug

---
 frontend/src/App.svelte                      | 22 ++++++++++++--------
 frontend/src/components/AuthorEditor.svelte  |  2 +-
 frontend/src/components/BookEditor.svelte    |  7 ++++---
 frontend/src/components/ClientEditor.svelte  |  6 +++---
 frontend/src/components/LendingEditor.svelte |  2 ++
 frontend/src/routes/Books.svelte             |  3 +++
 frontend/src/routes/Clients.svelte           |  2 ++
 7 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index b21cd5c..4d3638a 100644
--- a/frontend/src/App.svelte
+++ b/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>
-    <Route path="/books"><Books /></Route>
-    <Route path="/clients"><Clients /></Route>
+    <main class="mt-20">
+      <Route path="/"><Lendings clientId={null} /></Route>
+      <Route path="/books"><Books /></Route>
+      <Route path="/clients"><Clients /></Route>
 
-    <Route path="/clients/:id" let:params>
-      <Lendings clientId={parseInt(params.id)} />
-    </Route>
+      <Route path="/clients/:id" let:params>
+        <Lendings clientId={parseInt(params.id)} />
+      </Route>
+    </main>
   </Router>
-</main>
+</div>
diff --git a/frontend/src/components/AuthorEditor.svelte b/frontend/src/components/AuthorEditor.svelte
index 1177d3b..71b1b9b 100644
--- a/frontend/src/components/AuthorEditor.svelte
+++ b/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>
diff --git a/frontend/src/components/BookEditor.svelte b/frontend/src/components/BookEditor.svelte
index d3e1154..7b4cd7c 100644
--- a/frontend/src/components/BookEditor.svelte
+++ b/frontend/src/components/BookEditor.svelte
@@ -41,13 +41,13 @@
 
 <form onsubmit={submit}>
   <div class="m-5">
-    <Label>Name</Label>
-    <Input type="text" bind:value={book.Title} />
+    <Label>Title</Label>
+    <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={() => {
diff --git a/frontend/src/components/ClientEditor.svelte b/frontend/src/components/ClientEditor.svelte
index 9d97006..69ffe12 100644
--- a/frontend/src/components/ClientEditor.svelte
+++ b/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>
-    <Input type="email" bind:value={client.Email} />
+    <Label>Email</Label>
+    <Input type="email" bind:value={client.Email} required />
   </div>
 
   <div class="m-5">
diff --git a/frontend/src/components/LendingEditor.svelte b/frontend/src/components/LendingEditor.svelte
index 9ac2fbb..95d3807 100644
--- a/frontend/src/components/LendingEditor.svelte
+++ b/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">
diff --git a/frontend/src/routes/Books.svelte b/frontend/src/routes/Books.svelte
index 4b81896..c441217 100644
--- a/frontend/src/routes/Books.svelte
+++ b/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
diff --git a/frontend/src/routes/Clients.svelte b/frontend/src/routes/Clients.svelte
index b68611c..47e6cce 100644
--- a/frontend/src/routes/Clients.svelte
+++ b/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