Tweak room edit form

src/app/components/RoomForm.svelte

@@ -112,8 +112,7 @@
       <p>Icon</p>
     {/snippet}
     {#snippet input()}
-      <div class="flex items-center justify-between">
+      <div class="flex flex-grow items-center justify-between gap-4">
-        <div class="flex items-center gap-4">
         {#if imagePreview}
           <div class="flex items-center gap-2">
             <span class="text-sm opacity-75">Selected:</span>
@@ -125,16 +124,15 @@
         <div class="flex gap-2">
           <IconPickerButton onSelect={handleIconSelect} class="btn btn-primary btn-sm">
             <Icon icon={StickerSmileSquare} size={4} />
-              Select
+            <span class="hidden sm:inline">Select</span>
           </IconPickerButton>
           <label class="btn btn-neutral btn-sm cursor-pointer">
             <Icon icon={UploadMinimalistic} size={4} />
-              Upload
+            <span class="hidden sm:inline">Upload</span>
             <input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />
           </label>
         </div>
       </div>
-      </div>
     {/snippet}
   </FieldInline>
   <FieldInline>
@@ -162,41 +160,22 @@
       </label>
     {/snippet}
   </FieldInline>
-  <FieldInline>
+  <strong class="md:hidden">Permissions</strong>
-    {#snippet label()}
+  <div class="flex items-center gap-2">
-      <strong>Restricted</strong>
-    {/snippet}
-    {#snippet input()}
     <input type="checkbox" class="checkbox" bind:checked={values.isRestricted} />
     <span class="text-sm opacity-75">Only allow members to send messages</span>
-    {/snippet}
+  </div>
-  </FieldInline>
+  <div class="flex items-center gap-2">
-  <FieldInline>
-    {#snippet label()}
-      <strong>Private</strong>
-    {/snippet}
-    {#snippet input()}
     <input type="checkbox" class="checkbox" bind:checked={values.isPrivate} />
     <span class="text-sm opacity-75">Only allow members to read messages</span>
-    {/snippet}
+  </div>
-  </FieldInline>
+  <div class="flex items-center gap-2">
-  <FieldInline>
-    {#snippet label()}
-      <strong>Hidden</strong>
-    {/snippet}
-    {#snippet input()}
     <input type="checkbox" class="checkbox" bind:checked={values.isHidden} />
     <span class="text-sm opacity-75">Hide this group from non-members</span>
-    {/snippet}
+  </div>
-  </FieldInline>
+  <div class="flex items-center gap-2">
-  <FieldInline>
-    {#snippet label()}
-      <strong>Closed</strong>
-    {/snippet}
-    {#snippet input()}
     <input type="checkbox" class="checkbox" bind:checked={values.isClosed} />
     <span class="text-sm opacity-75">Ignore requests to join</span>
-    {/snippet}
+  </div>
-  </FieldInline>
   {@render footer({loading})}
 </form>

src/app/components/SpaceMembers.svelte

@@ -87,7 +87,7 @@
     </div>
   {/if}
   {#each $members as pubkey (pubkey)}
-    <div class="card2 bg-alt relative">
+    <div class="card2 card2-sm bg-alt relative">
       <div class="flex items-center justify-between gap-2">
         <div class="min-w-0 flex-1">
           <Profile {pubkey} {url} />