fix: detail page button layouts and AddToMenu positioning (#515)

* fix: detail page button layouts

playlist detail page:
- show edit/delete buttons on mobile (were hidden, only share showed)
- rename mobile-share-button to mobile-buttons for clarity

track detail page:
- remove bifurcated desktop layout (buttons on left/right sides)
- use centered button layout everywhere (like mobile had)
- simplify CSS by removing side-button-left/right styles

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* fix: AddToMenu opens upward when near bottom of viewport

when the menu trigger is close to the bottom of the viewport,
detect available space and open the menu upward instead of downward.
this prevents the menu from being cut off by the player.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

---------

Co-authored-by: Claude <[e-mail]>

frontend/src/lib/components/AddToMenu.svelte

···
 	let playlists = $state<Playlist[]>([]);
 	let loadingPlaylists = $state(false);
 	let addingToPlaylist = $state<string | null>(null);
+	let openUpward = $state(false);
+	let triggerRef = $state<HTMLButtonElement | null>(null);
 
 	// filter out the excluded playlist (must be after playlists state declaration)
 	let filteredPlaylists = $derived(
···
 	function toggleMenu(e: Event) {
 		e.stopPropagation();
 		if (disabled) return;
+
+		if (!menuOpen && triggerRef) {
+			// check if there's enough space below (accounting for player height ~150px)
+			const rect = triggerRef.getBoundingClientRect();
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const menuHeight = 300; // approximate menu height
+			const playerHeight = 150; // approximate player height
+			openUpward = spaceBelow < menuHeight + playerHeight;
+		}
+
 		menuOpen = !menuOpen;
 		if (!menuOpen) {
 			showPlaylistPicker = false;
···
 
 <div class="add-to-menu">
 	<button
+		bind:this={triggerRef}
 		class="trigger-button"
 		class:liked
 		class:loading
···
 
 	{#if menuOpen}
 		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="menu-dropdown" role="menu" tabindex="-1" onclick={(e) => {
+		<div class="menu-dropdown" class:open-upward={openUpward} role="menu" tabindex="-1" onclick={(e) => {
 			// don't stop propagation for links - let SvelteKit handle navigation
 			if (e.target instanceof HTMLAnchorElement || (e.target as HTMLElement).closest('a')) {
 				return;
···
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		overflow: hidden;
 		z-index: 10;
+	}
+
+	.menu-dropdown.open-upward {
+		top: auto;
+		bottom: calc(100% + 4px);
 	}
 
 	.menu-item {

frontend/src/routes/playlist/[id]/+page.svelte

···
 				</button>
 			{/if}
 			{/if}
-			<div class="mobile-share-button">
+			<div class="mobile-buttons">
 				<ShareButton url={$page.url.href} title="share playlist" />
+				{#if isOwner}
+					<button class="icon-btn" onclick={openEditModal} aria-label="edit playlist metadata" title="edit playlist metadata">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+							<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+						</svg>
+					</button>
+					<button class="icon-btn danger" onclick={() => showDeleteConfirm = true} aria-label="delete playlist" title="delete playlist">
+						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<polyline points="3 6 5 6 21 6"></polyline>
+							<path d="m19 6-.867 12.142A2 2 0 0 1 16.138 20H7.862a2 2 0 0 1-1.995-1.858L5 6"></path>
+							<path d="M10 11v6"></path>
+							<path d="M14 11v6"></path>
+							<path d="m9 6 .5-2h5l.5 2"></path>
+						</svg>
+					</button>
+				{/if}
 			</div>
 		</div>
 
···
 		padding-bottom: 0.5rem;
 	}
 
-	.mobile-share-button {
+	.mobile-buttons {
 		display: none;
 	}
 
···
 			display: none;
 		}
 
-		.mobile-share-button {
+		.mobile-buttons {
 			display: flex;
-			width: 100%;
+			gap: 0.5rem;
 			justify-content: center;
+			align-items: center;
 		}
 
 		.playlist-title {

frontend/src/routes/track/[id]/+page.svelte

···
 
 			<!-- track info wrapper -->
 			<div class="track-info-wrapper">
-				<div class="side-button-left">
-					{#if auth.isAuthenticated}
-						<AddToMenu
-							trackId={track.id}
-							trackTitle={track.title}
-							trackUri={track.atproto_record_uri}
-							trackCid={track.atproto_record_cid}
-							initialLiked={track.is_liked || false}
-						/>
-					{/if}
-				</div>
-
 				<div class="track-info">
 					<h1 class="track-title">{track.title}</h1>
 					<div class="track-metadata">
···
 						{/if}
 					</div>
 
-					<div class="mobile-side-buttons">
+					<div class="side-buttons">
 						{#if auth.isAuthenticated}
 							<AddToMenu
 								trackId={track.id}
···
 							add to queue
 						</button>
 					</div>
-				</div>
-
-				<div class="side-button-right">
-					<ShareButton url={shareUrl} title="share track" />
 				</div>
 			</div>
 		</div>
···
 		max-width: 600px;
 		display: flex;
 		align-items: flex-start;
-		gap: 1rem;
 		justify-content: center;
 	}
 
-	.side-button-left,
-	.side-button-right {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding-top: 0.5rem;
-	}
-
 	.track-info {
 		flex: 1;
 		min-width: 0;
···
 		color: var(--accent-hover);
 	}
 
-	.mobile-side-buttons {
-		display: none;
+	.side-buttons {
+		display: flex;
 		gap: 0.75rem;
 		justify-content: center;
 		align-items: center;
···
 			flex-direction: column;
 			align-items: center;
 			gap: 0.75rem;
-		}
-
-		.side-button-left,
-		.side-button-right {
-			display: none;
-		}
-
-		.mobile-side-buttons {
-			display: flex;
 		}
 
 		.track-info {