fix: The responsive behaviour of the MainTable wrapped inside a ScrollableTable is not equivalent to the default case (#1247)

Author: lorumic

src/components/ScrollableTable/ScrollableTable.scss

@@ -45,12 +45,12 @@
         display: block;
       }
 
-      tbody tr {
-        display: block;
+      tbody {
+        display: grid;
       }
 
-      tbody tr:first-child {
-        margin-top: $spv--x-large;
+      tbody tr {
+        display: block;
       }
     }
   }

src/components/ScrollableTable/ScrollableTable.stories.tsx

@@ -104,5 +104,10 @@ export const Responsive: Story = {
         </>
       ),
     },
+    // Percy settings to capture at multiple widths
+    percy: {
+      responsiveSnapshotCapture: true,
+      widths: [768, 1280],
+    },
   },
 };

src/utils.ts

@@ -59,8 +59,7 @@ export const getElementAbsoluteHeight = (element: HTMLElement) => {
   }
   const style = window.getComputedStyle(element);
   const margin = toFloat(style.marginTop) + toFloat(style.marginBottom);
-  const padding = toFloat(style.paddingTop) + toFloat(style.paddingBottom);
-  return element.offsetHeight + margin + padding + 1;
+  return element.offsetHeight + margin + 1;
 };
 
 export const getAbsoluteHeightBelowById = (belowId: string): number => {