fix(ui): shrink the floating controls to 28px and drop the image block margin

The toolbars, link card and input popover used 32px controls with 18px
icons, taller than the 24px lines they float over and larger than a host
app's own controls. Every .mbe-tool is now a 28px control with a 16px
icon, so a bar is 36px tall with its 4px padding, and the popover input
matches.

An image kept its 8px inline margin when alone in its block, which
stacked on the block gap and left it 16px from the text around it. An
image block now has no margin; inline images keep theirs.

Author: boojack

e2e/image.spec.ts

@@ -198,6 +198,24 @@ test('the selected outline is drawn inside the image', async ({ page }) => {
   expect(await image(page).evaluate((el) => getComputedStyle(el).outlineOffset)).toBe('-2px');
 });
 
+test('an image block is as tall as its image and one block gap from the text around it', async ({ page }) => {
+  await open(page, 'above\n\n![chart|200](/img/400x200.svg)\n\nbelow\n');
+  const boxes = async () => {
+    const [above, block, below] = await page.locator('#editor > p').evaluateAll((els) => els.map((el) => el.getBoundingClientRect()));
+    const img = (await image(page).boundingBox())!;
+    return { block: block!.height, image: img.height, gapAbove: block!.top - above!.bottom, gapBelow: below!.top - block!.bottom };
+  };
+  expect(await boxes()).toEqual({ block: 100, image: 100, gapAbove: 8, gapBelow: 8 });
+  // Selecting the image changes nothing: the resize frame covers exactly the image.
+  await image(page).click();
+  await expect(resizeHandle(page, 'right')).toBeVisible();
+  expect(await boxes()).toEqual({ block: 100, image: 100, gapAbove: 8, gapBelow: 8 });
+  expect(await page.locator('.mbe-image-frame').boundingBox()).toEqual(await image(page).boundingBox());
+  // An inline image keeps its room between the lines of text.
+  await open(page, 'a ![inline](/img/100x50.svg) b\n');
+  expect((await page.locator('#editor > p').boundingBox())!.height).toBe(50 + 16);
+});
+
 test('updateImage changes the selected image', async ({ page }) => {
   await open(page, '![chart|120x60](/img/400x200.svg)\n');
   await image(page).click();
@@ -433,11 +451,13 @@ test('clicking an image shows the image toolbar: alignment on an image block, al
   for (const name of ['Align left', 'Align center', 'Align right', 'Alt text', 'Reset size', 'Delete']) await expect(tool(page, name)).toBeVisible();
   await expect(tool(page, 'Align left')).toHaveAttribute('aria-pressed', 'true');
   await expect(tool(page, 'Align center')).toHaveAttribute('aria-pressed', 'false');
-  // Above the image, starting at its left edge.
+  // 8px above the image, starting at its left edge; the same size as the formatting toolbar.
   const box = (await image(page).boundingBox())!;
   const bar = (await imageToolbar(page).boundingBox())!;
-  expect(bar.y + bar.height).toBeLessThanOrEqual(box.y);
+  expect(bar.y + bar.height).toBe(box.y - 8);
   expect(bar.x).toBeCloseTo(box.x, 0);
+  expect(bar.height).toBe(38);
+  expect(await tool(page, 'Delete').boundingBox()).toMatchObject({ width: 28, height: 28 });
   // An inline image has no alignment and no width to reset.
   await image(page, 1).click();
   await expect(imageToolbar(page)).toBeVisible();

e2e/link-card.spec.ts

@@ -17,6 +17,9 @@ test('resting the pointer on a link shows its card with the URL; leaving hides i
   const linkBox = (await page.locator('#editor a.mbe-link').boundingBox())!;
   const cardBox = (await card(page).boundingBox())!;
   expect(cardBox.y).toBeGreaterThanOrEqual(linkBox.y + linkBox.height);
+  // The same compact controls as the toolbars.
+  expect(cardBox.height).toBe(38);
+  expect(await card(page).locator('button').first().boundingBox()).toMatchObject({ width: 28, height: 28 });
   // Moving from the link onto the card keeps it; moving away hides it.
   await card(page).hover();
   await expect(card(page)).toBeVisible();

e2e/ui.spec.ts

@@ -130,6 +130,13 @@ test('formatting toolbar: nine controls in three groups, named without shortcuts
     ['Code block', 1],
     ['List', 2],
   ]);
+  // Compact next to the 24px lines it floats over: 28px controls with 16px icons in 4px of padding,
+  // 36px plus the theme's 1px border.
+  const sizes = await toolbar.evaluate((el) => {
+    const size = (node: Element) => [node.getBoundingClientRect().width, node.getBoundingClientRect().height];
+    return { bar: size(el)[1], tool: size(el.querySelector('.mbe-tool-bold')!), icon: size(el.querySelector('.mbe-tool-bold .mbe-icon')!) };
+  });
+  expect(sizes).toEqual({ bar: 38, tool: [28, 28], icon: [16, 16] });
   // No shortcut is shown anywhere; assistive technology gets it from aria-keyshortcuts.
   await toolbar.locator('.mbe-tool-text-style').click();
   const text = await page.evaluate(() =>
@@ -337,6 +344,9 @@ test('link: Ctrl+K on a selection, then edit and remove', async ({ page }) => {
   await page.keyboard.press('Control+k');
   const input = page.locator('.mbe-popover-input');
   await expect(input).toBeFocused();
+  // The popover is the size of the toolbars: a 28px input in 4px of padding and the theme's border.
+  expect(await page.locator('.mbe-input-popover').boundingBox()).toMatchObject({ height: 38 });
+  expect(await input.boundingBox()).toMatchObject({ height: 28 });
   await input.fill('https://example.com');
   await input.press('Enter');
   expect(await md(page)).toBe('see [docs](https://example.com)\n');

packages/editor/src/base.css

@@ -180,6 +180,10 @@
 .mbe-root.mbe-readonly a.mbe-link { cursor: pointer; }
 /* Inline even under a CSS reset such as Tailwind's preflight, which makes images blocks; alignment needs it. */
 .mbe-root .mbe-image { display: inline-block; max-width: 100%; height: auto; margin: 8px 0; vertical-align: bottom; }
+/* An inline image gets room between the lines of text around it. An image
+   alone in its block does not: the block gap already separates it, and the
+   margin would make its block 16px taller than the image. */
+.mbe-root .mbe-image-block .mbe-image { margin: 0; }
 /* An image alone in its paragraph moves within the column; it keeps its width. */
 .mbe-root .mbe-image-block[data-align="left"] { text-align: left; }
 .mbe-root .mbe-image-block[data-align="center"] { text-align: center; }
@@ -353,29 +357,32 @@
 .mbe-image-toolbar { box-sizing: border-box; display: flex; align-items: center; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
 .mbe-toolbar::-webkit-scrollbar,
 .mbe-image-toolbar::-webkit-scrollbar { display: none; }
+/* A tool is a 28px control with a 16px icon, so a bar is 36px tall with its
+   4px padding: compact next to the 24px lines it floats over, and the size
+   of a host app's own controls. */
 .mbe-tool {
   flex: none;
   font: inherit;
   color: inherit;
   background: none;
   border: none;
-  padding: 4px 7px;
-  min-width: 32px;
-  min-height: 32px;
+  padding: 2px 6px;
+  min-width: 28px;
+  min-height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }
 .mbe-tool[hidden],
 .mbe-tool-sep[hidden] { display: none; }
-.mbe-tool .mbe-icon { width: 18px; height: 18px; }
-.mbe-tool-menu { gap: 1px; padding-inline: 7px 4px; }
+.mbe-tool .mbe-icon { width: 16px; height: 16px; }
+.mbe-tool-menu { gap: 1px; padding-inline: 6px 3px; }
 .mbe-tool-icon,
 .mbe-tool-chevron { display: inline-flex; }
-.mbe-tool .mbe-tool-chevron .mbe-icon { width: 13px; height: 13px; }
+.mbe-tool .mbe-tool-chevron .mbe-icon { width: 12px; height: 12px; }
 .mbe-tool.mbe-active { background: Highlight; color: HighlightText; }
-.mbe-tool-sep { flex: none; width: 1px; height: 18px; margin: 0 3px; background: GrayText; }
+.mbe-tool-sep { flex: none; width: 1px; height: 16px; margin: 0 2px; background: GrayText; }
 .mbe-menu-check { flex: none; display: inline-flex; margin-inline-start: auto; }
 .mbe-menu-submenu { flex: none; display: inline-flex; margin-inline-start: auto; }
 .mbe-menu-submenu .mbe-icon { width: 14px; height: 14px; }
@@ -417,7 +424,7 @@
 .mbe-image-frame-small .mbe-resize-handle-right { left: 100%; }
 .mbe-image-resizing,
 .mbe-image-resizing .mbe-resize-handle { cursor: ew-resize; }
-.mbe-popover-input { font: inherit; color: inherit; width: 260px; padding: 5px 8px; }
+.mbe-popover-input { font: inherit; color: inherit; box-sizing: border-box; height: 28px; width: 260px; padding: 0 8px; }
 
 .mbe-block-handle {
   position: fixed;

packages/editor/src/theme.css

@@ -283,7 +283,7 @@
 .mbe-tool-delete:hover { color: var(--mbe-danger); }
 .mbe-link-card-url { font-size: 13px; color: var(--mbe-link); text-decoration: none; }
 .mbe-link-card-url:hover { text-decoration: underline; }
-.mbe-tool { border-radius: 7px; }
+.mbe-tool { border-radius: 6px; }
 .mbe-tool:hover,
 .mbe-tool.mbe-open { background: var(--mbe-hover); }
 .mbe-tool.mbe-active { color: var(--mbe-accent); background: var(--mbe-hover); }