💄 Fix ExpandableTable button alignment in flex containers

Co-authored-by: Copilot <copilot@github.com>

Author: Frontendland

src/blocks/ExpandableTable/ExpandableTable.astro

@@ -1,4 +1,6 @@
 ---
+import { ConditionalWrapper } from 'webcoreui/astro'
+
 import Button from '@blocks/Button/Button.astro'
 
 import type { ExpandableTableProps } from './expandableTable'
@@ -32,45 +34,49 @@ const classes = [
 ]
 ---
 
-<div
-    class:list={classes}
-    style={maxHeight ? `max-height:${maxHeight}` : undefined}
->
-    <table>
-        {headings?.length && (
-            <thead>
-                <tr>
-                    {headings.map(heading => (
-                        <th>{heading}</th>
-                    ))}
-                </tr>
-            </thead>
-        )}
-        <tbody>
-            {data.map((row, index) => (
-                <tr
-                    data-hidden={numberOfVisibleRows < index + 1 ? 'true' : undefined}
-                >
-                    {row.map(column => (
-                        <td>
-                            <Fragment set:html={column} />
-                        </td>
-                    ))}
-                </tr>
-            ))}
-        </tbody>
-    </table>
-</div>
+<ConditionalWrapper condition={data.length > numberOfVisibleRows}>
+    <div slot="wrapper">children</div>
+
+    <div
+        class:list={classes}
+        style={maxHeight ? `max-height:${maxHeight}` : undefined}
+    >
+        <table>
+            {headings?.length && (
+                <thead>
+                    <tr>
+                        {headings.map(heading => (
+                            <th>{heading}</th>
+                        ))}
+                    </tr>
+                </thead>
+            )}
+            <tbody>
+                {data.map((row, index) => (
+                    <tr
+                        data-hidden={numberOfVisibleRows < index + 1 ? 'true' : undefined}
+                    >
+                        {row.map(column => (
+                            <td>
+                                <Fragment set:html={column} />
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    </div>
 
-{data.length > numberOfVisibleRows && (
-    <Button
-        data-id="w-expander"
-        data-expand-label={expandButtonLabel}
-        data-collapse-label={collapseButtonLabel}
-        text={expandButtonLabel}
-        {...expandButton}
-    />
-)}
+    {data.length > numberOfVisibleRows && (
+        <Button
+            data-id="w-expander"
+            data-expand-label={expandButtonLabel}
+            data-collapse-label={collapseButtonLabel}
+            text={expandButtonLabel}
+            {...expandButton}
+        />
+    )}
+</ConditionalWrapper>
 
 <script>
     import { on } from 'webcoreui'

src/blocks/ExpandableTable/ExpandableTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { classNames } from 'webcoreui'
+    import { ConditionalWrapper } from 'webcoreui/svelte'
 
     import Button from '@blocks/Button/Button.svelte'
 
@@ -36,33 +37,35 @@
     const toggle = () => expanded = !expanded
 </script>
 
-<div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>
-    <table>
-        {#if headings?.length}
-            <thead>
-                <tr>
-                    {#each headings as heading}
-                        <th>{heading}</th>
-                    {/each}
-                </tr>
-            </thead>
-        {/if}
-        <tbody>
-            {#each data as row, index}
-                <tr data-hidden={numberOfVisibleRows < index + 1 && !expanded ? 'true' : undefined}>
-                    {#each row as column}
-                        <td>{@html column}</td>
-                    {/each}
-                </tr>
-            {/each}
-        </tbody>
-    </table>
-</div>
+<ConditionalWrapper condition={data.length > numberOfVisibleRows}>
+    <div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>
+        <table>
+            {#if headings?.length}
+                <thead>
+                    <tr>
+                        {#each headings as heading}
+                            <th>{heading}</th>
+                        {/each}
+                    </tr>
+                </thead>
+            {/if}
+            <tbody>
+                {#each data as row, index}
+                    <tr data-hidden={numberOfVisibleRows < index + 1 && !expanded ? 'true' : undefined}>
+                        {#each row as column}
+                            <td>{@html column}</td>
+                        {/each}
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
 
-{#if data.length > numberOfVisibleRows}
-    <Button
-        text={expanded ? collapseButtonLabel : expandButtonLabel}
-        onClick={toggle}
-        {...expandButton}
-    />
-{/if}
+    {#if data.length > numberOfVisibleRows}
+        <Button
+            text={expanded ? collapseButtonLabel : expandButtonLabel}
+            onClick={toggle}
+            {...expandButton}
+        />
+    {/if}
+</ConditionalWrapper>

src/blocks/ExpandableTable/ExpandableTable.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { classNames } from 'webcoreui'
+import { ConditionalWrapper } from 'webcoreui/react'
 
 import Button from '@blocks/Button/Button.tsx'
 
@@ -43,7 +44,10 @@ const ExpandableTable = ({
     }
 
     return (
-        <React.Fragment>
+        <ConditionalWrapper
+            condition={data.length > numberOfVisibleRows}
+            wrapper={children => <div>{children}</div>}
+        >
             <div className={classes} style={styleVariables}>
                 <table>
                     {headings?.length && (
@@ -80,7 +84,7 @@ const ExpandableTable = ({
                     {...expandButton}
                 />
             )}
-        </React.Fragment>
+        </ConditionalWrapper>
     )
 }