fix(plugins/plugin-client-common): Terminal Block -> Screenshot of table does not capture box shadow

Fixes #5142

Author: starpit

plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx

@@ -270,28 +270,31 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
       return <div className="oops">Internal Error</div>
     } else {
       return (
-        <KuiContext.Consumer>
-          {config => {
-            const className =
-              'kui--data-table-wrapper kui--screenshotable' +
-              (this.state.asGrid ? ' kui--data-table-as-grid' : '') +
-              (config.lightweightTables ? ' kui--data-table-wrapper-lightweight' : '')
-
-            if (this.props.response.style === TableStyle.Light && !this.props.isPartOfMiniSplit) {
-              return <div className={className}>{this.content(true, config.lightweightTables)}</div>
-            } else {
-              return (
-                <Card
-                  header={this.topToolbar(config.lightweightTables)}
-                  footer={this.bottomToolbar(config.lightweightTables)}
-                  className={className}
-                >
-                  {this.content(false, config.lightweightTables)}
-                </Card>
-              )
-            }
-          }}
-        </KuiContext.Consumer>
+        <div className="kui--data-table-wrapper">
+          <div className="kui--screenshotable">
+            <KuiContext.Consumer>
+              {config => {
+                const className =
+                  (this.state.asGrid ? ' kui--data-table-as-grid' : '') +
+                  (config.lightweightTables ? ' kui--data-table-wrapper-lightweight' : '')
+
+                if (this.props.response.style === TableStyle.Light && !this.props.isPartOfMiniSplit) {
+                  return <div className={className}>{this.content(true, config.lightweightTables)}</div>
+                } else {
+                  return (
+                    <Card
+                      header={this.topToolbar(config.lightweightTables)}
+                      footer={this.bottomToolbar(config.lightweightTables)}
+                      className={className}
+                    >
+                      {this.content(false, config.lightweightTables)}
+                    </Card>
+                  )
+                }
+              }}
+            </KuiContext.Consumer>
+          </div>
+        </div>
       )
     }
   }

plugins/plugin-client-common/web/scss/components/Table/badges.scss

@@ -44,10 +44,6 @@ $grid-cell-size: 1.25rem;
     flex: initial;
   }
 
-  .kui--card {
-    margin: 1rem 0 0;
-  }
-
   .kui--data-table-as-grid {
     .kui--card-header {
       border-bottom: 1px solid var(--color-base03);

plugins/plugin-client-common/web/scss/components/Table/tables.scss

@@ -141,6 +141,12 @@ body[kui-theme-style] .repl.sidecar-visible {
 
 body[kui-theme-style] .kui--data-table-wrapper {
   overflow-x: auto;
+  margin: 1rem 0 0;
+
+  /* make space for any box shadows */
+  .kui--screenshotable {
+    padding: 1px;
+  }
 
   .kui--card-footer {
     border-top: 1px solid var(--color-base03);