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,9 +30,7 @@ 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="flex items-center gap-2.5">
       <div className="h-8 w-8 rounded-full bg-violet-500/15 flex items-center justify-center shrink-0">
         <span className="text-sm text-violet-400 font-medium">{initial}</span>
       </div>
@@ -51,28 +49,10 @@ export default function CalendarMemberRow({
         )}
       </div>
 
-        {isOwner && !readOnly && (
-          <button
-            type="button"
-            onClick={handleRemoveClick}
-            className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
-            title={confirming ? 'Click again to confirm' : 'Remove member'}
-          >
-            {confirming ? (
-              <span className="text-[10px] text-destructive font-medium px-1">Sure?</span>
-            ) : (
-              <X className="h-4 w-4" />
-            )}
-          </button>
-        )}
-      </div>
-
-      {/* Row 2: Permission control or badge */}
-      <div className="flex items-center justify-between gap-2 pl-[42px]">
       {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)}
@@ -87,11 +67,22 @@ export default function CalendarMemberRow({
               <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"
+            title={confirming ? 'Click again to confirm' : 'Remove member'}
+          >
+            {confirming ? (
+              <span className="text-[10px] text-destructive font-medium px-1">Sure?</span>
+            ) : (
+              <X className="h-4 w-4" />
+            )}
+          </button>
+        </div>
       ) : (
         <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>