From 3b153a379cd8f3d493ca8359a6ae2e9087d76166 Mon Sep 17 00:00:00 2001
From: Konstantinos Paparas <kelsos86@gmail.com>
Date: Mon, 27 Apr 2026 21:44:21 +0200
Subject: [PATCH] fix(button): align list-variant label with icon line-box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tighten the list-variant label to `leading-[1.125rem]` so its line-box
matches the md icon (`--rui-icon-size: 1.125rem`). Without this, the
20px label line-box (from `leading-5` on the root) is flex-centered
against the 18px icon box and the baseline-aligned glyphs visually
drift above the icon's optical center — most readable in tight list
rows like the rotki UserDropdown menu.

Adds a list-variant section to the example app and an e2e assertion
that the label and icon centers line up.

Closes #515
---
 apps/example/e2e/button.spec.ts               | 23 +++++++++
 .../src/components/buttons/ListButtons.vue    | 48 +++++++++++++++++++
 apps/example/src/views/ButtonView.vue         |  2 +
 .../buttons/button/button-styles.ts           |  8 +++-
 4 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 apps/example/src/components/buttons/ListButtons.vue

diff --git a/apps/example/e2e/button.spec.ts b/apps/example/e2e/button.spec.ts
index eab68313..9d763749 100644
--- a/apps/example/e2e/button.spec.ts
+++ b/apps/example/e2e/button.spec.ts
@@ -23,4 +23,27 @@ test.describe('buttons', () => {
     await expect(disabledButton).toBeDisabled();
     await expect(disabledButton).toContainText('0');
   });
+
+  test('list-variant button label shares the icon line-box (issue #515)', async ({ page }) => {
+    const button = page.getByTestId('list-button-md-settings');
+    const label = button.locator('[data-id="btn-label"]');
+    const icon = button.locator('svg').first();
+
+    await expect(button).toBeVisible();
+
+    // Label line-height collapses to the md icon size (1.125rem = 18px) so the
+    // label's line-box matches the icon's bounding box; without the fix the
+    // label inherits leading-5 (20px) and visually drifts above the icon.
+    await expect(label).toHaveCSS('line-height', '18px');
+
+    const labelBox = await label.boundingBox();
+    const iconBox = await icon.boundingBox();
+    expect(labelBox).not.toBeNull();
+    expect(iconBox).not.toBeNull();
+
+    // Centers should line up within ~1px now that the line-boxes match.
+    const labelCenter = labelBox!.y + labelBox!.height / 2;
+    const iconCenter = iconBox!.y + iconBox!.height / 2;
+    expect(Math.abs(labelCenter - iconCenter)).toBeLessThanOrEqual(1);
+  });
 });
diff --git a/apps/example/src/components/buttons/ListButtons.vue b/apps/example/src/components/buttons/ListButtons.vue
new file mode 100644
index 00000000..01fcdb5f
--- /dev/null
+++ b/apps/example/src/components/buttons/ListButtons.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { RuiButton, RuiIcon, type RuiIcons } from '@rotki/ui-library';
+
+interface ListItem {
+  label: string;
+  icon: RuiIcons;
+}
+
+const items: ListItem[] = [
+  { icon: 'lu-settings', label: 'Settings' },
+  { icon: 'lu-user', label: 'Profile' },
+  { icon: 'lu-log-out', label: 'Logout' },
+];
+
+const sizes = ['xs', 'sm', undefined, 'lg', 'xl', '2xl'] as const;
+</script>
+
+<template>
+  <div class="mb-14">
+    <h3 class="text-h6 mb-3">
+      List variant
+    </h3>
+    <div class="grid gap-6 grid-cols-3">
+      <div
+        v-for="size in sizes"
+        :key="size ?? 'md'"
+        class="rounded border border-rui-grey-300 dark:border-rui-grey-700 overflow-hidden w-56"
+        :data-id="`list-button-card-${size ?? 'md'}`"
+      >
+        <div class="px-3 py-2 text-caption text-rui-text-secondary border-b border-rui-grey-200 dark:border-rui-grey-800">
+          size: {{ size ?? 'md (default)' }}
+        </div>
+        <RuiButton
+          v-for="item in items"
+          :key="item.label"
+          variant="list"
+          :size="size"
+          :data-id="`list-button-${size ?? 'md'}-${item.label.toLowerCase()}`"
+        >
+          <template #prepend>
+            <RuiIcon :name="item.icon" />
+          </template>
+          {{ item.label }}
+        </RuiButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/example/src/views/ButtonView.vue b/apps/example/src/views/ButtonView.vue
index 66863729..dbd0e1eb 100644
--- a/apps/example/src/views/ButtonView.vue
+++ b/apps/example/src/views/ButtonView.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import ButtonGroups from '@/components/buttons/ButtonGroups.vue';
+import ListButtons from '@/components/buttons/ListButtons.vue';
 import MultiToggleButtonGroups from '@/components/buttons/MultiToggleButtonGroups.vue';
 import SingleButtons from '@/components/buttons/SingleButtons.vue';
 import ToggleButtonGroups from '@/components/buttons/ToggleButtonGroups.vue';
@@ -13,6 +14,7 @@ import ComponentView from '@/components/ComponentView.vue';
     </template>
 
     <SingleButtons />
+    <ListButtons />
     <ButtonGroups />
     <ToggleButtonGroups />
     <MultiToggleButtonGroups />
diff --git a/packages/ui-library/src/components/buttons/button/button-styles.ts b/packages/ui-library/src/components/buttons/button/button-styles.ts
index 2762d521..644ba582 100644
--- a/packages/ui-library/src/components/buttons/button/button-styles.ts
+++ b/packages/ui-library/src/components/buttons/button/button-styles.ts
@@ -37,7 +37,13 @@ export const buttonStyles = tv({
       outlined: {},
       text: { root: 'px-2' },
       fab: { root: 'rounded-full py-2' },
-      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },
+      // `leading-[1.125rem]` on the label collapses the 20px line-box (inherited
+      // from the root's `leading-5`) down to 18px so it matches the md icon box
+      // (`--rui-icon-size: 1.125rem`). Without it, `flex items-center` centers
+      // the 20px line-box against the 18px icon box and the baseline-aligned
+      // glyphs visually drift above the icon's optical center — most readable
+      // in tight list rows. See rotki/ui-library#515.
+      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },
     },
     size: {
       // Each size variant redefines `--rui-icon-size` on the button so the