fix report popup covering entries

src/app/admin/reports/BottomBar.svelte

@@ -83,10 +83,7 @@
   }
 </script>
 
-<div
-  class="absolute bottom-2 bg-base-200 rounded-lg w-[calc(100%-1rem)] mx-2 flex px-6 py-4 gap-2"
-  hidden={report === null}
->
+<div class="relative bg-base-200 rounded-lg w-[calc(100%-1rem)] m-2 flex px-6 py-4 gap-2" hidden={report === null}>
   <div class="absolute right-2 top-2">
     <div class="dropdown dropdown-end">
       <div tabindex="0" role="button" class="btn btn-sm btn-circle btn-ghost">

src/app/admin/reports/Reports.svelte

@@ -37,6 +37,7 @@
   {/if}
 {/snippet}
 
+<div class="h-screen flex flex-col justify-between">
   <DataTable
     data={reports}
     count={true}
@@ -53,3 +54,4 @@
   {#key activeReport}
     <BottomBar {strikeReasons} report={activeReport} />
   {/key}
+</div>

src/components/admin/table/DataTable.svelte

@@ -27,7 +27,7 @@
   let { data, count, keys, onClick, onEdit, onDelete }: Props<any> = $props();
 </script>
 
-<div class="h-screen overflow-x-auto">
+<div class="max-h-screen overflow-x-auto">
   <table class="table table-pin-rows">
     <thead>
       <SortableTr {data}>