frontend/css/app.css

@@ -1824,3 +1824,20 @@ a { color: var(--primary); text-decoration: none; }
   font-size: 13px;
   color: var(--text-3);
 }
+
+/* Group member picker rows — checkbox left, name left, one per line. */
+.group-member-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  text-transform: none;
+}
+.group-member-item:last-child { border-bottom: none; }
+.group-member-item:hover { background: var(--bg-surface); }
+.group-member-item input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
+.group-member-name { flex: 1 1 auto; color: var(--text-1); }

frontend/js/calendar.js

@@ -2279,9 +2279,9 @@ function renderGroupMemberPicker() {
   const picker = document.getElementById('group-member-picker');
   picker.innerHTML = dir.length
     ? dir.map(u =>
-        `<label class="share-user-item" style="display:flex;align-items:center;gap:8px;cursor:pointer">
+        `<label class="group-member-item">
           <input type="checkbox" data-member-id="${u.id}" ${picked.has(u.id) ? 'checked' : ''} />
-          <span>${escHtml(u.display_name || '')}</span>
+          <span class="group-member-name">${escHtml(u.display_name || '')}</span>
         </label>`
       ).join('')
     : `<span class="accounts-section-empty">${t('share_no_users')}</span>`;

frontend/js/version.js

@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v24';
+export const APP_VERSION = 'v25';