From 913b4c73652527de815f04491a30eb1bb70f75fe Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Tue, 17 Mar 2026 15:46:28 +0100
Subject: [PATCH] feat(mobile): add mobileStyle to all modals (sheet for forms,
 fullscreen for settings)

---
 packages/web/src/components/modals/AddDmMemberModal.tsx     | 2 +-
 packages/web/src/components/modals/ChannelSettingsModal.tsx | 2 +-
 packages/web/src/components/modals/CreateCategory.tsx       | 2 +-
 packages/web/src/components/modals/CreateChannel.tsx        | 2 +-
 packages/web/src/components/modals/CreateSpace.tsx          | 2 +-
 packages/web/src/components/modals/InviteModal.tsx          | 2 +-
 packages/web/src/components/modals/JoinSpace.tsx            | 2 +-
 packages/web/src/components/modals/NewDmModal.tsx           | 2 +-
 packages/web/src/components/modals/SpaceSettings.tsx        | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/modals/AddDmMemberModal.tsx b/packages/web/src/components/modals/AddDmMemberModal.tsx
index 695df2e2..18441844 100644
--- a/packages/web/src/components/modals/AddDmMemberModal.tsx
+++ b/packages/web/src/components/modals/AddDmMemberModal.tsx
@@ -80,7 +80,7 @@ export function AddDmMemberModal() {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="Add Friends to DM">
+    <Modal isOpen={isOpen} onClose={closeModal} title="Add Friends to DM" mobileStyle="sheet">
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <p className="text-[13px] text-txt-tertiary">
diff --git a/packages/web/src/components/modals/ChannelSettingsModal.tsx b/packages/web/src/components/modals/ChannelSettingsModal.tsx
index c1d0d0f3..f810fb5d 100644
--- a/packages/web/src/components/modals/ChannelSettingsModal.tsx
+++ b/packages/web/src/components/modals/ChannelSettingsModal.tsx
@@ -931,7 +931,7 @@ export function ChannelSettingsModal() {
 
   return (
     <>
-      <Modal isOpen={isOpen} onClose={closeModal} title="Channel Settings" maxWidth={showTabs ? 'max-w-2xl' : 'max-w-md'}>
+      <Modal isOpen={isOpen} onClose={closeModal} title="Channel Settings" mobileStyle="fullscreen" maxWidth={showTabs ? 'max-w-2xl' : 'max-w-md'}>
         {showTabs ? (
           <div className="flex gap-4 h-[min(520px,70vh)]">
             {/* Tabs */}
diff --git a/packages/web/src/components/modals/CreateCategory.tsx b/packages/web/src/components/modals/CreateCategory.tsx
index 206edd95..b771a8b8 100644
--- a/packages/web/src/components/modals/CreateCategory.tsx
+++ b/packages/web/src/components/modals/CreateCategory.tsx
@@ -41,7 +41,7 @@ export function CreateCategoryModal() {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="Create Category">
+    <Modal isOpen={isOpen} onClose={closeModal} title="Create Category" mobileStyle="sheet">
       <form onSubmit={handleSubmit}>
         {error && (
           <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
diff --git a/packages/web/src/components/modals/CreateChannel.tsx b/packages/web/src/components/modals/CreateChannel.tsx
index 2b4e5614..e8c11653 100644
--- a/packages/web/src/components/modals/CreateChannel.tsx
+++ b/packages/web/src/components/modals/CreateChannel.tsx
@@ -56,7 +56,7 @@ export function CreateChannelModal() {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="Create Channel">
+    <Modal isOpen={isOpen} onClose={closeModal} title="Create Channel" mobileStyle="sheet">
       <form onSubmit={handleSubmit}>
         {error && (
           <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
diff --git a/packages/web/src/components/modals/CreateSpace.tsx b/packages/web/src/components/modals/CreateSpace.tsx
index c07a22b3..f5820029 100644
--- a/packages/web/src/components/modals/CreateSpace.tsx
+++ b/packages/web/src/components/modals/CreateSpace.tsx
@@ -119,7 +119,7 @@ export function CreateSpaceModal() {
 
   return (
     <>
-    <Modal isOpen={isOpen} onClose={handleClose} title="Create a Space">
+    <Modal isOpen={isOpen} onClose={handleClose} title="Create a Space" mobileStyle="sheet">
       <form onSubmit={handleSubmit}>
         {error && (
           <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
diff --git a/packages/web/src/components/modals/InviteModal.tsx b/packages/web/src/components/modals/InviteModal.tsx
index d0791925..8b42742b 100644
--- a/packages/web/src/components/modals/InviteModal.tsx
+++ b/packages/web/src/components/modals/InviteModal.tsx
@@ -73,7 +73,7 @@ export function InviteModal() {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="Invite Friends">
+    <Modal isOpen={isOpen} onClose={closeModal} title="Invite Friends" mobileStyle="sheet">
       <p className="text-txt-secondary text-sm mb-4">
         Share this invite link with friends to let them join your space.
       </p>
diff --git a/packages/web/src/components/modals/JoinSpace.tsx b/packages/web/src/components/modals/JoinSpace.tsx
index 1f6a7924..5aeaa0a0 100644
--- a/packages/web/src/components/modals/JoinSpace.tsx
+++ b/packages/web/src/components/modals/JoinSpace.tsx
@@ -124,7 +124,7 @@ export function JoinSpaceModal() {
   } catch { /* ignore */ }
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="Join a Space">
+    <Modal isOpen={isOpen} onClose={closeModal} title="Join a Space" mobileStyle="sheet">
       {/* Error display (shared across all phases) */}
       {error && (
         <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
diff --git a/packages/web/src/components/modals/NewDmModal.tsx b/packages/web/src/components/modals/NewDmModal.tsx
index acd0f20c..2450c798 100644
--- a/packages/web/src/components/modals/NewDmModal.tsx
+++ b/packages/web/src/components/modals/NewDmModal.tsx
@@ -79,7 +79,7 @@ export function NewDmModal() {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="New Direct Message">
+    <Modal isOpen={isOpen} onClose={closeModal} title="New Direct Message" mobileStyle="sheet">
       <div className="space-y-3">
         <input
           ref={inputRef}
diff --git a/packages/web/src/components/modals/SpaceSettings.tsx b/packages/web/src/components/modals/SpaceSettings.tsx
index 721f0e4a..d41023ed 100644
--- a/packages/web/src/components/modals/SpaceSettings.tsx
+++ b/packages/web/src/components/modals/SpaceSettings.tsx
@@ -287,7 +287,7 @@ export function SpaceSettingsModal() {
     }`;
 
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} title="Space Settings" maxWidth="max-w-2xl">
+    <Modal isOpen={isOpen} onClose={closeModal} title="Space Settings" maxWidth="max-w-2xl" mobileStyle="fullscreen">
       <div className="flex gap-4 h-[min(520px,70vh)]">
         {/* Tabs */}
         <div className="w-32 flex-shrink-0 self-start z-10">