Fix button vertical alignment in table cells

[joshhanley]

The Scenario

When an inset button with an icon and tooltip is rendered inside a table cell, it can appear vertically offset compared with equivalent buttons without the tooltip or icon.

<flux:table>
    <flux:table.columns>
        <flux:table.column>Case</flux:table.column>
        <flux:table.column>Icon, no tooltip</flux:table.column>
        <flux:table.column>Icon and tooltip</flux:table.column>
        <flux:table.column>Tooltip, no icon</flux:table.column>
        <flux:table.column>No icon or tooltip</flux:table.column>
    </flux:table.columns>

    <flux:table.rows>
        <flux:table.row>
            <flux:table.cell variant="strong">With inset</flux:table.cell>
            <flux:table.cell>
                <flux:button inset="top bottom" variant="filled" icon="bell" size="xs">Button text</flux:button>
            </flux:table.cell>
            <flux:table.cell>
                <flux:button tooltip="Tooltip text" inset="top bottom" variant="filled" icon="bell" size="xs">Button text</flux:button>
            </flux:table.cell>
            <flux:table.cell>
                <flux:button tooltip="Tooltip text" inset="top bottom" variant="filled" size="xs">Button text</flux:button>
            </flux:table.cell>
            <flux:table.cell>
                <flux:button inset="top bottom" variant="filled" size="xs">Button text</flux:button>
            </flux:table.cell>
        </flux:table.row>

        <flux:table.row>
            <flux:table.cell variant="strong">Without inset</flux:table.cell>
            <flux:table.cell>
                <flux:button variant="filled" icon="bell" size="xs">Button text</flux:button>
            </flux:table.cell>
            <flux:table.cell>
                <flux:button tooltip="Tooltip text" variant="filled" icon="bell" size="xs">Button text</flux:button>
            </flux:table.cell>
            <flux:table.cell>
                <flux:button tooltip="Tooltip text" variant="filled" size="xs">Button text</flux:button>
            </flux:table.cell>
            <flux:table.cell>
                <flux:button variant="filled" size="xs">Button text</flux:button>
            </flux:table.cell>
        </flux:table.row>
    </flux:table.rows>
</flux:table>

The Problem

Table cells use text-sm, which creates an inline line box. Buttons use inline-flex, while buttons with tooltips receive an additional inline tooltip wrapper.

When vertical inset applies equal negative margins to the button, the cell's line box continues to use typographic baseline alignment. This causes the remaining vertical space to be distributed unevenly around the button.

The Solution

The solution is to remove the table cell's line-height contribution when it directly contains a button or a tooltip-wrapped button.

The button continues to provide its own height and line height. This allows equal vertical inset margins to reduce the surrounding space symmetrically without changing button width, display behaviour, or ordinary text-only table cells.

This complements #2645, which corrected horizontal alignment for standalone icons in table cells. This change addresses vertical button alignment in those cells.

Fixes #2715

[calebporzio]

would be nice to have a comment explaining why leading-0

[joshhanley]

Closing as leading-0 actually caused issues for table cells with long text content and buttons combined. So determined it's better to fix this in userland for now. See investigation here #2715 (comment)