Fix table scrollbars affecting height calculation

packages/standard-components/src/table/Table.svelte

@@ -16,24 +16,19 @@
   let sortColumn
   let sortOrder
 
-  $: styles = makeStyles($component.styles, rowCount)
   $: rows = dataProvider?.rows ?? []
+  $: contentStyle = getContentStyle(rowCount, rows.length)
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: loaded = dataProvider?.loaded ?? false
   $: schema = dataProvider?.schema ?? {}
   $: fields = getFields(schema, columns, showAutoColumns)
 
-  const makeStyles = (styles, rowCount) => {
+  const getContentStyle = (rowCount, dataCount) => {
     if (!rowCount) {
-      return styles
+      return ""
-    }
-    return {
-      ...styles,
-      normal: {
-        ...styles.normal,
-        height: `${37 + rowCount * 56}px`,
-      },
     }
+    const actualCount = Math.min(rowCount, dataCount)
+    return `height: ${36 + actualCount * 56}px;`
   }
 
   const sortRows = (rows, sortColumn, sortOrder) => {
@@ -80,8 +75,9 @@
 <div
   lang="en"
   dir="ltr"
-  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
+  use:styleable={$component.styles}
-  use:styleable={styles}>
+  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+  <div style={contentStyle}>
     <table class="spectrum-Table">
       <thead class="spectrum-Table-head">
         <tr>
@@ -133,6 +129,7 @@
         {/each}
       </tbody>
     </table>
+  </div>
 </div>
 
 <style>