From 2138a4a890582b22a2a73ed5aa3ebf2d11e9cf49 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 20:19:58 +0200
Subject: [PATCH] Shrink menu item text and drop the border on the account
 dropdown

MenuItem used text-sm (14px) for its label, which read as oversized
for a dropdown; drop to text-xs (12px). This is a shared component
(AccountMenu, ContextMenu, MobileHeader's menu), so all of them get
the more compact sizing.

Add a border prop to GlassMenu (default true, unchanged for
ContextMenu) and set it false specifically on AccountMenu's dropdown,
per feedback that its border didn't fit.
---
 .../src/lib/components/ui/overlay/AccountMenu.svelte      | 5 ++++-
 web-player/src/lib/components/ui/overlay/GlassMenu.svelte | 8 ++++++--
 web-player/src/lib/components/ui/overlay/MenuItem.svelte  | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/ui/overlay/AccountMenu.svelte b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
index 9554336..1ac82e6 100644
--- a/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
@@ -44,7 +44,10 @@
 	{@render trigger({ toggle, open })}
 
 	{#if open}
-		<GlassMenu class="absolute top-full right-0 z-(--z-menu) mt-2 overflow-hidden {WIDTH[width]}">
+		<GlassMenu
+			border={false}
+			class="absolute top-full right-0 z-(--z-menu) mt-2 overflow-hidden {WIDTH[width]}"
+		>
 			<MenuItem icon={User} label="Ver perfil" href="/user/{user.sub}" onclick={close} />
 			{@render extraItems?.({ close })}
 			{#if accountUrl}
diff --git a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
index 9b8652b..264a020 100644
--- a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
@@ -4,12 +4,16 @@
 	interface Props {
 		class?: string;
 		style?: string;
+		border?: boolean;
 		children: Snippet;
 	}
 
-	let { class: klass = '', style = '', children }: Props = $props();
+	let { class: klass = '', style = '', border = true, children }: Props = $props();
 </script>
 
-<div class="glass-panel animate-pop rounded-panel border border-hairline p-1.5 {klass}" {style}>
+<div
+	class="glass-panel animate-pop rounded-panel p-1.5 {border ? 'border border-hairline' : ''} {klass}"
+	{style}
+>
 	{@render children()}
 </div>
diff --git a/web-player/src/lib/components/ui/overlay/MenuItem.svelte b/web-player/src/lib/components/ui/overlay/MenuItem.svelte
index e4743e7..c01c8c9 100644
--- a/web-player/src/lib/components/ui/overlay/MenuItem.svelte
+++ b/web-player/src/lib/components/ui/overlay/MenuItem.svelte
@@ -24,7 +24,7 @@
 	}: Props = $props();
 
 	const classes = $derived(
-		`flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-sm font-medium text-fg-2 transition hover:bg-hover ${klass}`
+		`flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-xs font-medium text-fg-2 transition hover:bg-hover ${klass}`
 	);
 </script>