From b4a26c367b6bc25bc0c236a7849e95d6b598b41a Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Tue, 9 Jun 2026 23:18:26 +0200
Subject: [PATCH] style: toolbar optimization

---
 src/lib/editor/ColorPicker.svelte     | 12 ++++++++++++
 src/lib/editor/ToolbarExpanded.svelte | 11 ++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/lib/editor/ColorPicker.svelte b/src/lib/editor/ColorPicker.svelte
index a2d0bf8..82d4ae4 100644
--- a/src/lib/editor/ColorPicker.svelte
+++ b/src/lib/editor/ColorPicker.svelte
@@ -372,6 +372,7 @@
   </div>
   {#if open && view === 'palette'}
     <div class="color-dropdown">
+      <div class="color-title">{title}</div>
       <button
         class="color-automatic"
         class:active={currentColor === null}
@@ -525,6 +526,17 @@
     gap: 4px;
   }
 
+  .color-title {
+    padding: 0.1rem 0.2rem 0.2rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    user-select: none;
+  }
+
   .color-automatic {
     display: block;
     width: 100%;
diff --git a/src/lib/editor/ToolbarExpanded.svelte b/src/lib/editor/ToolbarExpanded.svelte
index d879878..9fa3afb 100644
--- a/src/lib/editor/ToolbarExpanded.svelte
+++ b/src/lib/editor/ToolbarExpanded.svelte
@@ -780,11 +780,11 @@
     <div class="lh-picker" use:lineHeightPickerClickOutside>
       <button class="lh-trigger" onclick={openLineHeightPicker} title="Line &amp; paragraph spacing">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <line x1="5" y1="3"  x2="14" y2="3"  stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          <line x1="5" y1="8"  x2="14" y2="8"  stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          <line x1="5" y1="13" x2="14" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          <path d="M2 5.5V1.5M2 1.5L1 2.8M2 1.5L3 2.8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M2 10.5V14.5M2 14.5L1 13.2M2 14.5L3 13.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+          <line x1="7" y1="3"  x2="16" y2="3"  stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          <line x1="7" y1="8"  x2="16" y2="8"  stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          <line x1="7" y1="13" x2="16" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          <path d="M2 5.5V1.5M2 1.5L0.3 3.4M2 1.5L3.7 3.4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M2 10.5V14.5M2 14.5L0.3 12.6M2 14.5L3.7 12.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
         <svg width="8" height="8" viewBox="0 0 8 8" fill="none" aria-hidden="true">
           <path d="M1 2.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
@@ -905,6 +905,7 @@
       </button>
       {#if alignOpen}
         <div class="align-dropdown">
+          <div class="lh-section-label">Alignment</div>
           {#each ALIGNMENTS as a}
             <button
               class="align-option"