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.

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}

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>

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>