Compact format toolbar: smaller buttons, nowrap, overflow-x auto

src/css/components.css

@@ -355,13 +355,14 @@
 /* ── Formatting Toolbar ── */
 .format-toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 4px;
-  padding: 8px 14px;
+  gap: 3px;
+  padding: 6px 10px;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface);
-  overflow: visible;
+  overflow-x: auto;
+  overflow-y: hidden;
   position: relative;
   z-index: 50;
   flex-shrink: 0;
@@ -372,7 +373,7 @@
   align-items: center;
   gap: 1px;
   background: var(--color-border);
-  border-radius: 8px;
+  border-radius: 7px;
   overflow: hidden;
 }
 
@@ -386,8 +387,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border: none;
   background: var(--color-surface);
   color: var(--color-text-secondary);
@@ -419,9 +420,9 @@
 
 .fmt-divider {
   width: 1px;
-  height: 24px;
+  height: 22px;
   background: var(--color-border);
-  margin: 0 6px;
+  margin: 0 3px;
   flex-shrink: 0;
   opacity: 0.5;
 }
@@ -434,18 +435,18 @@
 .fmt-dropdown__trigger {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
+  gap: 5px;
+  padding: 4px 8px;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   background: var(--color-surface);
   color: var(--color-text-primary);
   font-family: inherit;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   cursor: pointer;
-  height: 34px;
-  min-width: 120px;
+  height: 30px;
+  min-width: 90px;
   transition: all 0.15s ease;
   white-space: nowrap;
 }