feat: decrease default size of popup window

Fixes #4192

in support, this PR also adds media query support for auto-hiding table columns for narrower windows
Fixes #4193

Author: starpit

packages/core/src/webapp/defaults.ts

@@ -24,6 +24,6 @@ export default {
 }
 
 export const popupWindowDefaults = {
-  width: 672,
-  height: 730
+  width: 625,
+  height: 625
 }

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

@@ -1,3 +1,5 @@
+@import '../common/narrow-window';
+
 .bx--data-table {
   [data-tag='badge'] {
     display: flex;
@@ -59,12 +61,6 @@
   }
 }
 
-@mixin narrow-window {
-  @media (max-width: 44rem) {
-    @content;
-  }
-}
-
 @mixin badge-only {
   .bx--data-table-container .bx--data-table {
     th[data-key='STATUS'],

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

@@ -1,3 +1,5 @@
+@import '../common/narrow-window';
+
 body[kui-theme-style] {
   .bx--select--inline .bx--select-input {
     fill: var(--color-text-01);
@@ -147,7 +149,15 @@ body .bx--data-table {
   }
 }
 
-body[kui-theme-style] .repl.sidecar-visible {
+@mixin full-width-tables {
+  .kui--data-table-wrapper {
+    /* render tables full-width when sidecar is open https://github.com/IBM/kui/issues/3952 */
+    flex: 1;
+  }
+  .kui--paginated-table {
+    flex: 1;
+  }
+
   .repl-result {
     width: 100%;
 
@@ -176,10 +186,13 @@ body[kui-theme-style] .repl.sidecar-visible {
   }
 }
 
-.sidecar-visible .kui--data-table-wrapper {
-  /* render tables full-width when sidecar is open https://github.com/IBM/kui/issues/3952 */
-  flex: 1;
+body[kui-theme-style] .repl.sidecar-visible {
+  @include full-width-tables;
+}
+@include narrow-window {
+  @include full-width-tables;
 }
+
 .kui--data-table-wrapper {
   overflow-x: auto;
 }
@@ -188,6 +201,3 @@ body[kui-theme-style] .repl.sidecar-visible {
   display: flex;
   flex-direction: column;
 }
-.sidecar-visible .kui--paginated-table {
-  flex: 1;
-}

plugins/plugin-client-common/web/scss/components/common/_narrow-window.scss

@@ -0,0 +1,5 @@
+@mixin narrow-window {
+  @media (max-width: 44rem) {
+    @content;
+  }
+}