Merge pull request 'visual fix for invitations from' (#379) from SEND040 into main

Reviewed-on: #379
Reviewed-by: tech <tech.sendico@proton.me>

frontend/pweb/lib/pages/invitations/widgets/form/fields.dart

@@ -11,10 +11,11 @@ class InvitationFormFields extends StatelessWidget {
   final TextEditingController firstNameController;
   final TextEditingController lastNameController;
   final TextEditingController messageController;
-  final bool canCreateRoles;
-  final VoidCallback onCreateRole;
   final String? selectedRoleRef;
   final ValueChanged<String?> onRoleChanged;
+  static const double _fieldWidth = 250.0;
+  static const double _rowSpacing = 40.0;
+  static const double _rowGap = 12.0;
 
   const InvitationFormFields({
     super.key,
@@ -23,8 +24,6 @@ class InvitationFormFields extends StatelessWidget {
     required this.firstNameController,
     required this.lastNameController,
     required this.messageController,
-    required this.canCreateRoles,
-    required this.onCreateRole,
     required this.selectedRoleRef,
     required this.onRoleChanged,
   });
@@ -34,12 +33,11 @@ class InvitationFormFields extends StatelessWidget {
     final loc = AppLocalizations.of(context)!;
     return Column(
       children: [
-        Wrap(
+        Row(
-          spacing: 12,
+          spacing: _rowSpacing,
-          runSpacing: 12,
           children: [
             SizedBox(
-              width: 320,
+              width: _fieldWidth,
               child: TextFormField(
                 controller: emailController,
                 decoration: InputDecoration(
@@ -53,7 +51,33 @@ class InvitationFormFields extends StatelessWidget {
               ),
             ),
             SizedBox(
-              width: 200,
+              width: _fieldWidth,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  DropdownButtonFormField<String>(
+                    initialValue: selectedRoleRef,
+                    items: roles.map((role) => DropdownMenuItem(
+                      value: role.storable.id,
+                      child: Text(role.describable.name),
+                    )).toList(),
+                    onChanged: roles.isEmpty ? null : onRoleChanged,
+                    decoration: InputDecoration(
+                      labelText: loc.invitationRoleLabel,
+                      prefixIcon: const Icon(Icons.security_outlined),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+        SizedBox(height: _rowGap),
+        Row(
+          spacing: _rowSpacing,
+          children: [
+            SizedBox(
+              width: _fieldWidth,
               child: TextFormField(
                 controller: firstNameController,
                 decoration: InputDecoration(
@@ -63,7 +87,7 @@ class InvitationFormFields extends StatelessWidget {
               ),
             ),
             SizedBox(
-              width: 200,
+              width: _fieldWidth,
               child: TextFormField(
                 controller: lastNameController,
                 decoration: InputDecoration(
@@ -72,29 +96,9 @@ class InvitationFormFields extends StatelessWidget {
                 ),
               ),
             ),
-            SizedBox(
-              width: 260,
-              child: DropdownButtonFormField<String>(
-                initialValue: selectedRoleRef,
-                items: roles.map((role) => DropdownMenuItem(
-                  value: role.storable.id,
-                  child: Text(role.describable.name),
-                )).toList(),
-                onChanged: roles.isEmpty ? null : onRoleChanged,
-                decoration: InputDecoration(
-                  labelText: loc.invitationRoleLabel,
-                  prefixIcon: const Icon(Icons.security_outlined),
-                  suffixIcon: IconButton(
-                    onPressed: canCreateRoles ? onCreateRole : null,
-                    icon: const Icon(Icons.add_circle_outline),
-                    tooltip: loc.invitationAddRoleButton,
-                  ),
-                ),
-              ),
-            ),
           ],
         ),
-        const SizedBox(height: 12),
+        const SizedBox(height: _rowGap),
         TextFormField(
           controller: messageController,
           minLines: 2,

frontend/pweb/lib/pages/invitations/widgets/form/view.dart

@@ -70,8 +70,6 @@ class InvitationFormView extends StatelessWidget {
                 firstNameController: firstNameController,
                 lastNameController: lastNameController,
                 messageController: messageController,
-                canCreateRoles: canCreateRoles,
-                onCreateRole: onCreateRole,
                 selectedRoleRef: selectedRoleRef,
                 onRoleChanged: onRoleChanged,
               ),