fix(scrollable-table): responsiveness (#1244)

Signed-off-by: David Edler <[email protected]>

Author: edlerd

src/components/ScrollableTable/ScrollableTable.scss

@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  @media screen and (max-width: $breakpoint-large) {
+  @media screen and (width < $breakpoint-large) {
     .p-table--mobile-card {
       thead {
         display: none;

src/components/ScrollableTable/ScrollableTable.stories.tsx

@@ -13,13 +13,12 @@ export default meta;
 
 type Story = StoryObj<typeof ScrollableTable>;
 
-const StoryExample = (args: Story["args"]) => {
+const StoryExample = (args: Story["args"] & { responsive?: boolean }) => {
   const headers = [
     { content: "Fact" },
     { content: "Relevancy score" },
     { content: "Size" },
     { content: "ID" },
-    { "aria-label": "Actions", className: "actions" },
   ];
 
   const facts = [
@@ -57,7 +56,12 @@ const StoryExample = (args: Story["args"]) => {
         dependencies={[headers, rows]}
         tableId="facts-about-dragons"
       >
-        <MainTable headers={headers} rows={rows} id="facts-about-dragons" />
+        <MainTable
+          headers={headers}
+          rows={rows}
+          responsive={args["responsive"]}
+          id="facts-about-dragons"
+        />
       </ScrollableTable>
       <div id="footer">
         <h2 className="u-no-margin">Below contents</h2>
@@ -84,3 +88,21 @@ export const Default: Story = {
     },
   },
 };
+
+export const Responsive: Story = {
+  args: {
+    belowIds: ["footer"],
+  },
+  render: (args) => StoryExample({ ...args, responsive: true }),
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+        </>
+      ),
+    },
+  },
+};