diff --git a/packages/pharos/src/components/table-cell/pharos-table-cell.ts b/packages/pharos/src/components/table-cell/pharos-table-cell.ts index 45928ee6..2b6c1bb4 100644 --- a/packages/pharos/src/components/table-cell/pharos-table-cell.ts +++ b/packages/pharos/src/components/table-cell/pharos-table-cell.ts @@ -18,6 +18,21 @@ export class PharosTableCell extends ScopedRegistryMixin(PharosElement) { protected override firstUpdated(): void { this.setAttribute('role', 'cell'); + + const resizeObserver = new ResizeObserver(() => { + // Using a slot inside `display: table-cell` breaks the height calculation, so we need to set it manually + const style = getComputedStyle(this); + const height = + this.getBoundingClientRect().height - + parseFloat(style.paddingTop) - + parseFloat(style.paddingBottom); + + this.style.height = `${height}px`; + + resizeObserver.disconnect(); + }); + + resizeObserver.observe(this); } protected override render(): TemplateResult { diff --git a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx index 2b3eb8fd..48ced6aa 100644 --- a/packages/pharos/src/components/table/pharos-table.wc.stories.jsx +++ b/packages/pharos/src/components/table/pharos-table.wc.stories.jsx @@ -30,8 +30,10 @@ const sampleNonTextRow = html` /> - - +
+
JSTOR provides access to more than 12 million journal articles >primary sources in 75 disciplines. - - Established: 1994 - +
+
Established: 1994
+