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] 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