From fdc9b248004a6c0ee0ccb48c3453300ee70268cd Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Mon, 20 Apr 2026 22:05:31 +0200
Subject: [PATCH] make admin page mobile friendly

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Gemini 3 <google-gemini-noreply@google.com>
---
 src/app/admin/admins/Admins.svelte            |   4 +-
 .../admin/blockedUsers/BlockedUsers.svelte    |   4 +-
 .../DirectInvitations.svelte                  |   4 +-
 src/app/admin/feedback/BottomBar.svelte       |  11 +-
 src/app/admin/feedback/Feedback.svelte        |  10 +-
 src/app/admin/reports/BottomBar.svelte        |  30 ++--
 src/app/admin/reports/Reports.svelte          |  14 +-
 src/app/admin/settings/Settings.svelte        |  24 +--
 .../admin/strikeReasons/StrikeReasons.svelte  |   6 +-
 src/app/admin/tools/AccountUuidFinder.svelte  |   6 +-
 src/app/admin/users/Users.svelte              |  14 +-
 src/components/admin/popup/CrudPopup.svelte   |  45 +++---
 src/components/admin/table/DataTable.svelte   |  21 ++-
 src/components/admin/table/SortableTh.svelte  |   4 +-
 src/components/input/Textarea.svelte          |   4 +-
 src/layouts/admin/AdminLayout.astro           | 141 +++++++++++-------
 src/pages/admin/login.astro                   |   2 +-
 src/pages/contact.astro                       |   1 -
 src/pages/index.astro                         |   6 +-
 src/pages/signup/index.astro                  |   1 -
 20 files changed, 199 insertions(+), 153 deletions(-)

diff --git a/src/app/admin/admins/Admins.svelte b/src/app/admin/admins/Admins.svelte
index 77dc506..d36e5f7 100644
--- a/src/app/admin/admins/Admins.svelte
+++ b/src/app/admin/admins/Admins.svelte
@@ -28,8 +28,8 @@
   data={admins}
   count={true}
   keys={[
-    { key: 'username', label: 'Username', width: 30 },
-    { key: 'permissions', label: 'Berechtigungen', width: 60, transform: permissionsBadge }
+    { key: 'username', label: 'Username' },
+    { key: 'permissions', label: 'Berechtigungen', transform: permissionsBadge }
   ]}
   onEdit={(admin) => (editPopupAdmin = admin)}
   onDelete={onAdminDelete}
diff --git a/src/app/admin/blockedUsers/BlockedUsers.svelte b/src/app/admin/blockedUsers/BlockedUsers.svelte
index 31c7d2d..5710b16 100644
--- a/src/app/admin/blockedUsers/BlockedUsers.svelte
+++ b/src/app/admin/blockedUsers/BlockedUsers.svelte
@@ -32,8 +32,8 @@
   data={blockedUsers}
   count={true}
   keys={[
-    { key: 'uuid', label: 'UUID', width: 20, sortable: true },
-    { key: 'comment', label: 'Kommentar', width: 70 }
+    { key: 'uuid', label: 'UUID', sortable: true },
+    { key: 'comment', label: 'Kommentar' }
   ]}
   onEdit={(blockedUser) => (blockedUserEditPopupBlockedUser = blockedUser)}
   onDelete={onBlockedUserDelete}
diff --git a/src/app/admin/directInvitations/DirectInvitations.svelte b/src/app/admin/directInvitations/DirectInvitations.svelte
index ee32e6c..1d0106f 100644
--- a/src/app/admin/directInvitations/DirectInvitations.svelte
+++ b/src/app/admin/directInvitations/DirectInvitations.svelte
@@ -21,8 +21,8 @@
   data={directInvitations}
   count={true}
   keys={[
-    { key: 'url', label: 'Link', width: 50 },
-    { key: 'user.username', label: 'Registrierter Nutzer', width: 40, sortable: true }
+    { key: 'url', label: 'Link' },
+    { key: 'user.username', label: 'Registrierter Nutzer', sortable: true }
   ]}
   onDelete={onDirectInvitationDelete}
 />
diff --git a/src/app/admin/feedback/BottomBar.svelte b/src/app/admin/feedback/BottomBar.svelte
index df8ebbb..4970bcf 100644
--- a/src/app/admin/feedback/BottomBar.svelte
+++ b/src/app/admin/feedback/BottomBar.svelte
@@ -12,15 +12,18 @@
   let { feedback }: Props = $props();
 </script>
 
-<div class="relative bg-base-200 rounded-lg w-[calc(100%-1rem)] m-2 flex px-6 py-4 gap-2" hidden={feedback === null}>
+<div
+  class="relative bg-base-200 rounded-lg w-[calc(100%-1rem)] m-2 flex flex-col lg:flex-row px-4 lg:px-6 py-4 gap-4"
+  hidden={feedback === null}
+>
   <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={() => (feedback = null)}>✕</button>
-  <div class="w-96">
+  <div class="w-full lg:w-96">
     <Input value={feedback?.event} label="Event" readonly />
     <Input value={feedback?.title} label="Titel" readonly />
     <Input value={feedback?.username} label="Nutzer" readonly />
   </div>
-  <div class="divider divider-horizontal"></div>
+  <div class="divider lg:divider-horizontal"></div>
   <div class="w-full">
-    <Textarea value={feedback?.content} label="Inhalt" rows={9} readonly dynamicWidth />
+    <Textarea value={feedback?.content} label="Inhalt" rows={6} readonly dynamicWidth />
   </div>
 </div>
diff --git a/src/app/admin/feedback/Feedback.svelte b/src/app/admin/feedback/Feedback.svelte
index c2704a6..89ce679 100644
--- a/src/app/admin/feedback/Feedback.svelte
+++ b/src/app/admin/feedback/Feedback.svelte
@@ -20,15 +20,15 @@
   {dateFormat.format(new Date(value))}
 {/snippet}
 
-<div class="h-screen flex flex-col justify-between">
+<div class="h-full flex flex-col justify-between">
   <DataTable
     data={feedbacks}
     count={true}
     keys={[
-      { key: 'event', label: 'Event', width: 10, sortable: true },
-      { key: 'username', label: 'Nutzer', width: 10, sortable: true },
-      { key: 'lastChanged', label: 'Datum', width: 10, sortable: true, transform: date },
-      { key: 'content', label: 'Inhalt', width: 10 }
+      { key: 'event', label: 'Event', sortable: true },
+      { key: 'username', label: 'Nutzer', sortable: true },
+      { key: 'lastChanged', label: 'Datum', sortable: true, transform: date },
+      { key: 'content', label: 'Inhalt' }
     ]}
     onClick={(feedback) => (activeFeedback = feedback)}
   />
diff --git a/src/app/admin/reports/BottomBar.svelte b/src/app/admin/reports/BottomBar.svelte
index 2096c6e..b74ead6 100644
--- a/src/app/admin/reports/BottomBar.svelte
+++ b/src/app/admin/reports/BottomBar.svelte
@@ -89,7 +89,10 @@
   }
 </script>
 
-<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="relative bg-base-200 rounded-lg w-[calc(100%-1rem)] m-2 flex flex-col lg:flex-row px-4 lg:px-6 py-4 gap-4"
+  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">
@@ -102,35 +105,38 @@
     </div>
     <button class="btn btn-sm btn-circle btn-ghost" onclick={() => (report = null)}>✕</button>
   </div>
-  <div class="w-[34rem]">
+  <div class="w-full lg:w-[34rem]">
     <UserSearch value={report?.reporter.username} label="Report Ersteller" readonly mustMatch />
     <UserSearch
       value={report?.reported?.username}
       label="Reporteter Spieler"
       onSubmit={(user) => (reportedUser = user)}
     />
-    <Textarea bind:value={notice} label="Interne Notizen" rows={10} />
+    <Textarea bind:value={notice} label="Interne Notizen" rows={6} />
   </div>
   <div class="w-full">
     <Input value={report?.reason} label="Grund" readonly dynamicWidth />
-    <Textarea value={report?.body} label="Inhalt" readonly dynamicWidth rows={9} />
+    <Textarea value={report?.body} label="Inhalt" readonly dynamicWidth rows={6} />
     <fieldset class="fieldset">
       <legend class="fieldset-legend">Anhänge</legend>
-      <div class="h-16.5 rounded border border-dashed flex">
+      <div class="min-h-16.5 rounded border border-dashed border-base-content/20 flex flex-wrap p-1">
         {#each reportAttachments as reportAttachment (reportAttachment.hash)}
           <div>
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <div class="cursor-zoom-in" onclick={() => (previewReportAttachment = reportAttachment)}>
+            <div class="cursor-zoom-in p-1" onclick={() => (previewReportAttachment = reportAttachment)}>
               {#if reportAttachment.type === 'image'}
                 <img
                   src={location.pathname + '/attachment/' + reportAttachment.hash}
                   alt={reportAttachment.hash}
-                  class="w-16 h-16"
+                  class="w-16 h-16 object-cover rounded"
                 />
               {:else if reportAttachment.type === 'video'}
                 <!-- svelte-ignore a11y_media_has_caption -->
-                <video src={location.pathname + '/attachment/' + reportAttachment.hash} class="w-16 h-16"></video>
+                <video
+                  src={location.pathname + '/attachment/' + reportAttachment.hash}
+                  class="w-16 h-16 object-cover rounded"
+                ></video>
               {/if}
             </div>
           </div>
@@ -138,9 +144,9 @@
       </div>
     </fieldset>
   </div>
-  <div class="divider divider-horizontal"></div>
-  <div class="flex flex-col w-[42rem]">
-    <Textarea bind:value={statement} label="Öffentliche Report Antwort" dynamicWidth rows={7} />
+  <div class="divider lg:divider-horizontal"></div>
+  <div class="flex flex-col w-full lg:w-[42rem]">
+    <Textarea bind:value={statement} label="Öffentliche Report Antwort" dynamicWidth rows={6} />
     <Select
       bind:value={status}
       values={{ open: 'In Bearbeitung', closed: 'Bearbeitet' }}
@@ -150,7 +156,7 @@
     />
     <Select bind:value={strikeReason} values={strikeReasonValues} label="Vergehen" dynamicWidth></Select>
     <div class="divider mt-0 mb-2"></div>
-    <button class="btn mt-auto" onclick={onSaveButtonClick}>Speichern</button>
+    <button class="btn btn-primary mt-auto" onclick={onSaveButtonClick}>Speichern</button>
   </div>
 </div>
 
diff --git a/src/app/admin/reports/Reports.svelte b/src/app/admin/reports/Reports.svelte
index c40c8d0..64345d6 100644
--- a/src/app/admin/reports/Reports.svelte
+++ b/src/app/admin/reports/Reports.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import BottomBar from '@app/admin/reports/BottomBar.svelte';
-  import { onMount, untrack } from 'svelte';
+  import { onMount } from 'svelte';
   import DataTable from '@components/admin/table/DataTable.svelte';
   import { type StrikeReasons, getStrikeReasons, reports } from '@app/admin/reports/reports.ts';
 
@@ -49,16 +49,16 @@
   {/if}
 {/snippet}
 
-<div class="h-screen flex flex-col justify-between">
+<div class="h-full flex flex-col justify-between">
   <DataTable
     data={reports}
     count={true}
     keys={[
-      { key: 'reason', label: 'Grund', width: 35 },
-      { key: 'reporter.username', label: 'Report Ersteller', width: 15 },
-      { key: 'reported.username', label: 'Reporteter Spieler', width: 15 },
-      { key: 'createdAt', label: 'Datum', width: 15, sortable: true, transform: date },
-      { key: 'status.status', label: 'Bearbeitungsstatus', width: 10, sortable: true, transform: status }
+      { key: 'reason', label: 'Grund' },
+      { key: 'reporter.username', label: 'Report Ersteller' },
+      { key: 'reported.username', label: 'Reporteter Spieler' },
+      { key: 'createdAt', label: 'Datum', sortable: true, transform: date },
+      { key: 'status.status', label: 'Bearbeitungsstatus', sortable: true, transform: status }
     ]}
     onClick={(report) => (activeReport = report)}
   />
diff --git a/src/app/admin/settings/Settings.svelte b/src/app/admin/settings/Settings.svelte
index 44ecc6c..30eab62 100644
--- a/src/app/admin/settings/Settings.svelte
+++ b/src/app/admin/settings/Settings.svelte
@@ -99,16 +99,16 @@
   }
 </script>
 
-<div class="h-full flex flex-col items-center justify-between">
-  <div class="grid grid-cols-2 w-full">
+<div class="min-h-full flex flex-col items-center justify-between">
+  <div class="grid grid-cols-1 lg:grid-cols-2 w-full px-4 lg:px-12 gap-8">
     {#each settingsInput as setting (setting.name)}
-      <div class="mx-12">
-        <div class="divider">{setting.name}</div>
-        <div class="flex flex-col gap-5">
+      <div class="flex flex-col">
+        <div class="divider font-bold">{setting.name}</div>
+        <div class="flex flex-col gap-6">
           {#each setting.entries as entry (entry.name)}
-            <label class="flex justify-between">
-              <span class="mt-[.125rem] text-sm w-1/2">{entry.name}</span>
-              <div class="w-1/2">
+            <label class="flex flex-col sm:flex-row justify-between gap-2">
+              <span class="text-sm font-medium sm:w-1/2">{entry.name}</span>
+              <div class="sm:w-1/2 flex sm:justify-end">
                 {#if entry.type === 'checkbox'}
                   <input
                     type="checkbox"
@@ -122,7 +122,7 @@
                 {:else if entry.type === 'text'}
                   <input
                     type="text"
-                    class="input input-bordered"
+                    class="input input-bordered w-full sm:max-w-xs"
                     onchange={(e) => {
                       entry.onChange(e.currentTarget.value);
                       changes = dynamicSettings.getChanges();
@@ -131,7 +131,7 @@
                   />
                 {:else if entry.type === 'textarea'}
                   <textarea
-                    class="textarea"
+                    class="textarea textarea-bordered w-full sm:max-w-xs min-h-24"
                     value={entry.value}
                     onchange={(e) => {
                       entry.onChange(e.currentTarget.value);
@@ -146,9 +146,9 @@
       </div>
     {/each}
   </div>
-  <div>
+  <div class="py-12">
     <button
-      class="btn btn-success mt-auto mb-8"
+      class="btn btn-success btn-lg px-12"
       class:btn-disabled={Object.keys(changes).length === 0}
       onclick={onSaveSettingsClick}>Speichern</button
     >
diff --git a/src/app/admin/strikeReasons/StrikeReasons.svelte b/src/app/admin/strikeReasons/StrikeReasons.svelte
index 3da540b..9d60ffa 100644
--- a/src/app/admin/strikeReasons/StrikeReasons.svelte
+++ b/src/app/admin/strikeReasons/StrikeReasons.svelte
@@ -32,9 +32,9 @@
   data={strikeReasons}
   count={true}
   keys={[
-    { key: 'name', label: 'Name', width: 20 },
-    { key: 'weight', label: 'Gewichtung', width: 50, sortable: true },
-    { key: 'id', label: 'Id', width: 20 }
+    { key: 'name', label: 'Name' },
+    { key: 'weight', label: 'Gewichtung', sortable: true },
+    { key: 'id', label: 'Id' }
   ]}
   onDelete={onBlockedUserDelete}
   onEdit={(strikeReason) => (editPopupStrikeReason = strikeReason)}
diff --git a/src/app/admin/tools/AccountUuidFinder.svelte b/src/app/admin/tools/AccountUuidFinder.svelte
index c341328..9ec27a9 100644
--- a/src/app/admin/tools/AccountUuidFinder.svelte
+++ b/src/app/admin/tools/AccountUuidFinder.svelte
@@ -17,9 +17,9 @@
 <fieldset class="fieldset border border-base-200 rounded-box px-4">
   <legend class="fieldset-legend">Account UUID finder</legend>
   <div>
-    <div class="flex gap-3">
-      <Input bind:value={username} />
-      <Select bind:value={edition} values={{ java: 'Java', bedrock: 'Bedrock' }} />
+    <div class="flex flex-col sm:flex-row gap-3">
+      <Input bind:value={username} dynamicWidth />
+      <Select bind:value={edition} values={{ java: 'Java', bedrock: 'Bedrock' }} dynamicWidth />
     </div>
     <div class="flex justify-center">
       <button class="btn w-4/6" class:disabled={!username} onclick={onSubmit}>UUID finden</button>
diff --git a/src/app/admin/users/Users.svelte b/src/app/admin/users/Users.svelte
index fd373b3..f4323de 100644
--- a/src/app/admin/users/Users.svelte
+++ b/src/app/admin/users/Users.svelte
@@ -47,13 +47,13 @@
   data={users}
   count={true}
   keys={[
-    { key: 'firstname', label: 'Vorname', width: 15, sortable: true },
-    { key: 'lastname', label: 'Nachname', width: 15, sortable: true },
-    { key: 'birthday', label: 'Geburtstag', width: 5, sortable: true },
-    { key: 'telephone', label: 'Telefon', width: 12, sortable: true },
-    { key: 'username', label: 'Username', width: 15, sortable: true },
-    { key: 'edition', label: 'Edition', width: 5, sortable: true, transform: edition },
-    { key: 'uuid', label: 'UUID', width: 23 }
+    { key: 'firstname', label: 'Vorname', sortable: true },
+    { key: 'lastname', label: 'Nachname', sortable: true },
+    { key: 'birthday', label: 'Geburtstag', sortable: true },
+    { key: 'telephone', label: 'Telefon', sortable: true },
+    { key: 'username', label: 'Username', sortable: true },
+    { key: 'edition', label: 'Edition', sortable: true, transform: edition },
+    { key: 'uuid', label: 'UUID' }
   ]}
   extraActions={blockAction}
   onEdit={(user) => (editPopupUser = user)}
diff --git a/src/components/admin/popup/CrudPopup.svelte b/src/components/admin/popup/CrudPopup.svelte
index 71e9c29..131365c 100644
--- a/src/components/admin/popup/CrudPopup.svelte
+++ b/src/components/admin/popup/CrudPopup.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import Input from '@components/input/Input.svelte';
   import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
   import Textarea from '@components/input/Textarea.svelte';
@@ -14,7 +14,7 @@
   let modalForm: HTMLFormElement;
 
   // types
-  interface Props<T> {
+  interface Props {
     texts: {
       title: string;
       submitButtonTitle: string;
@@ -75,7 +75,7 @@
     ['number']: {};
     ['password']: {};
     ['select']: {
-      options: Record<string, string>;
+      values: Record<string, string>;
     };
     ['tel']: {};
     ['text']: {};
@@ -93,7 +93,7 @@
   };
 
   // input
-  let { texts, target, keys = [], onSubmit, onClose, open = $bindable() }: Props<any> = $props();
+  let { texts, target, keys = [], onSubmit, onClose, open = $bindable() }: Props = $props();
 
   onInit();
 
@@ -101,10 +101,12 @@
   let submitEnabled = $state(false);
 
   $effect(() => {
-    if (!open) return;
-
-    onInit();
-    modal.show();
+    if (open) {
+      onInit();
+      modal?.show();
+    } else {
+      modal?.close();
+    }
   });
 
   $effect.pre(() => {
@@ -160,27 +162,30 @@
   }
 
   function onModalClose() {
-    setTimeout(() => {
-      open = false;
-      target = null;
-      modalForm.reset();
-      onClose?.();
-    }, 300);
+    open = false;
+    target = null;
+    modalForm.reset();
+    onClose?.();
+  }
+
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node);
+    return {
+      destroy() {
+        if (node.parentNode) node.parentNode.removeChild(node);
+      }
+    };
   }
 </script>
 
-<dialog class="modal" bind:this={modal} onclose={onModalClose}>
+<dialog class="modal fixed inset-0 z-[9999]" use:portal bind:this={modal} onclose={onModalClose}>
   <form method="dialog" class="modal-box overflow-visible" bind:this={modalForm}>
     <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
     <div class="space-y-5">
       <h3 class="text-xl font-geist font-bold">{texts.title}</h3>
       <div class="w-full flex flex-col">
         {#each keys as key (key)}
-          <div
-            class="grid grid-flow-col gap-4"
-            class:grid-cols-1={key.length === 1}
-            class:grid-cols-2={key.length === 2}
-          >
+          <div class="grid grid-cols-1 gap-x-4" class:md:grid-cols-2={key.length === 2}>
             {#each key as k (k)}
               {#if k.type === 'color' || k.type === 'date' || k.type === 'datetime-local' || k.type === 'number' || k.type === 'tel' || k.type === 'text'}
                 <Input
diff --git a/src/components/admin/table/DataTable.svelte b/src/components/admin/table/DataTable.svelte
index afb8485..0709efa 100644
--- a/src/components/admin/table/DataTable.svelte
+++ b/src/components/admin/table/DataTable.svelte
@@ -13,7 +13,6 @@
     keys: {
       key: string;
       label: string;
-      width?: number;
       sortable?: boolean;
       transform?: Snippet<[T]>;
     }[];
@@ -28,20 +27,20 @@
   let { data, count, keys, onClick, onEdit, onDelete, extraActions }: Props<any> = $props();
 </script>
 
-<div class="max-h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
+<div class="max-h-full overflow-x-auto">
+  <table class="table table-pin-rows w-full table-auto lg:w-fit lg:min-w-full mx-auto">
     <thead>
       <SortableTr {data}>
         {#if count}
-          <SortableTh style="width: 5%">#</SortableTh>
+          <SortableTh style="width: 1%" class="text-left">#</SortableTh>
         {/if}
         {#each keys as key (key.key)}
-          <SortableTh style={key.width ? `width: ${key.width}%` : undefined} key={key.sortable ? key.key : undefined}
-            >{key.label}</SortableTh
-          >
+          <SortableTh class="text-left whitespace-nowrap" key={key.sortable ? key.key : undefined}>
+            {key.label}
+          </SortableTh>
         {/each}
         {#if onEdit || onDelete || extraActions}
-          <SortableTh style="width: 5%"></SortableTh>
+          <SortableTh style="width: 1%" class="text-left"></SortableTh>
         {/if}
       </SortableTr>
     </thead>
@@ -49,10 +48,10 @@
       {#each $data as d, i (d)}
         <tr class="hover:bg-base-200" onclick={() => onClick?.(d)}>
           {#if count}
-            <td>{i + 1}</td>
+            <td class="text-left">{i + 1}</td>
           {/if}
           {#each keys as key (key.key)}
-            <td>
+            <td class="text-left whitespace-nowrap">
               {#if key.transform}
                 {@render key.transform(getObjectEntryByKey(key.key, d))}
               {:else}
@@ -61,7 +60,7 @@
             </td>
           {/each}
           {#if onEdit || onDelete || extraActions}
-            <td class="px-3 whitespace-nowrap">
+            <td class="px-3 whitespace-nowrap text-left">
               {#if extraActions}
                 {@render extraActions(d)}
               {/if}
diff --git a/src/components/admin/table/SortableTh.svelte b/src/components/admin/table/SortableTh.svelte
index 5cb3029..0272ab0 100644
--- a/src/components/admin/table/SortableTh.svelte
+++ b/src/components/admin/table/SortableTh.svelte
@@ -31,9 +31,9 @@
   }
 </script>
 
-<th {...restProps}>
+<th {...restProps} class:text-left={true}>
   {#if key}
-    <button class="flex items-center gap-1" onclick={() => onButtonClick()}>
+    <button class="flex items-center justify-start gap-1" onclick={() => onButtonClick()}>
       <span>{@render children?.()}</span>
       {#if $headerKey === key && asc}
         <span class="iconify iconify-[heroicons--chevron-up-16-solid]"></span>
diff --git a/src/components/input/Textarea.svelte b/src/components/input/Textarea.svelte
index f28dfbf..3ce9040 100644
--- a/src/components/input/Textarea.svelte
+++ b/src/components/input/Textarea.svelte
@@ -12,7 +12,7 @@
     rows?: number;
   }
 
-  let { id, value = $bindable(), label, required, readonly, size, dynamicWidth, rows }: Props = $props();
+  let { id, value = $bindable(), label, required, readonly, size, dynamicWidth, rows = 3 }: Props = $props();
 </script>
 
 <fieldset class="fieldset">
@@ -24,7 +24,7 @@
   </legend>
   <textarea
     {id}
-    class="textarea"
+    class="textarea min-h-16"
     class:textarea-sm={size === 'sm'}
     class:w-full={dynamicWidth}
     class:validator={required}
diff --git a/src/layouts/admin/AdminLayout.astro b/src/layouts/admin/AdminLayout.astro
index 9368126..f4145ef 100644
--- a/src/layouts/admin/AdminLayout.astro
+++ b/src/layouts/admin/AdminLayout.astro
@@ -82,66 +82,101 @@ const adminTabs = [
 
 <BaseLayout title={title}>
   <ClientRouter />
-  <div class="flex flex-row max-h-screen h-screen overflow-hidden">
-    <div class="bg-base-200 w-72 flex flex-col justify-between overflow-scroll">
-      <ul class="menu">
-        {
-          preTabs.map((tab) => (
-            <li>
-              <a href={tab.href}>
-                <span class="iconify" class:list={tab.iconClass} />
-                <span>{tab.name}</span>
-              </a>
-            </li>
-          ))
-        }
-        <div class="divider mx-1 my-1"></div>
-        {
-          adminTabs.map(
-            (tab) =>
-              tab.enabled && (
+  <div class="drawer lg:drawer-open">
+    <input id="admin-drawer" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content flex flex-col h-screen overflow-hidden">
+      <!-- Mobile Navbar -->
+      <div class="navbar bg-base-200 lg:hidden border-b border-base-300 shrink-0">
+        <div class="navbar-start">
+          <label for="admin-drawer" class="btn btn-square btn-ghost drawer-button">
+            <span class="iconify iconify-[heroicons--bars-3]"></span>
+          </label>
+        </div>
+        <div class="navbar-center">
+          <a class="text-xl font-bold">{title}</a>
+        </div>
+        <div class="navbar-end">
+          <!-- Optional: Profile or logout shortcut -->
+        </div>
+      </div>
+
+      <!-- Content Area -->
+      <div class="flex-1 overflow-auto relative p-4 lg:p-6">
+        <slot />
+      </div>
+    </div>
+
+    <!-- Sidebar / Drawer Side -->
+    <div class="drawer-side z-20">
+      <label for="admin-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+      <aside
+        class="bg-base-200 w-max max-w-[85vw] h-full flex flex-col justify-between border-r border-base-300 overflow-y-auto"
+      >
+        <div class="flex flex-col min-w-max">
+          <div class="p-4 hidden lg:block border-b border-base-300">
+            <span class="text-xl font-bold">Admin Panel</span>
+          </div>
+          <ul class="menu p-2">
+            {
+              preTabs.map((tab) => (
                 <li>
                   <a href={tab.href}>
                     <span class="iconify" class:list={tab.iconClass} />
                     <span>{tab.name}</span>
                   </a>
-                  {tab.subTabs && (
-                    <ul>
-                      {tab.subTabs.map((subTab) => (
-                        <li>
-                          <a href={subTab.href}>
-                            <span class="iconify" class:list={subTab.iconClass} />
-                            <span>{subTab.name}</span>
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
                 </li>
+              ))
+            }
+            <div class="divider mx-1 my-1"></div>
+            {
+              adminTabs.map(
+                (tab) =>
+                  tab.enabled && (
+                    <li>
+                      <a href={tab.href}>
+                        <span class="iconify" class:list={tab.iconClass} />
+                        <span>{tab.name}</span>
+                      </a>
+                      {tab.subTabs && (
+                        <ul>
+                          {tab.subTabs.map((subTab) => (
+                            <li>
+                              <a href={subTab.href}>
+                                <span class="iconify" class:list={subTab.iconClass} />
+                                <span>{subTab.name}</span>
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </li>
+                  )
               )
-          )
-        }
-      </ul>
-      <ul class="menu w-full">
-        {
-          Astro.slots.has('actions') && (
-            <fieldset class="fieldset bg-base-300 border-base-100 rounded-box border p-2">
-              <slot name="actions" />
-            </fieldset>
-          )
-        }
-        <div class="divider mx-1 my-0"></div>
-        <li>
-          <button id="logout">
-            <span class="iconify iconify-[heroicons--arrow-left-end-on-rectangle]"></span>
-            <span>Ausloggen</span>
-          </button>
-        </li>
-      </ul>
-    </div>
-
-    <div class="w-full overflow-scroll relative">
-      <slot />
+            }
+          </ul>
+        </div>
+        <div class="flex flex-col w-0 min-w-full">
+          <ul class="menu w-full p-2">
+            {
+              Astro.slots.has('actions') && (
+                <div class="mb-2">
+                  <span class="menu-title px-2 uppercase text-xs font-semibold opacity-60">Actions</span>
+                  <fieldset class="fieldset bg-base-300 border-base-100 rounded-box border p-2">
+                    <slot name="actions" />
+                  </fieldset>
+                </div>
+              )
+            }
+            <div class="divider mx-1 my-0"></div>
+            <li>
+              <button id="logout" class="text-error whitespace-nowrap">
+                <span class="iconify iconify-[heroicons--arrow-left-end-on-rectangle]"></span>
+                <span>Ausloggen</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </aside>
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/admin/login.astro b/src/pages/admin/login.astro
index f972407..8fcbd28 100644
--- a/src/pages/admin/login.astro
+++ b/src/pages/admin/login.astro
@@ -7,7 +7,7 @@ import Popup from '@components/popup/Popup.svelte';
 
 <AdminLoginLayout title="Login">
   <div class="flex justify-center items-center w-full h-screen">
-    <div class="card w-96 px-6 py-6 shadow-lg">
+    <div class="card w-full max-w-sm px-6 py-6 shadow-lg">
       <h1 class="text-3xl text-center">Admin Login</h1>
       <div class="divider"></div>
       <form id="login" class="flex flex-col items-center">
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 802c3d4..945d35d 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -2,7 +2,6 @@
 import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
 import ConfirmPopup from '@components/popup/ConfirmPopup.svelte';
 import Popup from '@components/popup/Popup.svelte';
-import Select from '@components/input/Select.svelte';
 import Textarea from '@components/input/Textarea.svelte';
 import Input from '@components/input/Input.svelte';
 ---
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6e852de..86bc918 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -79,9 +79,9 @@ const information = [
       <div>
         <h2 class="text-3xl text-black dark:text-white mb-8">Über uns</h2>
         <p>
-          Wir sind ein kleines <a class="link" href="admins">Team</a> von Minecraft-Enthusiasten, das bereits im 8. Jahr
-          in Folge Minecraft CraftAttack organisiert. Jahr für Jahr arbeiten wir daran, das Spielerlebnis zu verbessern und
-          steigeren die Teilnehmerzahl.
+          Wir sind ein kleines <a class="link" href="admins">Team</a> von Minecraft-Enthusiasten, das bereits im 8. Jahr in
+          Folge Minecraft CraftAttack organisiert. Jahr für Jahr arbeiten wir daran, das Spielerlebnis zu verbessern und steigeren
+          die Teilnehmerzahl.
         </p>
         <p>
           Unser Ziel bei diesem ab dem <span class="italic"
diff --git a/src/pages/signup/index.astro b/src/pages/signup/index.astro
index 041f172..c4e74eb 100644
--- a/src/pages/signup/index.astro
+++ b/src/pages/signup/index.astro
@@ -20,5 +20,4 @@ const signupDisabledSubMessage = signupSetting[SettingKey.SignupDisabledSubMessa
         message: signupDisabledMessage,
         subMessage: signupDisabledSubMessage
       }}
-  }
 />