From ff94d4029ddd81647b77539a6d50d94a3b946ab6 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Fri, 20 Mar 2026 11:53:30 +0530
Subject: [PATCH 1/3] chore: UX changes for low res display

- add spacing for hover opened menus with padding
- increase stroke-width for svg icons
- replace mobile icon with (https://lucide.dev/icons/smartphone)
---
 .../_base/BaseCard/BaseEditingCard.svelte     |   2 +-
 .../core/TextCard/TextCardSettings.svelte     | 128 ++++++++++--------
 src/lib/website/EditBar.svelte                |  17 ++-
 src/lib/website/Pronouns.svelte               |   2 +-
 4 files changed, 80 insertions(+), 69 deletions(-)

diff --git a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
index ed3b975..75baf84 100644
--- a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
+++ b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
@@ -298,7 +298,7 @@
 
 			<div
 				class={[
-					'absolute -bottom-13 w-full items-center justify-center text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
+					'translate absolute -bottom-12 w-full items-center justify-center pt-1.5 text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
 					colorPopoverOpen || settingsPopoverOpen ? 'inline-flex' : 'hidden'
 				]}
 			>
diff --git a/src/lib/cards/core/TextCard/TextCardSettings.svelte b/src/lib/cards/core/TextCard/TextCardSettings.svelte
index 44327e9..7b8e7d6 100644
--- a/src/lib/cards/core/TextCard/TextCardSettings.svelte
+++ b/src/lib/cards/core/TextCard/TextCardSettings.svelte
@@ -21,56 +21,53 @@
 			}
 		}
 	>
-		<ToggleGroupItem size="sm" value="top" class={classes}
-			><svg
+		<ToggleGroupItem size="sm" value="top" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				><rect width="6" height="16" x="4" y="6" rx="2" /><rect
-					width="6"
-					height="9"
-					x="14"
-					y="6"
-					rx="2"
-				/><path d="M22 2H2" /></svg
+				class="size-4"
 			>
+				<rect width="6" height="16" x="4" y="6" rx="2" />
+				<rect width="6" height="9" x="14" y="6" rx="2" />
+				<path d="M22 2H2" />
+			</svg>
 		</ToggleGroupItem>
-		<ToggleGroupItem size="sm" value="center" class={classes}
-			><svg
+		<ToggleGroupItem size="sm" value="center" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
-					d="M22 4H2"
-				/></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="bottom" class={classes}
-			><svg
+				class="size-4"
+			>
+				<rect width="10" height="6" x="7" y="9" rx="2" />
+				<path d="M22 20H2" />
+				<path d="M22 4H2" />
+			</svg>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="bottom" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				><rect width="14" height="6" x="5" y="12" rx="2" /><rect
-					width="10"
-					height="6"
-					x="7"
-					y="2"
-					rx="2"
-				/><path d="M2 22h20" /></svg
-			></ToggleGroupItem
-		>
+			>
+				<rect width="14" height="6" x="5" y="12" rx="2" />
+				<rect width="10" height="6" x="7" y="2" rx="2" />
+				<path d="M2 22h20" />
+			</svg>
+		</ToggleGroupItem>
 	</ToggleGroup>
 
 	<ToggleGroup
@@ -85,39 +82,52 @@
 			}
 		}
 	>
-		<ToggleGroupItem size="sm" value="left" class={classes}
-			><svg
+		<ToggleGroupItem size="sm" value="left" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="center" class={classes}
-			><svg
+				stroke-linejoin="round"
+			>
+				<path d="M21 5H3" />
+				<path d="M15 12H3" />
+				<path d="M17 19H3" />
+			</svg>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="center" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="right" class={classes}
-			><svg
+				stroke-linejoin="round"
+				class="size-4"
+			>
+				<path d="M21 5H3" />
+				<path d="M17 12H7" />
+				<path d="M19 19H5" />
+			</svg>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="right" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
-			></ToggleGroupItem
-		>
+				stroke-linejoin="round"
+			>
+				<path d="M21 5H3" />
+				<path d="M21 12H9" />
+				<path d="M21 19H7" />
+			</svg>
+		</ToggleGroupItem>
 	</ToggleGroup>
 
 	<div>
@@ -135,14 +145,15 @@
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
-				><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
-					d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
-				/><path d="M3.304 13h6.392" /></svg
 			>
+				<path d="m14 12 4 4 4-4" />
+				<path d="M18 16V7" />
+				<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+				<path d="M3.304 13h6.392" />
+			</svg>
 		</Button>
 		<Button
 			variant="ghost"
@@ -158,14 +169,15 @@
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
-				><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
-					d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
-				/><path d="M3.304 13h6.392" /></svg
 			>
+				<path d="m14 11 4-4 4 4" />
+				<path d="M18 16V7" />
+				<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+				<path d="M3.304 13h6.392" />
+			</svg>
 		</Button>
 	</div>
 </div>
diff --git a/src/lib/website/EditBar.svelte b/src/lib/website/EditBar.svelte
index 1fd53a9..b36933c 100644
--- a/src/lib/website/EditBar.svelte
+++ b/src/lib/website/EditBar.svelte
@@ -352,17 +352,16 @@
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
 					viewBox="0 0 24 24"
-					stroke-width="1.5"
+					fill="none"
 					stroke="currentColor"
-					class="size-6"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="size-7"
 				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
-					/>
+					<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+					<path d="M12 18h.01" />
 				</svg>
 			</Toggle>
 			{#if hasUnsavedChanges}
@@ -378,7 +377,7 @@
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
-						stroke-width="1.5"
+						stroke-width="2"
 						stroke="currentColor"
 						class="size-5"
 					>
diff --git a/src/lib/website/Pronouns.svelte b/src/lib/website/Pronouns.svelte
index 3cc0bcd..127ed11 100644
--- a/src/lib/website/Pronouns.svelte
+++ b/src/lib/website/Pronouns.svelte
@@ -69,7 +69,7 @@
 {/if}
 
 {#if editing}
-	<Button size="sm" onclick={openModal}>
+	<Button size="iconLg" onclick={openModal}>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
-- 
2.51.2


From f4b1841bddccb6c22cf64640d07f36b1c7eb6c58 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Fri, 20 Mar 2026 11:56:38 +0530
Subject: [PATCH 2/3] chore: lint

---
 src/lib/cards/social/FriendsCard/FriendsCard.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/cards/social/FriendsCard/FriendsCard.svelte b/src/lib/cards/social/FriendsCard/FriendsCard.svelte
index 855dd12..5704644 100644
--- a/src/lib/cards/social/FriendsCard/FriendsCard.svelte
+++ b/src/lib/cards/social/FriendsCard/FriendsCard.svelte
@@ -22,7 +22,10 @@
 
 	let profiles = $derived.by(() => {
 		return dids
-			.map((did) => clientProfiles.find((p) => p.did === did) ?? serverProfiles.find((p) => p.did === did))
+			.map(
+				(did) =>
+					clientProfiles.find((p) => p.did === did) ?? serverProfiles.find((p) => p.did === did)
+			)
 			.filter((p): p is FriendsProfile => !!p);
 	});
 
-- 
2.51.2


From 9ab05fc57dba03bd708e8ebc60ef14f4fdda419a Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Fri, 20 Mar 2026 12:28:41 +0530
Subject: [PATCH 3/3] chore: update more settings & label

---
 src/lib/cards/_base/BaseCard/BaseCard.svelte  |   4 +-
 .../_base/BaseCard/BaseEditingCard.svelte     |   6 +-
 .../core/ImageCard/ImageCardSettings.svelte   |   4 +-
 .../SectionCard/SectionCardSettings.svelte    | 125 ++++++++++--------
 4 files changed, 74 insertions(+), 65 deletions(-)

diff --git a/src/lib/cards/_base/BaseCard/BaseCard.svelte b/src/lib/cards/_base/BaseCard/BaseCard.svelte
index e179c47..7413b1e 100644
--- a/src/lib/cards/_base/BaseCard/BaseCard.svelte
+++ b/src/lib/cards/_base/BaseCard/BaseCard.svelte
@@ -64,14 +64,14 @@
     --dw: ${item.w};
     --dh: ${item.h};
     --dm: ${margin}px;
-	
+
 	--columns: ${COLUMNS}`}
 	{...rest}
 >
 	<div
 		class={[
 			'text-base-900 dark:text-base-50 relative isolate h-full w-full overflow-hidden',
-			!fillPage ? 'rounded-[23px]' : '',
+			!fillPage ? 'rounded-3xl' : '',
 			color !== 'base' && color != 'transparent' ? 'light' : ''
 		]}
 	>
diff --git a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
index 75baf84..3235d5c 100644
--- a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
+++ b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
@@ -210,7 +210,7 @@
 	{#if cardDef.canHaveLabel}
 		<div
 			class={cn(
-				'bg-base-200/50 dark:bg-base-900/50 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 backdrop-blur-md',
+				'bg-base-200/70 dark:bg-base-900/70 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-md rounded-tl-2xl px-2.25 py-0.75 backdrop-blur-md',
 				!item.cardData.label && 'hidden lg:group-hover/card:block'
 			)}
 		>
@@ -298,7 +298,7 @@
 
 			<div
 				class={[
-					'translate absolute -bottom-12 w-full items-center justify-center pt-1.5 text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
+					'translate absolute -bottom-13 w-full items-center justify-center pt-2.5 text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
 					colorPopoverOpen || settingsPopoverOpen ? 'inline-flex' : 'hidden'
 				]}
 			>
@@ -446,7 +446,7 @@
 						stroke-width="2"
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						class=" dark:text-base-400 text-base-600 size-4"
+						class="dark:text-base-300 text-base-600 size-4"
 					>
 						<circle cx="9" cy="12" r="1" />
 						<circle cx="9" cy="5" r="1" />
diff --git a/src/lib/cards/core/ImageCard/ImageCardSettings.svelte b/src/lib/cards/core/ImageCard/ImageCardSettings.svelte
index 3f6cb48..5975885 100644
--- a/src/lib/cards/core/ImageCard/ImageCardSettings.svelte
+++ b/src/lib/cards/core/ImageCard/ImageCardSettings.svelte
@@ -40,8 +40,8 @@
 	}}
 	placeholder="Enter link"
 />
-<Button onclick={updateLink} size="icon"
-	><svg
+<Button onclick={updateLink} size="icon">
+	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		fill="none"
 		viewBox="0 0 24 24"
diff --git a/src/lib/cards/core/SectionCard/SectionCardSettings.svelte b/src/lib/cards/core/SectionCard/SectionCardSettings.svelte
index 0a8e194..6ea8d28 100644
--- a/src/lib/cards/core/SectionCard/SectionCardSettings.svelte
+++ b/src/lib/cards/core/SectionCard/SectionCardSettings.svelte
@@ -22,56 +22,51 @@
 			}
 		}
 	>
-		<ToggleGroupItem size="sm" value="top" class={classes}
-			><svg
+		<ToggleGroupItem size="sm" value="top" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				><rect width="6" height="16" x="4" y="6" rx="2" /><rect
-					width="6"
-					height="9"
-					x="14"
-					y="6"
-					rx="2"
-				/><path d="M22 2H2" /></svg
 			>
+				<rect width="6" height="16" x="4" y="6" rx="2" />
+				<rect width="6" height="9" x="14" y="6" rx="2" />
+				<path d="M22 2H2" />
+			</svg>
 		</ToggleGroupItem>
-		<ToggleGroupItem size="sm" value="center" class={classes}
-			><svg
+		<ToggleGroupItem size="sm" value="center" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
-					d="M22 4H2"
-				/></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="bottom" class={classes}
-			><svg
+			>
+				<rect width="10" height="6" x="7" y="9" rx="2" />
+				<path d="M22 20H2" />
+				<path d="M22 4H2" />
+			</svg>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="bottom" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				><rect width="14" height="6" x="5" y="12" rx="2" /><rect
-					width="10"
-					height="6"
-					x="7"
-					y="2"
-					rx="2"
-				/><path d="M2 22h20" /></svg
-			></ToggleGroupItem
-		>
+			>
+				<rect width="14" height="6" x="5" y="12" rx="2" />
+				<rect width="10" height="6" x="7" y="2" rx="2" />
+				<path d="M2 22h20" />
+			</svg>
+		</ToggleGroupItem>
 	</ToggleGroup>
 
 	<ToggleGroup
@@ -86,39 +81,51 @@
 			}
 		}
 	>
-		<ToggleGroupItem size="sm" value="left" class={classes}
-			><svg
+		<ToggleGroupItem size="sm" value="left" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="center" class={classes}
-			><svg
+				stroke-linejoin="round"
+			>
+				<path d="M21 5H3" />
+				<path d="M15 12H3" />
+				<path d="M17 19H3" />
+			</svg>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="center" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
-			></ToggleGroupItem
-		>
-		<ToggleGroupItem size="sm" value="right" class={classes}
-			><svg
+				stroke-linejoin="round"
+			>
+				<path d="M21 5H3" />
+				<path d="M17 12H7" />
+				<path d="M19 19H5" />
+			</svg>
+		</ToggleGroupItem>
+		<ToggleGroupItem size="sm" value="right" class={classes}>
+			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
-				stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
-			></ToggleGroupItem
-		>
+				stroke-linejoin="round"
+			>
+				<path d="M21 5H3" />
+				<path d="M21 12H9" />
+				<path d="M21 19H7" />
+			</svg>
+		</ToggleGroupItem>
 	</ToggleGroup>
 
 	<div>
@@ -136,14 +143,15 @@
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
-				><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
-					d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
-				/><path d="M3.304 13h6.392" /></svg
 			>
+				<path d="m14 12 4 4 4-4" />
+				<path d="M18 16V7" />
+				<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+				<path d="M3.304 13h6.392" />
+			</svg>
 		</Button>
 		<Button
 			variant="ghost"
@@ -162,14 +170,15 @@
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
-				stroke-width="2"
+				stroke-width="3"
 				stroke-linecap="round"
 				stroke-linejoin="round"
-				class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
-				><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
-					d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
-				/><path d="M3.304 13h6.392" /></svg
 			>
+				<path d="m14 11 4-4 4 4" />
+				<path d="M18 16V7" />
+				<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+				<path d="M3.304 13h6.392" />
+			</svg>
 		</Button>
 	</div>
 </div>
-- 
2.51.2