fix: center spellbook dropdown

This commit is contained in:
Alejandro Gómez
2026-03-25 11:23:35 +01:00
parent 9ded99420f
commit b14dce2d55
2 changed files with 20 additions and 19 deletions

View File

@@ -1,4 +1,4 @@
import { WandSparkles, Play, Star } from "lucide-react";
import { WandSparkles, Star } from "lucide-react";
import { useAccount } from "@/hooks/useAccount";
import { useFavoriteSpells } from "@/hooks/useFavoriteSpells";
import { useNostrEvent } from "@/hooks/useNostrEvent";
@@ -62,14 +62,15 @@ function FavoriteSpellItem({ pointer }: { pointer: EventPointer }) {
onClick={handleCast}
className="cursor-pointer py-2 hover:bg-muted focus:bg-muted transition-colors"
>
<Play className="size-3.5 mr-2 text-muted-foreground" />
<div className="flex flex-col min-w-0 flex-1">
<span className="text-sm truncate">
{decoded.name || "Unnamed Spell"}
</span>
<span className="text-[10px] font-mono text-muted-foreground truncate">
{decoded.command}
{decoded.name || decoded.command}
</span>
{decoded.name && (
<span className="text-[10px] font-mono text-muted-foreground truncate">
{decoded.command}
</span>
)}
</div>
</DropdownMenuItem>
);

View File

@@ -61,21 +61,21 @@ export function AppShell({ children, hideBottomBar = false }: AppShellProps) {
/>
<GlobalAuthPrompt />
<main className="h-dvh w-screen flex flex-col bg-background text-foreground">
<header className="flex flex-row items-center justify-between px-1 border-b border-border">
<button
onClick={() => setCommandLauncherOpen(true)}
className="p-1.5 text-muted-foreground hover:text-accent transition-colors cursor-crosshair flex items-center gap-2"
title="Launch command (Cmd+K)"
aria-label="Launch command palette"
>
<Terminal className="size-4" />
</button>
<div className="flex items-center gap-2">
<SpellbookDropdown />
<header className="flex flex-row items-center px-1 border-b border-border">
<div className="flex-1 flex items-center">
<button
onClick={() => setCommandLauncherOpen(true)}
className="p-1.5 text-muted-foreground hover:text-accent transition-colors cursor-crosshair flex items-center gap-2"
title="Launch command (Cmd+K)"
aria-label="Launch command palette"
>
<Terminal className="size-4" />
</button>
</div>
<div className="flex items-center">
<SpellbookDropdown />
<div className="flex-1 flex items-center justify-end">
<FavoriteSpellsDropdown />
<UserMenu />
</div>