Popover component adds unwanted spacing in table cells

[JamesN-dev]

Current Behavior

Extra bottom spacing appears around popover triggers in table cells, creating layout gaps.

Expected Behavior

Popover triggers in table cells should not add extra spacing beyond the intended content.

Link to Reproduction / Stackblitz

https://stackblitz.com/edit/sveltejs-kit-template-default-kxurdzqk?file=src%2Flib%2FDataTable.svelte

Environment Information

• @skeletonlabs/skeleton: ^3.1.3
• @skeletonlabs/skeleton-svelte: ^1.2.1
• SvelteKit: ^2.16.0
• Tailwind CSS: ^4.0.0

More Information

Root Cause:
The <span data-testid="popover"> wrapper and <button> trigger elements retain default spacing behavior that add unwanted padding/space.

Minimal Reproduction

<table class="table">
  <tr>
    <td>
      <Popover>
        {#snippet trigger()}
          <img src="image.jpg" class="w-16 h-16" />
        {/snippet}
        {#snippet content()}
          <div>Popover content</div>
        {/snippet}
      </Popover>
    </td>
  </tr>
</table>

Current Workaround:

.table span[data-testid='popover'] {
    display: block;
    line-height: 0;
}

.table button[data-part='trigger'] {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    line-height: 0;
    display: block;
}

[JamesN-dev]

I had a couple ideas for this if the team is interested. If you have any recommendations I'd be happy to work on it.

1: Add an inline prop (default false)

<Popover inline={false}> <!-- default: block layout -->
<Popover inline={true}>  <!-- explicit: inline layout -->

When false (default), applies display: block; line-height: 0 to wrapper and resets trigger button styling. Most use cases work better with block layout anyway.

2: Component Level CSS Reset
This would be breaking change I think. Not sure if you'd want to go this route.

3: Auto detect table context
Maybe automatically detect when component is inside a table and apply the fixes without needing props.

[JamesN-dev]

I went ahead and setup a stack blitz to recreate the issue. To make sure it wasnt something I did.

It is still there.

https://stackblitz.com/edit/sveltejs-kit-template-default-kxurdzqk?file=src%2Flib%2FDataTable.svelte

[endigo9740]

Hey @JamesN-dev, so unfortunately the solution suggested goes against Skeleton's conventions for how we style components. I know it's popular for other libraries to swap out "sets" of CSS classes based on a conditional (ex: inline: true|false), but in our case that's detrimental because it means we have to provide props to affect classes for either state. We're strive to never hardcode classes within each component.

We cannot know every manner in which users will utilize each Popover, nor what will be provided within the trigger/contents snippets. Which means we cannot provide defaults that work in every situation. So I think the proper solution would be to do this the "Skeleton way" and utilize the exposed style props. The fix can be as simple as this:

<Popover ... triggerClasses="block leading-0">

Before:

After:

We had a similar issue come up on Discord, so I do think it would be beneficial to explain this approach to end users in some manner. Maybe a small tutorial like the Z-index and Arrow sections?

• https://www.skeleton.dev/docs/integrations/popover/svelte#z-index
• https://www.skeleton.dev/docs/integrations/popover/svelte#arrows

Just again, this feels odd as it's a very niche use case. It's already standard practice for users to adjust the default styling for components if it doesn't fit their needs.

[endigo9740]

I've changed the status of this ticket from Bug -> Doc + Feature request to better facilitate the ask here.

[JamesN-dev]

Hey no worries. I like your solution. Much better than my full reset. <Popover ... triggerClasses="block leading-0">

I'll see if I can put something together for the niche case that can be referenced for the docs.

[endigo9740]

Awesome, well a small snippet and comment in the docs should suffice. I don't think we need to take this to the extreme and have a full extra Example or anything like that. Just keep it simple.