From 1406650b7c41b91966a5cb963f2f9c82acaa8fc9 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sat, 31 Oct 2026 13:54:19 +0100
Subject: [PATCH] style(admin): invite form puts the e-mail first and wide,
 "how often" narrow

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../features/settings/AdminSettingsView.tsx   | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/settings/AdminSettingsView.tsx b/frontend/src/features/settings/AdminSettingsView.tsx
index bf6d066..fd409ea 100644
--- a/frontend/src/features/settings/AdminSettingsView.tsx
+++ b/frontend/src/features/settings/AdminSettingsView.tsx
@@ -698,20 +698,12 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
                 </h3>
 
                 <form onSubmit={handleCreateInvite} className="space-y-3">
-                  <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
-                    <div className="min-w-0">
-                      <label className="block text-muted mb-1">Wie oft verwendbar</label>
-                      <input
-                        type="number"
-                        min={1}
-                        max={1000}
-                        value={inviteMaxUses}
-                        onChange={(e) => setInviteMaxUses(Math.max(1, Math.min(1000, parseInt(e.target.value, 10) || 1)))}
-                        title="1 = ein Code für eine Person; mehr = ein Link für eine ganze Gruppe"
-                        className="w-full min-w-0 h-8 px-2.5 input-field"
-                      />
-                    </div>
-
+                  {/* E-mail gets the room, "how often" only needs a few digits */}
+                  <div
+                    className={`grid grid-cols-1 gap-3 ${
+                      isServerAdmin ? 'sm:grid-cols-[minmax(0,2fr)_8rem_minmax(0,1fr)_minmax(0,1fr)]' : 'sm:grid-cols-[minmax(0,2fr)_8rem_minmax(0,1fr)]'
+                    }`}
+                  >
                     <div className="min-w-0">
                       <label className="block text-muted mb-1">
                         Gebundene E-Mail (optional)
@@ -727,7 +719,20 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
                     </div>
 
                     <div className="min-w-0">
-                      <label className="block text-muted mb-1">Zugewiesene Server-Rolle</label>
+                      <label className="block text-muted mb-1 whitespace-nowrap">Wie oft verwendbar</label>
+                      <input
+                        type="number"
+                        min={1}
+                        max={1000}
+                        value={inviteMaxUses}
+                        onChange={(e) => setInviteMaxUses(Math.max(1, Math.min(1000, parseInt(e.target.value, 10) || 1)))}
+                        title="1 = ein Code für eine Person; mehr = ein Link für eine ganze Gruppe"
+                        className="w-full min-w-0 h-8 px-2.5 input-field"
+                      />
+                    </div>
+
+                    <div className="min-w-0">
+                      <label className="block text-muted mb-1">Rolle</label>
                       <select
                         value={inviteRole}
                         onChange={(e) => setInviteRole(e.target.value as UserRole)}