@c8y/style 1024.16.19 → 1024.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1024.16.19",
+  "version": "1024.18.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/components/data-display-and-visualization/tables/_resizable-grid.scss

@@ -1,5 +1,4 @@
-@use "../../../../variables/index" as *;
-
+@use '../../../../variables/index' as *;
 
 /**
  * resizaule grid - Component styles
@@ -18,8 +17,9 @@ c8y-resizable-grid {
   height: 100%;
   position: relative;
 
-  // This CSS variable is set by the component and used here
+  // These CSS variables are set by the component and used here
   --col-a-width: var(--c8y-resizable-grid-default-width, 560px);
+  --col-a-height: var(--c8y-resizable-grid-default-height, 280px);
 }
 
 .resizable-grid-container {
@@ -44,10 +44,93 @@ c8y-resizable-grid {
   }
 
   &:has(.collapsed) {
-    .resizer > i{
+    .resizer > i {
       display: block;
     }
   }
+
+  // Vertical (top/bottom) split: stack panes and size col-a by height instead of width.
+  &--vertical {
+    flex-direction: column;
+
+    // Below `md` the surrounding full-page layout provides no definite height (it is only
+    // defined from `md` up), so a fixed-height resizable split cannot be bounded — dragging
+    // would push content off-screen and clip it. Fall back to naturally-stacked panes with
+    // the divider hidden, so the page scrolls normally and all content stays reachable.
+    .col-a,
+    .col-b {
+      width: 100%;
+      height: auto;
+      min-height: 0;
+      flex: 0 0 auto;
+    }
+
+    .resizer {
+      display: none;
+    }
+
+    // Content that fills its height via flex (e.g. a Monaco editor, whose inner container is
+    // `height: 100%`) has no definite height to resolve against once the panes stack, so it
+    // collapses to zero. Give such editors a definite height in the stacked layout via a
+    // fixed flex-basis (`!important` overrides the `.flex-grow` utility on the editor).
+    c8y-editor {
+      flex: 0 0 240px !important;
+    }
+
+    @media (min-width: $screen-md-min) {
+      // In the bounded resizable layout the editor fills the pane via flex again.
+      c8y-editor {
+        flex: 1 1 auto !important;
+      }
+
+      // col-a's dragged size is its flex-basis (not a rigid height) and it is allowed to
+      // shrink. This keeps col-a + resizer + col-b within the container height, so dragging
+      // the divider down shrinks the bottom pane instead of pushing it off-screen.
+      .col-a {
+        flex: 0 1 var(--col-a-height);
+      }
+
+      .col-b {
+        flex: 1 1 0;
+      }
+
+      .collapsed {
+        width: 100% !important;
+        height: auto !important;
+        min-height: 0 !important;
+        min-width: 0;
+        flex: 0 0 0 !important;
+      }
+
+      .expanded {
+        width: 100% !important;
+        height: auto !important;
+        flex: 1 1 auto !important;
+      }
+
+      .resizer {
+        display: block;
+        width: 100%;
+        height: $size-8;
+        flex: 0 0 8px;
+        cursor: row-resize;
+
+        &::before {
+          top: 50%;
+          left: 0;
+          right: 0;
+          bottom: auto;
+          width: auto;
+          height: 1px;
+          transform: translateY(-50%);
+        }
+
+        > i {
+          transform: translate(-50%, -50%) rotate(90deg);
+        }
+      }
+    }
+  }
 }
 
 .col-a {
@@ -58,7 +141,7 @@ c8y-resizable-grid {
   display: flex;
   flex-direction: column;
 
-  >* {
+  > * {
     flex: 1;
     min-height: 0;
   }
@@ -71,7 +154,7 @@ c8y-resizable-grid {
   display: flex;
   flex-direction: column;
 
-  >* {
+  > * {
     flex: 1;
     min-height: 0;
   }
@@ -96,7 +179,7 @@ c8y-resizable-grid {
     background: $component-border-color;
   }
 
-  >i {
+  > i {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -104,22 +187,23 @@ c8y-resizable-grid {
     background-color: $component-background-default;
     border-radius: 50%;
     color: $component-color-text-muted;
-    &::before{
+    &::before {
       transition: all 0.3s ease;
       display: block;
     }
   }
 
   .is-resizing &,
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     &::before {
       background: $component-color-focus;
     }
 
-    >i {
+    > i {
       color: $component-color-focus;
       display: block;
-      &::before{
+      &::before {
         scale: 2;
       }
     }
@@ -130,8 +214,6 @@ c8y-resizable-grid {
   overflow-y: auto;
 }
 
-
-
 // Global styles applied when resizing to prevent text selection
 body.no-select {
   user-select: none;