WIP CSS

app/templates/index.html

@@ -35,7 +35,7 @@
 
   <!-- Header -->
   <header class="bg-surface border-b border-border shadow-sm">
-    <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+    <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between relative">
       <!-- Editable Username Form -->
       <form method="POST" action="/retrieve-token" class="flex items-center space-x-2">
         <input
@@ -43,16 +43,17 @@
           name="user_name"
           value="{{ user_name }}"
           class="bg-transparent text-muted text-sm font-medium px-2 py-1 rounded-md border border-transparent focus:border-primary focus:outline-none focus:bg-background"
-          readonly
+          size = "{{ user_name|length }}"
+          disabled
           id="usernameInput"
         />
         <button
           type="button"
           onclick="enableUsernameEdit()"
-          class="text-sm text-primary hover:underline"
+          class="text-sm text-white bg-primary px-3 py-1 rounded-md hover:bg-blue-700"
           id="editBtn"
         >
-          Edit
+          Username ändern 
         </button>
         <button
           type="submit"
@@ -62,9 +63,9 @@
           Save
         </button>
       </form>
-      <div class="text-lg font-semibold">GRNVS Tutorium</div>
+      <div class="absolute left-1/2 transform -translate-x-1/2 text-lg font-semibold text-center whitespace-nowrap">GRNVS Tutorium</div>
       <a href="/admin">
-        <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-md transition">
+        <button class="bg-primary hover:bg-blue-700 text-white px-3 py-1 rounded-md transition">
           Admin
         </button>
       </a>
@@ -135,7 +136,7 @@
       const editBtn = document.getElementById('editBtn');
       const saveBtn = document.getElementById('saveBtn');
 
-      input.removeAttribute('readonly');
+      input.removeAttribute('disabled');
       input.classList.add('border-border');
       input.focus();