From 212a962fba920849cdb8dd7e8493e6e6932083b0 Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Tue, 7 Apr 2026 23:05:21 +0530
Subject: [PATCH] refactor(ui): align component utility classes with Tailwind
 v4

---
 src/app.css                                          |  4 ++--
 src/app/components/CalendarEventActions.svelte       |  2 +-
 src/app/components/CalendarEventForm.svelte          |  2 +-
 src/app/components/CalendarEventHeader.svelte        |  2 +-
 src/app/components/ChatCompose.svelte                |  2 +-
 src/app/components/ClassifiedActions.svelte          |  2 +-
 src/app/components/ClassifiedForm.svelte             |  2 +-
 src/app/components/CommentActions.svelte             |  2 +-
 src/app/components/EventInfo.svelte                  |  4 ++--
 src/app/components/EventReply.svelte                 |  2 +-
 src/app/components/GoalActions.svelte                |  2 +-
 src/app/components/GoalCreate.svelte                 |  4 ++--
 src/app/components/NoteContentEventTime.svelte       |  4 ++--
 .../components/NoteContentMinimalEventTime.svelte    |  2 +-
 src/app/components/PrimaryNav.svelte                 |  2 +-
 src/app/components/ProfileSpaces.svelte              |  4 ++--
 src/app/components/RelayAdd.svelte                   |  2 +-
 src/app/components/RelaySettingsItem.svelte          |  4 ++--
 src/app/components/RoomCompose.svelte                |  2 +-
 src/app/components/RoomForm.svelte                   |  2 +-
 src/app/components/RoomItem.svelte                   |  2 +-
 src/app/components/RoomNameWithImage.svelte          |  2 +-
 src/app/components/SpaceBar.svelte                   |  2 +-
 src/app/components/SpaceEdit.svelte                  |  2 +-
 src/app/components/SpaceInvite.svelte                |  2 +-
 src/app/components/SpaceMenu.svelte                  | 12 ++++++------
 src/app/components/ThreadActions.svelte              |  2 +-
 src/app/components/ThreadCreate.svelte               |  2 +-
 src/app/components/WalletPay.svelte                  |  2 +-
 src/app/components/WalletReceive.svelte              |  2 +-
 src/app/components/Zap.svelte                        |  4 ++--
 src/app/components/ZapInvoice.svelte                 |  6 +++---
 src/lib/components/CardButton.svelte                 |  4 ++--
 src/lib/components/Dialog.svelte                     |  2 +-
 src/lib/components/Divider.svelte                    |  4 ++--
 src/lib/components/ModalFooter.svelte                |  4 ++--
 src/lib/components/SecondaryNav.svelte               |  2 +-
 src/lib/components/SecondaryNavItem.svelte           |  2 +-
 src/routes/chat/+page.svelte                         |  4 ++--
 src/routes/settings/profile/+page.svelte             |  4 ++--
 src/routes/spaces/[relay]/+page.svelte               |  4 ++--
 src/routes/spaces/[relay]/[h]/+page.svelte           |  6 +++---
 src/routes/spaces/[relay]/calendar/+page.svelte      |  4 ++--
 .../spaces/[relay]/calendar/[address]/+page.svelte   |  4 ++--
 src/routes/spaces/[relay]/chat/+page.svelte          |  4 ++--
 45 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8285428b..cbce4fc1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -379,7 +379,7 @@
 /* tippy popover */
 
 .tippy-target {
-  @apply pointer-events-none fixed inset-0 z-tooltip;
+  @apply z-tooltip pointer-events-none fixed inset-0;
 }
 
 .tippy-target > * {
@@ -425,7 +425,7 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply relative z-compose mb-14 grow md:mb-0;
+  @apply z-compose relative mb-14 grow md:mb-0;
 }
 
 .chat__compose .chat__compose-inner {
diff --git a/src/app/components/CalendarEventActions.svelte b/src/app/components/CalendarEventActions.svelte
index a328a063..864fe35f 100644
--- a/src/app/components/CalendarEventActions.svelte
+++ b/src/app/components/CalendarEventActions.svelte
@@ -38,7 +38,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />
diff --git a/src/app/components/CalendarEventForm.svelte b/src/app/components/CalendarEventForm.svelte
index cacbecf2..c67c6fd7 100644
--- a/src/app/components/CalendarEventForm.svelte
+++ b/src/app/components/CalendarEventForm.svelte
@@ -155,7 +155,7 @@
       {#snippet input()}
         <div
           class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
-          <div class="input-editor flex-grow overflow-hidden">
+          <div class="input-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
           <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
diff --git a/src/app/components/CalendarEventHeader.svelte b/src/app/components/CalendarEventHeader.svelte
index 857b2e0e..58a84d8a 100644
--- a/src/app/components/CalendarEventHeader.svelte
+++ b/src/app/components/CalendarEventHeader.svelte
@@ -19,7 +19,7 @@
   const end = $derived(parseInt(meta.end))
 </script>
 
-<div class="flex flex-grow flex-wrap justify-between gap-2">
+<div class="flex grow flex-wrap justify-between gap-2">
   <p class="text-xl">{meta.title || meta.name}</p>
   {#if !isNaN(start) && !isNaN(end)}
     {@const startDateDisplay = formatTimestampAsDate(start)}
diff --git a/src/app/components/ChatCompose.svelte b/src/app/components/ChatCompose.svelte
index e1e26825..f5bba8a4 100644
--- a/src/app/components/ChatCompose.svelte
+++ b/src/app/components/ChatCompose.svelte
@@ -43,7 +43,7 @@
   const uploading = writable(false)
 
   const editorClass = $derived(
-    cx("chat-editor flex-grow overflow-hidden", {
+    cx("chat-editor grow overflow-hidden", {
       "pointer-events-none opacity-50": disabled,
     }),
   )
diff --git a/src/app/components/ClassifiedActions.svelte b/src/app/components/ClassifiedActions.svelte
index f034d945..dcd46dfc 100644
--- a/src/app/components/ClassifiedActions.svelte
+++ b/src/app/components/ClassifiedActions.svelte
@@ -42,7 +42,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />
diff --git a/src/app/components/ClassifiedForm.svelte b/src/app/components/ClassifiedForm.svelte
index 13d8a226..28b33605 100644
--- a/src/app/components/ClassifiedForm.svelte
+++ b/src/app/components/ClassifiedForm.svelte
@@ -172,7 +172,7 @@
           <p>Description*</p>
         {/snippet}
         {#snippet input()}
-          <div class="note-editor flex-grow overflow-hidden">
+          <div class="note-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
         {/snippet}
diff --git a/src/app/components/CommentActions.svelte b/src/app/components/CommentActions.svelte
index c13d2424..348f36b0 100644
--- a/src/app/components/CommentActions.svelte
+++ b/src/app/components/CommentActions.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
-  <div class="flex flex-grow flex-wrap justify-end gap-2">
+  <div class="flex grow flex-wrap justify-end gap-2">
     <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
     <ThunkStatusOrDeleted {event} />
     {#if showActivity}
diff --git a/src/app/components/EventInfo.svelte b/src/app/components/EventInfo.svelte
index 59773f8b..3acbe579 100644
--- a/src/app/components/EventInfo.svelte
+++ b/src/app/components/EventInfo.svelte
@@ -101,7 +101,7 @@
     {/if}
     <div class="relative">
       <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
-      <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
+      <p class="absolute right-2 top-2 flex grow items-center justify-between">
         <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
           <Icon icon={Copy} /> Copy
         </Button>
@@ -109,6 +109,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary grow" onclick={() => history.back()}>Got it</Button>
   </ModalFooter>
 </Modal>
diff --git a/src/app/components/EventReply.svelte b/src/app/components/EventReply.svelte
index c026dd47..fd29ee54 100644
--- a/src/app/components/EventReply.svelte
+++ b/src/app/components/EventReply.svelte
@@ -87,7 +87,7 @@
   class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
   <div class="card2 mx-2 my-2 bg-alt shadow-md">
     <div class="relative">
-      <div class="note-editor flex-grow overflow-hidden">
+      <div class="note-editor grow overflow-hidden">
         <EditorContent {autofocus} {editor} />
       </div>
       <Button
diff --git a/src/app/components/GoalActions.svelte b/src/app/components/GoalActions.svelte
index 33202647..b4cd0c8c 100644
--- a/src/app/components/GoalActions.svelte
+++ b/src/app/components/GoalActions.svelte
@@ -30,7 +30,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />
diff --git a/src/app/components/GoalCreate.svelte b/src/app/components/GoalCreate.svelte
index 1af5c716..3854443e 100644
--- a/src/app/components/GoalCreate.svelte
+++ b/src/app/components/GoalCreate.svelte
@@ -146,7 +146,7 @@
             <p>Details*</p>
           {/snippet}
           {#snippet input()}
-            <div class="note-editor flex-grow overflow-hidden">
+            <div class="note-editor grow overflow-hidden">
               <EditorContent {editor} />
             </div>
           {/snippet}
@@ -168,7 +168,7 @@
             Goal Amount (sats)*
           {/snippet}
           {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
               <label class="input input-bordered flex items-center gap-2">
                 <Icon icon={Bolt} />
                 <input bind:value={amount} type="number" class="w-28" />
diff --git a/src/app/components/NoteContentEventTime.svelte b/src/app/components/NoteContentEventTime.svelte
index b1f9e023..c573489a 100644
--- a/src/app/components/NoteContentEventTime.svelte
+++ b/src/app/components/NoteContentEventTime.svelte
@@ -9,10 +9,10 @@
 
 <div class="flex items-start gap-4">
   <CalendarEventDate event={props.event} />
-  <div class="flex flex-grow flex-col">
+  <div class="flex grow flex-col">
     <CalendarEventHeader event={props.event} />
     <div class="flex py-2 opacity-50">
-      <div class="h-px flex-grow bg-base-content opacity-25"></div>
+      <div class="h-px grow bg-base-content opacity-25"></div>
     </div>
     <Content {...props} />
   </div>
diff --git a/src/app/components/NoteContentMinimalEventTime.svelte b/src/app/components/NoteContentMinimalEventTime.svelte
index 18d8fc26..c5aa1226 100644
--- a/src/app/components/NoteContentMinimalEventTime.svelte
+++ b/src/app/components/NoteContentMinimalEventTime.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <div class="flex flex-col">
-  <div class="flex flex-grow flex-wrap justify-between gap-2">
+  <div class="flex grow flex-wrap justify-between gap-2">
     <p class="text-sm">{meta.title || meta.name}</p>
     {#if !isNaN(start) && !isNaN(end)}
       {@const startDateDisplay = formatTimestampAsDate(start)}
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index b199b951..746a2197 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <div
-  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 flex-shrink-0 bg-base-200 pt-2 md:block">
+  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 shrink-0 bg-base-200 pt-2 md:block">
   <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
     <PrimaryNavSpaces />
     {#if PLATFORM_RELAYS.length > 0}
diff --git a/src/app/components/ProfileSpaces.svelte b/src/app/components/ProfileSpaces.svelte
index 514c7ca3..b1c2826c 100644
--- a/src/app/components/ProfileSpaces.svelte
+++ b/src/app/components/ProfileSpaces.svelte
@@ -25,10 +25,10 @@
 <div class="flex flex-col gap-2">
   {#each spaceUrls as url (url)}
     <div class="card2 bg-alt flex flex-row items-center gap-2">
-      <div class="flex-shrink-0">
+      <div class="shrink-0">
         <RelayIcon {url} size={12} />
       </div>
-      <div class="flex flex-grow flex-col">
+      <div class="flex grow flex-col">
         <RelayName {url} />
         <div class="text-sm opacity-75">
           {url}
diff --git a/src/app/components/RelayAdd.svelte b/src/app/components/RelayAdd.svelte
index 97de1c71..a744480a 100644
--- a/src/app/components/RelayAdd.svelte
+++ b/src/app/components/RelayAdd.svelte
@@ -121,6 +121,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
   </ModalFooter>
 </Modal>
diff --git a/src/app/components/RelaySettingsItem.svelte b/src/app/components/RelaySettingsItem.svelte
index 039c2105..70641930 100644
--- a/src/app/components/RelaySettingsItem.svelte
+++ b/src/app/components/RelaySettingsItem.svelte
@@ -26,8 +26,8 @@
   type="button"
   class="btn font-normal flex h-[unset] w-full flex-nowrap py-4 text-left items-start justify-between"
   {onclick}>
-  <div class="flex flex-grow flex-row items-start gap-4">
-    <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center">
+  <div class="flex grow flex-row items-start gap-4">
+    <div class="flex h-7 w-7 shrink-0 items-center justify-center">
       <Icon {icon} />
     </div>
     <div class="flex flex-col gap-1">
diff --git a/src/app/components/RoomCompose.svelte b/src/app/components/RoomCompose.svelte
index 863ddf6f..f3aeef4f 100644
--- a/src/app/components/RoomCompose.svelte
+++ b/src/app/components/RoomCompose.svelte
@@ -132,7 +132,7 @@
       </Button>
     </Tippy>
   </div>
-  <div class="chat-editor flex-grow overflow-hidden">
+  <div class="chat-editor grow overflow-hidden">
     <EditorContent {autofocus} {editor} />
   </div>
   <Button
diff --git a/src/app/components/RoomForm.svelte b/src/app/components/RoomForm.svelte
index 218feb74..9aaf77f5 100644
--- a/src/app/components/RoomForm.svelte
+++ b/src/app/components/RoomForm.svelte
@@ -131,7 +131,7 @@
         <p>Icon</p>
       {/snippet}
       {#snippet input()}
-        <div class="flex flex-grow items-center justify-between gap-4">
+        <div class="flex grow items-center justify-between gap-4">
           {#if imagePreview}
             <div class="flex items-center gap-2">
               <span class="text-sm opacity-75">Selected:</span>
diff --git a/src/app/components/RoomItem.svelte b/src/app/components/RoomItem.svelte
index abe6d80c..2eec2531 100644
--- a/src/app/components/RoomItem.svelte
+++ b/src/app/components/RoomItem.svelte
@@ -94,7 +94,7 @@
     {:else}
       <div class="w-8 shrink-0"></div>
     {/if}
-    <div class="min-w-0 flex-grow pr-1">
+    <div class="min-w-0 grow pr-1">
       {#if showPubkey}
         <div class="flex items-center gap-2">
           <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
diff --git a/src/app/components/RoomNameWithImage.svelte b/src/app/components/RoomNameWithImage.svelte
index a9113b09..4f8ff116 100644
--- a/src/app/components/RoomNameWithImage.svelte
+++ b/src/app/components/RoomNameWithImage.svelte
@@ -11,7 +11,7 @@
   const {url, h, ...props}: Props = $props()
 </script>
 
-<div class="flex flex-grow items-center justify-between gap-4 {props.class}">
+<div class="flex grow items-center justify-between gap-4 {props.class}">
   <div class="flex items-center gap-3">
     <RoomImage {url} {h} />
     <div class="min-w-0 overflow-hidden text-ellipsis">
diff --git a/src/app/components/SpaceBar.svelte b/src/app/components/SpaceBar.svelte
index e32e5051..8a1c7649 100644
--- a/src/app/components/SpaceBar.svelte
+++ b/src/app/components/SpaceBar.svelte
@@ -27,7 +27,7 @@
     <Button onclick={back} class="place-self-start pr-3 md:hidden">
       <Icon icon={ArrowLeft} size={7} />
     </Button>
-    <div class="ellipsize whitespace-nowrap flex flex-grow items-center justify-between gap-4">
+    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
       <div class="flex flex-col">
         <div class="flex gap-2 items-center">
           {@render title?.()}
diff --git a/src/app/components/SpaceEdit.svelte b/src/app/components/SpaceEdit.svelte
index 528bf9be..8739d470 100644
--- a/src/app/components/SpaceEdit.svelte
+++ b/src/app/components/SpaceEdit.svelte
@@ -134,7 +134,7 @@
         <p>Icon</p>
       {/snippet}
       {#snippet input()}
-        <div class="flex items-center gap-4 justify-between flex-grow">
+        <div class="flex items-center gap-4 justify-between grow">
           {#if imagePreview}
             <div class="flex items-center gap-2">
               <span class="text-sm opacity-75">Selected:</span>
diff --git a/src/app/components/SpaceInvite.svelte b/src/app/components/SpaceInvite.svelte
index b6cc7105..79a15a84 100644
--- a/src/app/components/SpaceInvite.svelte
+++ b/src/app/components/SpaceInvite.svelte
@@ -100,6 +100,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
   </ModalFooter>
 </Modal>
diff --git a/src/app/components/SpaceMenu.svelte b/src/app/components/SpaceMenu.svelte
index 78a03fef..782e3509 100644
--- a/src/app/components/SpaceMenu.svelte
+++ b/src/app/components/SpaceMenu.svelte
@@ -140,7 +140,7 @@
 
 <div bind:this={element} class="flex min-h-0 flex-1 flex-col">
   <SecondaryNavSection class="min-h-0 flex-1 flex flex-col overflow-hidden pb-0">
-    <div class="flex-shrink-0">
+    <div class="shrink-0">
       <Button
         class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
         onclick={openMenu}>
@@ -270,14 +270,14 @@
       {/if}
       {#if hasNip29($relay)}
         {#if $userRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         {/if}
         {#each $userRooms as h (h)}
           <SpaceMenuRoomItem {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
           <SecondaryNavHeader>
             {#if $userRooms.length > 0}
               Other Rooms
@@ -296,7 +296,7 @@
           <SpaceMenuRoomItem {url} {h} />
         {/each}
         {#if $otherVoiceRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
           <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
           {#each $otherVoiceRooms as h (h)}
             <SpaceMenuRoomItem {url} {h} />
@@ -309,11 +309,11 @@
           </SecondaryNavItem>
         {/if}
       {/if}
-      <div class="h-5 flex-shrink-0"></div>
+      <div class="h-5 shrink-0"></div>
     </div>
   </SecondaryNavSection>
   <div
-    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
+    class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
     <VoiceWidget />
     <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
       <SocketStatusIndicator {url} />
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index a37724fb..d34dedea 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/src/app/components/ThreadActions.svelte
@@ -30,7 +30,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />
diff --git a/src/app/components/ThreadCreate.svelte b/src/app/components/ThreadCreate.svelte
index 45b69f0d..61ead197 100644
--- a/src/app/components/ThreadCreate.svelte
+++ b/src/app/components/ThreadCreate.svelte
@@ -130,7 +130,7 @@
           <p>Message*</p>
         {/snippet}
         {#snippet input()}
-          <div class="note-editor flex-grow overflow-hidden">
+          <div class="note-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
         {/snippet}
diff --git a/src/app/components/WalletPay.svelte b/src/app/components/WalletPay.svelte
index 95561dd3..16dc02e4 100644
--- a/src/app/components/WalletPay.svelte
+++ b/src/app/components/WalletPay.svelte
@@ -70,7 +70,7 @@
             Amount (satoshis)
           {/snippet}
           {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
               <label class="input input-bordered flex items-center gap-2">
                 <Icon icon={Bolt} />
                 <input
diff --git a/src/app/components/WalletReceive.svelte b/src/app/components/WalletReceive.svelte
index 8f04b57e..db19506d 100644
--- a/src/app/components/WalletReceive.svelte
+++ b/src/app/components/WalletReceive.svelte
@@ -80,7 +80,7 @@
             Amount (satoshis)
           {/snippet}
           {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
               <label class="input input-bordered flex items-center gap-2">
                 <Icon icon={Bolt} />
                 <input bind:value={sats} type="number" class="w-14" placeholder="0" />
diff --git a/src/app/components/Zap.svelte b/src/app/components/Zap.svelte
index 62fd3e77..6b17bfce 100644
--- a/src/app/components/Zap.svelte
+++ b/src/app/components/Zap.svelte
@@ -125,7 +125,7 @@
         Emoji Reaction
       {/snippet}
       {#snippet input()}
-        <div class="flex flex-grow items-center justify-end gap-4">
+        <div class="flex grow items-center justify-end gap-4">
           <EmojiButton {onEmoji} class="btn btn-neutral">
             {content}
           </EmojiButton>
@@ -137,7 +137,7 @@
         Amount
       {/snippet}
       {#snippet input()}
-        <div class="flex flex-grow justify-end">
+        <div class="flex grow justify-end">
           <label class="input input-bordered flex items-center gap-2">
             <Icon icon={Bolt} />
             <input bind:value={amount} type="number" class="w-24" />
diff --git a/src/app/components/ZapInvoice.svelte b/src/app/components/ZapInvoice.svelte
index 4ed10534..e8bddc41 100644
--- a/src/app/components/ZapInvoice.svelte
+++ b/src/app/components/ZapInvoice.svelte
@@ -158,7 +158,7 @@
         </p>
       </div>
       <label class="input input-bordered flex w-full items-center justify-between gap-2">
-        <input readonly class="ellipsize flex-grow" value={invoice} />
+        <input readonly class="ellipsize grow" value={invoice} />
         <Button class="flex items-center" onclick={copyInvoice}>
           <Icon icon={Copy} />
         </Button>
@@ -169,7 +169,7 @@
           Emoji Reaction
         {/snippet}
         {#snippet input()}
-          <div class="flex flex-grow items-center justify-end gap-4">
+          <div class="flex grow items-center justify-end gap-4">
             <EmojiButton {onEmoji} class="btn btn-neutral">
               {content}
             </EmojiButton>
@@ -181,7 +181,7 @@
           Amount
         {/snippet}
         {#snippet input()}
-          <div class="flex flex-grow justify-end">
+          <div class="flex grow justify-end">
             <label class="input input-bordered flex items-center gap-2">
               <Icon icon={Bolt} />
               <input bind:value={amount} type="number" class="w-24" />
diff --git a/src/lib/components/CardButton.svelte b/src/lib/components/CardButton.svelte
index 0695dde3..c27eaf39 100644
--- a/src/lib/components/CardButton.svelte
+++ b/src/lib/components/CardButton.svelte
@@ -12,8 +12,8 @@
 </script>
 
 <div class="btn flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}">
-  <div class="flex flex-grow flex-row items-start gap-4">
-    <div class="flex h-14 w-12 flex-shrink-0 items-center justify-center">
+  <div class="flex grow flex-row items-start gap-4">
+    <div class="flex h-14 w-12 shrink-0 items-center justify-center">
       {@render props.icon?.()}
     </div>
     <div class="flex flex-col gap-1">
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index 261cce23..6e7c4ee5 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -29,7 +29,7 @@
 
   const innerClass = $derived(
     cx(
-      "relative text-base-content text-base-content flex-grow pointer-events-auto",
+      "relative text-base-content text-base-content grow pointer-events-auto",
       "rounded-t-box sm:rounded-box",
       {
         "bg-alt shadow-m max-h-[90vh] flex flex-col max-w-full pb-sai sm:pb-0": !fullscreen,
diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte
index b9235b54..51b89ca2 100644
--- a/src/lib/components/Divider.svelte
+++ b/src/lib/components/Divider.svelte
@@ -9,9 +9,9 @@
 </script>
 
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
-  <div class="h-px flex-grow bg-base-content opacity-25"></div>
+  <div class="h-px grow bg-base-content opacity-25"></div>
   {#if children}
     <p>{@render children?.()}</p>
-    <div class="h-px flex-grow bg-base-content opacity-25"></div>
+    <div class="h-px grow bg-base-content opacity-25"></div>
   {/if}
 </div>
diff --git a/src/lib/components/ModalFooter.svelte b/src/lib/components/ModalFooter.svelte
index f2a84474..b49e1f5c 100644
--- a/src/lib/components/ModalFooter.svelte
+++ b/src/lib/components/ModalFooter.svelte
@@ -8,9 +8,9 @@
   const {children}: Props = $props()
 </script>
 
-<div class="h-20 flex-shrink-0"></div>
+<div class="h-20 shrink-0"></div>
 <div class="flex absolute bottom-sai left-0 right-0 p-6 py-4 rounded-b-box bg-base-200">
-  <div class="flex flex-grow gap-4 items-center justify-between">
+  <div class="flex grow gap-4 items-center justify-between">
     {@render children?.()}
   </div>
 </div>
diff --git a/src/lib/components/SecondaryNav.svelte b/src/lib/components/SecondaryNav.svelte
index 162c8b8f..88dcfb5d 100644
--- a/src/lib/components/SecondaryNav.svelte
+++ b/src/lib/components/SecondaryNav.svelte
@@ -12,7 +12,7 @@
 
 <div
   class={cx(
-    "mt-sai mb-sai max-h-screen w-60 min-h-0 flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
     props.class,
   )}>
   {@render children?.()}
diff --git a/src/lib/components/SecondaryNavItem.svelte b/src/lib/components/SecondaryNavItem.svelte
index 0a8202b0..7dc02c66 100644
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -36,7 +36,7 @@
 
   const active = $derived($page.url.pathname === href)
   const wrapperClass = $derived(
-    cx(restProps.class, "relative flex flex-shrink-0 items-center gap-3 text-left transition-all", {
+    cx(restProps.class, "relative flex shrink-0 items-center gap-3 text-left transition-all", {
       "hover:bg-base-100 hover:text-base-content": true,
       "text-base-content bg-base-100": active,
       "tooltip tooltip-right": title,
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index e0974e8a..6382437f 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -37,8 +37,8 @@
 
 <ContentSearch class="md:hidden">
   {#snippet input()}
-    <div class="row-2 min-w-0 flex-grow items-center">
-      <label class="input input-bordered flex flex-grow items-center gap-2">
+    <div class="row-2 min-w-0 grow items-center">
+      <label class="input input-bordered flex grow items-center gap-2">
         <Icon icon={Magnifier} />
         <input
           bind:value={term}
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index a0667a63..2030f38d 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/src/routes/settings/profile/+page.svelte
@@ -116,9 +116,9 @@
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center justify-between gap-2">
-          <div class="row-2 flex-grow items-center">
+          <div class="row-2 grow items-center">
             <Icon icon={LinkRound} />
-            <input readonly class="ellipsize flex-grow" value={npub} />
+            <input readonly class="ellipsize grow" value={npub} />
           </div>
           <Button class="flex items-center" onclick={copyNpub}>
             <Icon icon={Copy} />
diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte
index 233ab68e..6281fbab 100644
--- a/src/routes/spaces/[relay]/+page.svelte
+++ b/src/routes/spaces/[relay]/+page.svelte
@@ -22,10 +22,10 @@
 <svelte:window bind:innerWidth={width} />
 
 {#if width <= md}
-  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-2">
+  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 shrink-0 bg-base-200 pt-2">
     <PrimaryNavSpaces />
   </div>
-  <SecondaryNav class="!flex !w-auto flex-grow pb-16">
+  <SecondaryNav class="!flex !w-auto grow pb-16">
     <SpaceMenu {url} />
   </SecondaryNav>
 {/if}
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index 78b9fc1c..48b6c327 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -398,9 +398,9 @@
           {id}
           class="flex items-center py-2 text-xs transition-colors"
           class:opacity-0={showFixedNewMessages}>
-          <div class="h-px flex-grow bg-primary"></div>
+          <div class="h-px grow bg-primary"></div>
           <p class="rounded-full bg-primary px-2 py-1 text-primary-content">New Messages</p>
-          <div class="h-px flex-grow bg-primary"></div>
+          <div class="h-px grow bg-primary"></div>
         </div>
       {:else if type === "date"}
         <Divider>{value}</Divider>
@@ -481,7 +481,7 @@
     {/if}
   </div>
   {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
+    <div class="hide-on-keyboard shrink-0 p-2 md:hidden">
       <VoiceWidget />
     </div>
   {/if}
diff --git a/src/routes/spaces/[relay]/calendar/+page.svelte b/src/routes/spaces/[relay]/calendar/+page.svelte
index e2ff365b..ef999809 100644
--- a/src/routes/spaces/[relay]/calendar/+page.svelte
+++ b/src/routes/spaces/[relay]/calendar/+page.svelte
@@ -128,9 +128,9 @@
     <div class={"calendar-event-" + event.id}>
       {#if isFirstFutureEvent}
         <div class="flex items-center gap-2 p-2">
-          <div class="h-px flex-grow bg-primary"></div>
+          <div class="h-px grow bg-primary"></div>
           <p class="text-xs uppercase text-primary">Today</p>
-          <div class="h-px flex-grow bg-primary"></div>
+          <div class="h-px grow bg-primary"></div>
         </div>
       {/if}
       {#if dateDisplay}
diff --git a/src/routes/spaces/[relay]/calendar/[address]/+page.svelte b/src/routes/spaces/[relay]/calendar/[address]/+page.svelte
index ed2aacb1..bde8ecb7 100644
--- a/src/routes/spaces/[relay]/calendar/[address]/+page.svelte
+++ b/src/routes/spaces/[relay]/calendar/[address]/+page.svelte
@@ -69,11 +69,11 @@
     <div class="card2 bg-alt col-3 z-feature">
       <div class="flex items-start gap-4">
         <CalendarEventDate event={$event} />
-        <div class="flex min-w-0 flex-grow flex-col gap-1">
+        <div class="flex min-w-0 grow flex-col gap-1">
           <CalendarEventHeader event={$event} />
           <CalendarEventMeta event={$event} {url} />
           <div class="flex py-2 opacity-50">
-            <div class="h-px flex-grow bg-base-content opacity-25"></div>
+            <div class="h-px grow bg-base-content opacity-25"></div>
           </div>
           <Content showEntire event={$event} {url} />
         </div>
diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte
index d1915b9e..8290a535 100644
--- a/src/routes/spaces/[relay]/chat/+page.svelte
+++ b/src/routes/spaces/[relay]/chat/+page.svelte
@@ -311,9 +311,9 @@
         {id}
         class="flex items-center py-2 text-xs transition-colors"
         class:opacity-0={showFixedNewMessages}>
-        <div class="h-px flex-grow bg-primary"></div>
+        <div class="h-px grow bg-primary"></div>
         <p class="rounded-full bg-primary px-2 py-1 text-primary-content">New Messages</p>
-        <div class="h-px flex-grow bg-primary"></div>
+        <div class="h-px grow bg-primary"></div>
       </div>
     {:else if type === "date"}
       <Divider>{value}</Divider>