diff --git a/src/lib/components/FormattingToolbar.svelte b/src/lib/components/FormattingToolbar.svelte index 7652d66..93f85b5 100644 --- a/src/lib/components/FormattingToolbar.svelte +++ b/src/lib/components/FormattingToolbar.svelte @@ -22,7 +22,8 @@ AlignRight, AlignJustify, Minus, - ChevronDown + ChevronDown, + Ellipsis } from 'lucide-svelte'; interface Props { @@ -80,11 +81,11 @@ const chevronSize = 14; function btnClass(active: boolean = false, disabled: boolean = false): string { - return `rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''} ${disabled ? 'opacity-30' : ''}`; + return `shrink-0 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''} ${disabled ? 'opacity-30' : ''}`; } function dropdownBtnClass(active: boolean = false): string { - return `flex items-center gap-0.5 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''}`; + return `shrink-0 flex items-center gap-0.5 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''}`; } function dropdownItemClass(active: boolean = false): string { @@ -109,31 +110,9 @@
- - - - -
- {#if openDropdown === 'heading'} -
+
{#if openDropdown === 'list'} -
+
{#if openDropdown === 'link'} -
+
{ e.preventDefault(); applyLink(); }} @@ -312,11 +291,29 @@ title="More options" data-testid="format-more" > - - + {#if openDropdown === 'more'} -
+
+ + +