coracle/flotilla
1
3
Fork 9
Code Issues 31 Pull Requests 1 Actions Packages Projects 5 Releases Wiki Activity

refactor(ui): align component utility classes with Tailwind v4

Browse Source
This commit is contained in:
Priyanshu Bharti
2026-04-07 23:05:21 +05:30
parent 1fb96c4f6a
commit 212a962fba
45 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+2 -2
View File
@@ -379,7 +379,7 @@
/* tippy popover */ /* tippy popover */
.tippy-target { .tippy-target {
@apply pointer-events-none fixed inset-0 z-tooltip; @apply z-tooltip pointer-events-none fixed inset-0;
} }
.tippy-target > * { .tippy-target > * {
@@ -425,7 +425,7 @@ body.keyboard-open .hide-on-keyboard {
/* chat view */ /* chat view */
.chat__compose { .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 { .chat__compose .chat__compose-inner {
src/app/components/CalendarEventActions.svelte
+1 -1
View File
@@ -38,7 +38,7 @@
publishReaction({...template, event, relays: [url], protect: await shouldProtect}) publishReaction({...template, event, relays: [url], protect: await shouldProtect})
</script> </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} {#if h && showRoom}
<Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full"> <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
Posted in #<RoomName {h} {url} /> Posted in #<RoomName {h} {url} />
src/app/components/CalendarEventForm.svelte
+1 -1
View File
@@ -155,7 +155,7 @@
{#snippet input()} {#snippet input()}
<div <div
class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100"> 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} /> <EditorContent {editor} />
</div> </div>
<Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}> <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
src/app/components/CalendarEventHeader.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
const end = $derived(parseInt(meta.end)) const end = $derived(parseInt(meta.end))
</script> </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> <p class="text-xl">{meta.title || meta.name}</p>
{#if !isNaN(start) && !isNaN(end)} {#if !isNaN(start) && !isNaN(end)}
{@const startDateDisplay = formatTimestampAsDate(start)} {@const startDateDisplay = formatTimestampAsDate(start)}
src/app/components/ChatCompose.svelte
+1 -1
View File
@@ -43,7 +43,7 @@
const uploading = writable(false) const uploading = writable(false)
const editorClass = $derived( const editorClass = $derived(
cx("chat-editor flex-grow overflow-hidden", { cx("chat-editor grow overflow-hidden", {
"pointer-events-none opacity-50": disabled, "pointer-events-none opacity-50": disabled,
}), }),
) )
src/app/components/ClassifiedActions.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
publishReaction({...template, event, relays: [url], protect: await shouldProtect}) publishReaction({...template, event, relays: [url], protect: await shouldProtect})
</script> </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} {#if h && showRoom}
<Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full"> <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
Posted in #<RoomName {h} {url} /> Posted in #<RoomName {h} {url} />
src/app/components/ClassifiedForm.svelte
+1 -1
View File
@@ -172,7 +172,7 @@
<p>Description*</p> <p>Description*</p>
{/snippet} {/snippet}
{#snippet input()} {#snippet input()}
<div class="note-editor flex-grow overflow-hidden"> <div class="note-editor grow overflow-hidden">
<EditorContent {editor} /> <EditorContent {editor} />
</div> </div>
{/snippet} {/snippet}
src/app/components/CommentActions.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
</script> </script>
<div class="flex flex-wrap items-center justify-between gap-2"> <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" /> <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
<ThunkStatusOrDeleted {event} /> <ThunkStatusOrDeleted {event} />
{#if showActivity} {#if showActivity}
src/app/components/EventInfo.svelte
+2 -2
View File
@@ -101,7 +101,7 @@
{/if} {/if}
<div class="relative"> <div class="relative">
<pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre> <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"> <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
<Icon icon={Copy} /> Copy <Icon icon={Copy} /> Copy
</Button> </Button>
@@ -109,6 +109,6 @@
</div> </div>
</ModalBody> </ModalBody>
<ModalFooter> <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> </ModalFooter>
</Modal> </Modal>
src/app/components/EventReply.svelte
+1 -1
View File
@@ -87,7 +87,7 @@
class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature"> 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="card2 mx-2 my-2 bg-alt shadow-md">
<div class="relative"> <div class="relative">
<div class="note-editor flex-grow overflow-hidden"> <div class="note-editor grow overflow-hidden">
<EditorContent {autofocus} {editor} /> <EditorContent {autofocus} {editor} />
</div> </div>
<Button <Button
src/app/components/GoalActions.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
publishReaction({...template, event, relays: [url], protect: await shouldProtect}) publishReaction({...template, event, relays: [url], protect: await shouldProtect})
</script> </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} {#if h && showRoom}
<Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full"> <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
Posted in #<RoomName {h} {url} /> Posted in #<RoomName {h} {url} />
src/app/components/GoalCreate.svelte
+2 -2
View File
@@ -146,7 +146,7 @@
<p>Details*</p> <p>Details*</p>
{/snippet} {/snippet}
{#snippet input()} {#snippet input()}
<div class="note-editor flex-grow overflow-hidden"> <div class="note-editor grow overflow-hidden">
<EditorContent {editor} /> <EditorContent {editor} />
</div> </div>
{/snippet} {/snippet}
@@ -168,7 +168,7 @@
Goal Amount (sats)* Goal Amount (sats)*
{/snippet} {/snippet}
{#snippet input()} {#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"> <label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} /> <Icon icon={Bolt} />
<input bind:value={amount} type="number" class="w-28" /> <input bind:value={amount} type="number" class="w-28" />
src/app/components/NoteContentEventTime.svelte
+2 -2
View File
@@ -9,10 +9,10 @@
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<CalendarEventDate event={props.event} /> <CalendarEventDate event={props.event} />
<div class="flex flex-grow flex-col"> <div class="flex grow flex-col">
<CalendarEventHeader event={props.event} /> <CalendarEventHeader event={props.event} />
<div class="flex py-2 opacity-50"> <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> </div>
<Content {...props} /> <Content {...props} />
</div> </div>
src/app/components/NoteContentMinimalEventTime.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
</script> </script>
<div class="flex flex-col"> <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> <p class="text-sm">{meta.title || meta.name}</p>
{#if !isNaN(start) && !isNaN(end)} {#if !isNaN(start) && !isNaN(end)}
{@const startDateDisplay = formatTimestampAsDate(start)} {@const startDateDisplay = formatTimestampAsDate(start)}
src/app/components/PrimaryNav.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
</script> </script>
<div <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}> <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
<PrimaryNavSpaces /> <PrimaryNavSpaces />
{#if PLATFORM_RELAYS.length > 0} {#if PLATFORM_RELAYS.length > 0}
src/app/components/ProfileSpaces.svelte
+2 -2
View File
@@ -25,10 +25,10 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
{#each spaceUrls as url (url)} {#each spaceUrls as url (url)}
<div class="card2 bg-alt flex flex-row items-center gap-2"> <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} /> <RelayIcon {url} size={12} />
</div> </div>
<div class="flex flex-grow flex-col"> <div class="flex grow flex-col">
<RelayName {url} /> <RelayName {url} />
<div class="text-sm opacity-75"> <div class="text-sm opacity-75">
{url} {url}
src/app/components/RelayAdd.svelte
+1 -1
View File
@@ -121,6 +121,6 @@
</div> </div>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button class="btn btn-primary flex-grow" onclick={back}>Done</Button> <Button class="btn btn-primary grow" onclick={back}>Done</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
src/app/components/RelaySettingsItem.svelte
+2 -2
View File
@@ -26,8 +26,8 @@
type="button" type="button"
class="btn font-normal flex h-[unset] w-full flex-nowrap py-4 text-left items-start justify-between" class="btn font-normal flex h-[unset] w-full flex-nowrap py-4 text-left items-start justify-between"
{onclick}> {onclick}>
<div class="flex flex-grow flex-row items-start gap-4"> <div class="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 h-7 w-7 shrink-0 items-center justify-center">
<Icon {icon} /> <Icon {icon} />
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
src/app/components/RoomCompose.svelte
+1 -1
View File
@@ -132,7 +132,7 @@
</Button> </Button>
</Tippy> </Tippy>
</div> </div>
<div class="chat-editor flex-grow overflow-hidden"> <div class="chat-editor grow overflow-hidden">
<EditorContent {autofocus} {editor} /> <EditorContent {autofocus} {editor} />
</div> </div>
<Button <Button
src/app/components/RoomForm.svelte
+1 -1
View File
@@ -131,7 +131,7 @@
<p>Icon</p> <p>Icon</p>
{/snippet} {/snippet}
{#snippet input()} {#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} {#if imagePreview}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-sm opacity-75">Selected:</span> <span class="text-sm opacity-75">Selected:</span>
src/app/components/RoomItem.svelte
+1 -1
View File
@@ -94,7 +94,7 @@
{:else} {:else}
<div class="w-8 shrink-0"></div> <div class="w-8 shrink-0"></div>
{/if} {/if}
<div class="min-w-0 flex-grow pr-1"> <div class="min-w-0 grow pr-1">
{#if showPubkey} {#if showPubkey}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}"> <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
src/app/components/RoomNameWithImage.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
const {url, h, ...props}: Props = $props() const {url, h, ...props}: Props = $props()
</script> </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"> <div class="flex items-center gap-3">
<RoomImage {url} {h} /> <RoomImage {url} {h} />
<div class="min-w-0 overflow-hidden text-ellipsis"> <div class="min-w-0 overflow-hidden text-ellipsis">
src/app/components/SpaceBar.svelte
+1 -1
View File
@@ -27,7 +27,7 @@
<Button onclick={back} class="place-self-start pr-3 md:hidden"> <Button onclick={back} class="place-self-start pr-3 md:hidden">
<Icon icon={ArrowLeft} size={7} /> <Icon icon={ArrowLeft} size={7} />
</Button> </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 flex-col">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
{@render title?.()} {@render title?.()}
src/app/components/SpaceEdit.svelte
+1 -1
View File
@@ -134,7 +134,7 @@
<p>Icon</p> <p>Icon</p>
{/snippet} {/snippet}
{#snippet input()} {#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} {#if imagePreview}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-sm opacity-75">Selected:</span> <span class="text-sm opacity-75">Selected:</span>
src/app/components/SpaceInvite.svelte
+1 -1
View File
@@ -100,6 +100,6 @@
</div> </div>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button class="btn btn-primary flex-grow" onclick={back}>Done</Button> <Button class="btn btn-primary grow" onclick={back}>Done</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
src/app/components/SpaceMenu.svelte
+6 -6
View File
@@ -140,7 +140,7 @@
<div bind:this={element} class="flex min-h-0 flex-1 flex-col"> <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"> <SecondaryNavSection class="min-h-0 flex-1 flex flex-col overflow-hidden pb-0">
<div class="flex-shrink-0"> <div class="shrink-0">
<Button <Button
class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100" class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
onclick={openMenu}> onclick={openMenu}>
@@ -270,14 +270,14 @@
{/if} {/if}
{#if hasNip29($relay)} {#if hasNip29($relay)}
{#if $userRooms.length > 0} {#if $userRooms.length > 0}
<div class="h-2 flex-shrink-0"></div> <div class="h-2 shrink-0"></div>
<SecondaryNavHeader>Your Rooms</SecondaryNavHeader> <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
{/if} {/if}
{#each $userRooms as h (h)} {#each $userRooms as h (h)}
<SpaceMenuRoomItem {url} {h} /> <SpaceMenuRoomItem {url} {h} />
{/each} {/each}
{#if $otherRooms.length > 0} {#if $otherRooms.length > 0}
<div class="h-2 flex-shrink-0"></div> <div class="h-2 shrink-0"></div>
<SecondaryNavHeader> <SecondaryNavHeader>
{#if $userRooms.length > 0} {#if $userRooms.length > 0}
Other Rooms Other Rooms
@@ -296,7 +296,7 @@
<SpaceMenuRoomItem {url} {h} /> <SpaceMenuRoomItem {url} {h} />
{/each} {/each}
{#if $otherVoiceRooms.length > 0} {#if $otherVoiceRooms.length > 0}
<div class="h-2 flex-shrink-0"></div> <div class="h-2 shrink-0"></div>
<SecondaryNavHeader>Voice Rooms</SecondaryNavHeader> <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
{#each $otherVoiceRooms as h (h)} {#each $otherVoiceRooms as h (h)}
<SpaceMenuRoomItem {url} {h} /> <SpaceMenuRoomItem {url} {h} />
@@ -309,11 +309,11 @@
</SecondaryNavItem> </SecondaryNavItem>
{/if} {/if}
{/if} {/if}
<div class="h-5 flex-shrink-0"></div> <div class="h-5 shrink-0"></div>
</div> </div>
</SecondaryNavSection> </SecondaryNavSection>
<div <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 /> <VoiceWidget />
<Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}> <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
<SocketStatusIndicator {url} /> <SocketStatusIndicator {url} />
src/app/components/ThreadActions.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
publishReaction({...template, event, relays: [url], protect: await shouldProtect}) publishReaction({...template, event, relays: [url], protect: await shouldProtect})
</script> </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} {#if h && showRoom}
<Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full"> <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
Posted in #<RoomName {h} {url} /> Posted in #<RoomName {h} {url} />
src/app/components/ThreadCreate.svelte
+1 -1
View File
@@ -130,7 +130,7 @@
<p>Message*</p> <p>Message*</p>
{/snippet} {/snippet}
{#snippet input()} {#snippet input()}
<div class="note-editor flex-grow overflow-hidden"> <div class="note-editor grow overflow-hidden">
<EditorContent {editor} /> <EditorContent {editor} />
</div> </div>
{/snippet} {/snippet}
src/app/components/WalletPay.svelte
+1 -1
View File
@@ -70,7 +70,7 @@
Amount (satoshis) Amount (satoshis)
{/snippet} {/snippet}
{#snippet input()} {#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"> <label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} /> <Icon icon={Bolt} />
<input <input
src/app/components/WalletReceive.svelte
+1 -1
View File
@@ -80,7 +80,7 @@
Amount (satoshis) Amount (satoshis)
{/snippet} {/snippet}
{#snippet input()} {#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"> <label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} /> <Icon icon={Bolt} />
<input bind:value={sats} type="number" class="w-14" placeholder="0" /> <input bind:value={sats} type="number" class="w-14" placeholder="0" />
src/app/components/Zap.svelte
+2 -2
View File
@@ -125,7 +125,7 @@
Emoji Reaction Emoji Reaction
{/snippet} {/snippet}
{#snippet input()} {#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"> <EmojiButton {onEmoji} class="btn btn-neutral">
{content} {content}
</EmojiButton> </EmojiButton>
@@ -137,7 +137,7 @@
Amount Amount
{/snippet} {/snippet}
{#snippet input()} {#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"> <label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} /> <Icon icon={Bolt} />
<input bind:value={amount} type="number" class="w-24" /> <input bind:value={amount} type="number" class="w-24" />
src/app/components/ZapInvoice.svelte
+3 -3
View File
@@ -158,7 +158,7 @@
</p> </p>
</div> </div>
<label class="input input-bordered flex w-full items-center justify-between gap-2"> <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}> <Button class="flex items-center" onclick={copyInvoice}>
<Icon icon={Copy} /> <Icon icon={Copy} />
</Button> </Button>
@@ -169,7 +169,7 @@
Emoji Reaction Emoji Reaction
{/snippet} {/snippet}
{#snippet input()} {#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"> <EmojiButton {onEmoji} class="btn btn-neutral">
{content} {content}
</EmojiButton> </EmojiButton>
@@ -181,7 +181,7 @@
Amount Amount
{/snippet} {/snippet}
{#snippet input()} {#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"> <label class="input input-bordered flex items-center gap-2">
<Icon icon={Bolt} /> <Icon icon={Bolt} />
<input bind:value={amount} type="number" class="w-24" /> <input bind:value={amount} type="number" class="w-24" />
src/lib/components/CardButton.svelte
+2 -2
View File
@@ -12,8 +12,8 @@
</script> </script>
<div class="btn flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}"> <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 grow flex-row items-start gap-4">
<div class="flex h-14 w-12 flex-shrink-0 items-center justify-center"> <div class="flex h-14 w-12 shrink-0 items-center justify-center">
{@render props.icon?.()} {@render props.icon?.()}
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
src/lib/components/Dialog.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
const innerClass = $derived( const innerClass = $derived(
cx( 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", "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, "bg-alt shadow-m max-h-[90vh] flex flex-col max-w-full pb-sai sm:pb-0": !fullscreen,
src/lib/components/Divider.svelte
+2 -2
View File
@@ -9,9 +9,9 @@
</script> </script>
<div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50"> <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} {#if children}
<p>{@render children?.()}</p> <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} {/if}
</div> </div>
src/lib/components/ModalFooter.svelte
+2 -2
View File
@@ -8,9 +8,9 @@
const {children}: Props = $props() const {children}: Props = $props()
</script> </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 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?.()} {@render children?.()}
</div> </div>
</div> </div>
src/lib/components/SecondaryNav.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
<div <div
class={cx( 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, props.class,
)}> )}>
{@render children?.()} {@render children?.()}
src/lib/components/SecondaryNavItem.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
const active = $derived($page.url.pathname === href) const active = $derived($page.url.pathname === href)
const wrapperClass = $derived( 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, "hover:bg-base-100 hover:text-base-content": true,
"text-base-content bg-base-100": active, "text-base-content bg-base-100": active,
"tooltip tooltip-right": title, "tooltip tooltip-right": title,
src/routes/chat/+page.svelte
+2 -2
View File
@@ -37,8 +37,8 @@
<ContentSearch class="md:hidden"> <ContentSearch class="md:hidden">
{#snippet input()} {#snippet input()}
<div class="row-2 min-w-0 flex-grow items-center"> <div class="row-2 min-w-0 grow items-center">
<label class="input input-bordered flex flex-grow items-center gap-2"> <label class="input input-bordered flex grow items-center gap-2">
<Icon icon={Magnifier} /> <Icon icon={Magnifier} />
<input <input
bind:value={term} bind:value={term}
src/routes/settings/profile/+page.svelte
+2 -2
View File
@@ -116,9 +116,9 @@
{/snippet} {/snippet}
{#snippet input()} {#snippet input()}
<label class="input input-bordered flex w-full items-center justify-between gap-2"> <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} /> <Icon icon={LinkRound} />
<input readonly class="ellipsize flex-grow" value={npub} /> <input readonly class="ellipsize grow" value={npub} />
</div> </div>
<Button class="flex items-center" onclick={copyNpub}> <Button class="flex items-center" onclick={copyNpub}>
<Icon icon={Copy} /> <Icon icon={Copy} />
src/routes/spaces/[relay]/+page.svelte
+2 -2
View File
@@ -22,10 +22,10 @@
<svelte:window bind:innerWidth={width} /> <svelte:window bind:innerWidth={width} />
{#if width <= md} {#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 /> <PrimaryNavSpaces />
</div> </div>
<SecondaryNav class="!flex !w-auto flex-grow pb-16"> <SecondaryNav class="!flex !w-auto grow pb-16">
<SpaceMenu {url} /> <SpaceMenu {url} />
</SecondaryNav> </SecondaryNav>
{/if} {/if}
src/routes/spaces/[relay]/[h]/+page.svelte
+3 -3
View File
@@ -398,9 +398,9 @@
{id} {id}
class="flex items-center py-2 text-xs transition-colors" class="flex items-center py-2 text-xs transition-colors"
class:opacity-0={showFixedNewMessages}> 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> <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> </div>
{:else if type === "date"} {:else if type === "date"}
<Divider>{value}</Divider> <Divider>{value}</Divider>
@@ -481,7 +481,7 @@
{/if} {/if}
</div> </div>
{#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected} {#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 /> <VoiceWidget />
</div> </div>
{/if} {/if}
src/routes/spaces/[relay]/calendar/+page.svelte
+2 -2
View File
@@ -128,9 +128,9 @@
<div class={"calendar-event-" + event.id}> <div class={"calendar-event-" + event.id}>
{#if isFirstFutureEvent} {#if isFirstFutureEvent}
<div class="flex items-center gap-2 p-2"> <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> <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> </div>
{/if} {/if}
{#if dateDisplay} {#if dateDisplay}
src/routes/spaces/[relay]/calendar/[address]/+page.svelte
+2 -2
View File
@@ -69,11 +69,11 @@
<div class="card2 bg-alt col-3 z-feature"> <div class="card2 bg-alt col-3 z-feature">
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<CalendarEventDate event={$event} /> <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} /> <CalendarEventHeader event={$event} />
<CalendarEventMeta event={$event} {url} /> <CalendarEventMeta event={$event} {url} />
<div class="flex py-2 opacity-50"> <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> </div>
<Content showEntire event={$event} {url} /> <Content showEntire event={$event} {url} />
</div> </div>
src/routes/spaces/[relay]/chat/+page.svelte
+2 -2
View File
@@ -311,9 +311,9 @@
{id} {id}
class="flex items-center py-2 text-xs transition-colors" class="flex items-center py-2 text-xs transition-colors"
class:opacity-0={showFixedNewMessages}> 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> <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> </div>
{:else if type === "date"} {:else if type === "date"}
<Divider>{value}</Divider> <Divider>{value}</Divider>