From abfa4890ac2319bfe2e2cfbb05bfbdfa276e1d80 Mon Sep 17 00:00:00 2001
From: nexxo <nexxo@clupilot.local>
Date: Tue, 4 Aug 2026 07:57:27 +0200
Subject: [PATCH] Die Einladenzeile im Portal springt nicht mehr
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Arbeit der Parallelsitzung an der Mitarbeiterverwaltung, hier nur eingecheckt
— nicht von mir geschrieben.

`sm:items-end` richtete die drei Felder unten aus. Der Fehler unter der
E-Mail und der Hinweis unter der Rolle machten ihre Zelle hoeher und schoben
damit deren Eingabefelder nach oben: drei Felder auf drei Hoehen, und je
nachdem, ob gerade ein Fehler stand, sprang die Zeile.

Jetzt `items-start` mit gleich hohen Beschriftungen; Fehler und Hinweis stehen
unter der Zeile, wo sie niemanden mehr verschieben.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 resources/views/livewire/users.blade.php | 73 ++++++++++++++++--------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/resources/views/livewire/users.blade.php b/resources/views/livewire/users.blade.php
index ce56378..b31bc85 100644
--- a/resources/views/livewire/users.blade.php
+++ b/resources/views/livewire/users.blade.php
@@ -14,30 +14,57 @@
     {{-- Anlegen. Ausdrücklich NICHT einladen: hier entsteht nur die Zeile,
          die Einladung verschickt der Knopf in der Tabelle. Ein Inhaber soll
          sein Team vorbereiten können, ohne dass jemand eine Mail bekommt. --}}
-    <form wire:submit="addSeat" class="grid grid-cols-1 gap-3 rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
-        <div>
-            <label class="text-sm font-medium text-body" for="inviteEmail">{{ __('users.invite_email') }}</label>
-            <input id="inviteEmail" type="email" wire:model="inviteEmail" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
-            @error('inviteEmail')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
+    {{-- Eine Zeile aus Feldern, und alles, was darunter wachsen kann, wächst
+         AUSSERHALB davon.
+
+         Vorher stand hier `sm:items-end`: Der Fehler unter der E-Mail und der
+         Hinweis unter der Rolle machten ihre Zelle höher, und weil unten
+         ausgerichtet wurde, schob das ihre Eingabefelder nach OBEN. Drei
+         Felder auf drei verschiedenen Höhen, und je nachdem, ob gerade ein
+         Fehler stand, sprang die Zeile.
+
+         `items-start` und gleich hohe Beschriftungen richten die Felder
+         aneinander aus. Fehler und Hinweis stehen unter der Zeile, wo sie
+         niemanden mehr verschieben. --}}
+    <form wire:submit="addSeat" class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms]">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-start">
+            <div>
+                <label class="block text-sm font-medium text-body" for="inviteEmail">{{ __('users.invite_email') }}</label>
+                <input id="inviteEmail" type="email" wire:model="inviteEmail"
+                       @error('inviteEmail') aria-invalid="true" @enderror
+                       class="mt-1.5 w-full rounded-md border bg-surface px-3 py-2 text-sm text-ink @error('inviteEmail') border-danger @else border-line-strong @enderror" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-body" for="inviteName">{{ __('users.invite_name') }}</label>
+                <input id="inviteName" type="text" wire:model="inviteName" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-body" for="inviteRole">{{ __('users.role') }}</label>
+                <select id="inviteRole" wire:model.live="inviteRole" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body sm:w-auto">
+                    <option value="admin">{{ __('users.role_admin') }}</option>
+                    <option value="member">{{ __('users.role_member') }}</option>
+                    <option value="readonly">{{ __('users.role_readonly') }}</option>
+                </select>
+            </div>
+            {{-- Ein leerer Platzhalter in Beschriftungshöhe, damit der Knopf auf
+                 der Linie der Felder sitzt — und nicht über einen abgezählten
+                 Abstand, der bei der nächsten Schriftgröße nicht mehr stimmt. --}}
+            <div>
+                <span class="block text-sm font-medium" aria-hidden="true">&nbsp;</span>
+                <x-ui.button variant="primary" type="submit" class="mt-1.5 w-full sm:w-auto" wire:loading.attr="disabled" wire:target="addSeat">
+                    <x-ui.icon name="plus" class="size-4" />{{ __('users.add') }}
+                </x-ui.button>
+            </div>
         </div>
-        <div>
-            <label class="text-sm font-medium text-body" for="inviteName">{{ __('users.invite_name') }}</label>
-            <input id="inviteName" type="text" wire:model="inviteName" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
-        </div>
-        <div>
-            <label class="text-sm font-medium text-body" for="inviteRole">{{ __('users.role') }}</label>
-            <select id="inviteRole" wire:model="inviteRole" class="mt-1.5 rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
-                <option value="admin">{{ __('users.role_admin') }}</option>
-                <option value="member">{{ __('users.role_member') }}</option>
-                <option value="readonly">{{ __('users.role_readonly') }}</option>
-            </select>
-            {{-- Der ehrliche Satz zu „Nur Lesen": die Rolle nimmt den eigenen
-                 Speicherplatz weg, hebt aber eine Freigabe nicht auf. --}}
-            <p class="mt-1 text-xs text-muted">{{ __('users.role_readonly_means') }}</p>
-        </div>
-        <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="addSeat">
-            <x-ui.icon name="plus" class="size-4" />{{ __('users.add') }}
-        </x-ui.button>
+
+        @error('inviteEmail')<p class="mt-2 text-xs text-danger">{{ $message }}</p>@enderror
+
+        {{-- Nur zur Rolle, die wirklich gewählt ist. Der Satz stand vorher
+             immer da und beschrieb „Nur Lesen", während „Mitglied" ausgewählt
+             war — eine Erklärung zu etwas, das gar nicht passiert. --}}
+        @if ($inviteRole === 'readonly')
+            <p class="mt-2 text-xs text-muted">{{ __('users.role_readonly_means') }}</p>
+        @endif
     </form>
 
     {{-- Der Mailversand fehlt: gesagt, bevor jemand drückt.