devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

feat(mobile): add mobileStyle to all modals (sheet for forms, fullscreen for settings)

Browse Source
This commit is contained in:
Jannis Braun
2026-03-17 15:46:28 +01:00
parent a073613b43
commit 913b4c7365
9 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/AddDmMemberModal.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ export function AddDmMemberModal() {
}; };
return ( 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="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-[13px] text-txt-tertiary"> <p className="text-[13px] text-txt-tertiary">
packages/web/src/components/modals/ChannelSettingsModal.tsx
+1 -1
View File
@@ -931,7 +931,7 @@ export function ChannelSettingsModal() {
return ( 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 ? ( {showTabs ? (
<div className="flex gap-4 h-[min(520px,70vh)]"> <div className="flex gap-4 h-[min(520px,70vh)]">
{/* Tabs */} {/* Tabs */}
packages/web/src/components/modals/CreateCategory.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export function CreateCategoryModal() {
}; };
return ( return (
<Modal isOpen={isOpen} onClose={closeModal} title="Create Category"> <Modal isOpen={isOpen} onClose={closeModal} title="Create Category" mobileStyle="sheet">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
packages/web/src/components/modals/CreateChannel.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export function CreateChannelModal() {
}; };
return ( return (
<Modal isOpen={isOpen} onClose={closeModal} title="Create Channel"> <Modal isOpen={isOpen} onClose={closeModal} title="Create Channel" mobileStyle="sheet">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
packages/web/src/components/modals/CreateSpace.tsx
+1 -1
View File
@@ -119,7 +119,7 @@ export function CreateSpaceModal() {
return ( return (
<> <>
<Modal isOpen={isOpen} onClose={handleClose} title="Create a Space"> <Modal isOpen={isOpen} onClose={handleClose} title="Create a Space" mobileStyle="sheet">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{error && ( {error && (
<div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
packages/web/src/components/modals/InviteModal.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export function InviteModal() {
}; };
return ( 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"> <p className="text-txt-secondary text-sm mb-4">
Share this invite link with friends to let them join your space. Share this invite link with friends to let them join your space.
</p> </p>
packages/web/src/components/modals/JoinSpace.tsx
+1 -1
View File
@@ -124,7 +124,7 @@ export function JoinSpaceModal() {
} catch { /* ignore */ } } catch { /* ignore */ }
return ( 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 display (shared across all phases) */}
{error && ( {error && (
<div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm"> <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
packages/web/src/components/modals/NewDmModal.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export function NewDmModal() {
}; };
return ( 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"> <div className="space-y-3">
<input <input
ref={inputRef} ref={inputRef}
packages/web/src/components/modals/SpaceSettings.tsx
+1 -1
View File
@@ -287,7 +287,7 @@ export function SpaceSettingsModal() {
}`; }`;
return ( 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)]"> <div className="flex gap-4 h-[min(520px,70vh)]">
{/* Tabs */} {/* Tabs */}
<div className="w-32 flex-shrink-0 self-start z-10"> <div className="w-32 flex-shrink-0 self-start z-10">