Merge pull request #12 from codebar-ag/fix/code-editor-copy-button-stretch

Stop the code editor's copy button collapsing to a squashed stadium

Author: StanBarrows

src/components/organisms/CodeEditor.vue

@@ -157,10 +157,14 @@ onBeforeUnmount(() => view?.destroy());
       `autoHeight` mode THIS element is the scroll container, and an absolutely
       positioned child would scroll out of sight on any document longer than
       the visible box.
+
+      `items-start` is load-bearing: without it the default `align-items:
+      stretch` squashes the button to this row's zero height, leaving a
+      padding-only stadium with the icon spilling out top and bottom.
     -->
     <div
       v-if="copyable && modelValue"
-      class="sticky top-0 z-10 flex h-0 justify-end"
+      class="sticky top-0 z-10 flex h-0 items-start justify-end"
     >
       <CopyButton
         :value="copyValue"

tests/interactions.spec.ts

@@ -41,3 +41,18 @@ test('a copyable code editor copies the document it displays', async ({ page, co
     const clipboard = await page.evaluate(() => navigator.clipboard.readText());
     expect(clipboard).toBe('{\n  "vendor": "string",\n  "invoice_number": "string"\n}');
 });
+
+test('the copyable code editor button is not squashed by its zero-height row', async ({ page }) => {
+    await gotoStory(page, 'organisms-codeeditor--copyable');
+    await expect(page.locator('.cm-content')).toBeVisible();
+
+    // The button sits in a `h-0` sticky row, so a missing `items-start` lets
+    // `align-items: stretch` collapse it to padding-only and the icon spills
+    // out. Assert it still boxes its own icon: square, and taller than the glyph.
+    const button = page.getByRole('button', { name: 'Copy to clipboard' });
+    const box = (await button.boundingBox())!;
+    const icon = (await button.locator('svg').boundingBox())!;
+
+    expect(box.height).toBeGreaterThan(icon.height);
+    expect(Math.abs(box.width - box.height)).toBeLessThanOrEqual(1);
+});