Widen shared calendar dialogs + single-line member rows

- CalendarForm: max-w-3xl when sharing (was sm:max-w-2xl, overridden by base max-w-xl)
- SharedCalendarSettings: max-w-2xl (was sm:max-w-lg)
- CalendarMemberRow: back to single-line with PermissionToggle inline (less cramped)
- Use unprefixed max-w classes so twMerge properly overrides DialogContent base

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/calendar/CalendarForm.tsx

@@ -131,7 +131,7 @@ export default function CalendarForm({ calendar, onClose }: CalendarFormProps) {
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className={isShared && showSharing ? 'sm:max-w-2xl' : undefined}>
+      <DialogContent className={isShared && showSharing ? 'max-w-3xl' : undefined}>
         <DialogClose onClick={onClose} />
         <DialogHeader>
           <DialogTitle>{calendar ? 'Edit Calendar' : 'New Calendar'}</DialogTitle>

frontend/src/components/calendar/CalendarMemberRow.tsx

@@ -30,32 +30,47 @@ export default function CalendarMemberRow({
   const initial = displayName.charAt(0).toUpperCase();
 
   return (
-    <div className="rounded-lg border border-border p-3 space-y-2.5 transition-all duration-200 hover:border-border/80">
+    <div className="flex items-center gap-3 rounded-lg border border-border p-3 transition-all duration-200 hover:border-border/80">
-      {/* Row 1: Avatar + Name + Status + Remove */}
+      <div className="h-8 w-8 rounded-full bg-violet-500/15 flex items-center justify-center shrink-0">
-      <div className="flex items-center gap-2.5">
+        <span className="text-sm text-violet-400 font-medium">{initial}</span>
-        <div className="h-8 w-8 rounded-full bg-violet-500/15 flex items-center justify-center shrink-0">
+      </div>
-          <span className="text-sm text-violet-400 font-medium">{initial}</span>
-        </div>
 
-        <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2">
-            <span className="text-sm font-medium truncate">{displayName}</span>
+          <span className="text-sm font-medium truncate">{displayName}</span>
-            {member.status === 'pending' && (
+          {member.status === 'pending' && (
-              <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-400 font-medium">
+            <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-400 font-medium">
-                Pending
+              Pending
-              </span>
+            </span>
-            )}
-          </div>
-          {member.preferred_name && (
-            <span className="text-xs text-muted-foreground">{member.umbral_name}</span>
           )}
         </div>
+        {member.preferred_name && (
+          <span className="text-xs text-muted-foreground">{member.umbral_name}</span>
+        )}
+      </div>
 
-        {isOwner && !readOnly && (
+      {readOnly ? (
+        <PermissionBadge permission={member.permission} />
+      ) : isOwner ? (
+        <div className="flex items-center gap-2.5 shrink-0">
+          <PermissionToggle
+            value={member.permission}
+            onChange={(p) => onUpdatePermission?.(member.id, p)}
+          />
+          {(member.permission === 'create_modify' || member.permission === 'full_access') && (
+            <label className="flex items-center gap-1.5 cursor-pointer shrink-0" title="Can add others">
+              <Checkbox
+                checked={member.can_add_others}
+                onChange={() => onUpdateCanAddOthers?.(member.id, !member.can_add_others)}
+                className="h-3.5 w-3.5"
+              />
+              <UserPlus className="h-3.5 w-3.5 text-muted-foreground" />
+            </label>
+          )}
           <button
             type="button"
             onClick={handleRemoveClick}
-            className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
+            className="text-muted-foreground hover:text-destructive transition-colors"
             title={confirming ? 'Click again to confirm' : 'Remove member'}
           >
             {confirming ? (
@@ -64,34 +79,10 @@ export default function CalendarMemberRow({
               <X className="h-4 w-4" />
             )}
           </button>
-        )}
+        </div>
-      </div>
+      ) : (
-
+        <PermissionBadge permission={member.permission} />
-      {/* Row 2: Permission control or badge */}
+      )}
-      <div className="flex items-center justify-between gap-2 pl-[42px]">
-        {readOnly ? (
-          <PermissionBadge permission={member.permission} />
-        ) : isOwner ? (
-          <>
-            <PermissionToggle
-              value={member.permission}
-              onChange={(p) => onUpdatePermission?.(member.id, p)}
-            />
-            {(member.permission === 'create_modify' || member.permission === 'full_access') && (
-              <label className="flex items-center gap-1.5 cursor-pointer shrink-0" title="Can add others">
-                <Checkbox
-                  checked={member.can_add_others}
-                  onChange={() => onUpdateCanAddOthers?.(member.id, !member.can_add_others)}
-                  className="h-3.5 w-3.5"
-                />
-                <UserPlus className="h-3.5 w-3.5 text-muted-foreground" />
-              </label>
-            )}
-          </>
-        ) : (
-          <PermissionBadge permission={member.permission} />
-        )}
-      </div>
     </div>
   );
 }

frontend/src/components/calendar/SharedCalendarSettings.tsx

@@ -69,7 +69,7 @@ export default function SharedCalendarSettings({ membership, onClose }: SharedCa
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="max-w-2xl">
         <DialogClose onClick={onClose} />
         <DialogHeader>
           <DialogTitle>Shared Calendar Settings</DialogTitle>