Add a resizeObserver to table cells to set cell height (#862)

* fix(table): add resizeObserver to set cell height

When using slotted content in a table cell, it currently
is not possible to set the content to be 100% of the cell.
This is because using a slot takes the content our of the normal
flow and it doesn't know what height it should use when
set to 100%. By adding a resizeObserver to see the height of the cell
and set that height manually, the descendant content can set
height:100% and it will work as expected.

While each cell will be set to it's own height, the nature of
table rows means that all cells in a row will display as the
height of the tallest cell, regardless of what height they have
manually set.

* fix(table): account for border when calculating height

packages/pharos/src/components/table-cell/pharos-table-cell.ts

@@ -18,6 +18,22 @@ 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) -
+        parseFloat(style.borderBlockWidth);
+
+      this.style.height = `${height}px`;
+
+      resizeObserver.disconnect();
+    });
+
+    resizeObserver.observe(this);
   }
 
   protected override render(): TemplateResult {

packages/pharos/src/components/table/pharos-table.wc.stories.jsx

@@ -30,8 +30,10 @@ const sampleNonTextRow = html` <storybook-pharos-table-row>
     />
   </storybook-pharos-table-cell>
   <storybook-pharos-table-cell style="max-width:20rem;">
-    <span>
-      <span>
+    <div
+      style="display: flex; flex-direction: column;  justify-content: space-between;max-width: 30rem;height: 100%;"
+    >
+      <div>
         JSTOR provides access to more than 12 million
         <storybook-pharos-link href="https://about.jstor.org/librarians/journals/"
           >journal articles</storybook-pharos-link
@@ -46,9 +48,9 @@ const sampleNonTextRow = html` <storybook-pharos-table-row>
           >primary sources</storybook-pharos-link
         >
         in 75 disciplines.
-      </span>
-      <span>Established: 1994</span>
-    </span>
+      </div>
+      <div>Established: 1994</div>
+    </div>
   </storybook-pharos-table-cell>
   <storybook-pharos-table-cell>
     <storybook-pharos-checkbox name="item_archived">