fix: content in adaptive actionsheet should not exceed 360px width

telerik · Nov 2, 2022 · 803dc21 · 803dc21
1 parent bcae231
commit 803dc21
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
@@ -255,6 +255,15 @@
             padding: $adaptive-actionsheet-footer-padding-y $adaptive-actionsheet-footer-padding-x;
         }
 
+        .k-actionsheet-filter {
+            width: calc( min(100%, calc( 360px - #{$adaptive-actionsheet-titlebar-padding-x * 2}) ) );
+        }
+        .k-actionsheet-content,
+        .k-actionsheet-footer {
+            margin-inline: auto;
+            width: unquote("min(100%, 360px)");
+        }
+
         .k-list-container,
         .k-treeview {
             height: 100%;

diff --git a/packages/fluent/scss/action-sheet/_layout.scss b/packages/fluent/scss/action-sheet/_layout.scss
@@ -286,6 +286,15 @@
             padding-block: var( --kendo-adaptive-actionsheet-footer-padding-y, #{$kendo-adaptive-actionsheet-footer-padding-y} );
         }
 
+        .k-actionsheet-filter {
+            width: calc( min(100%, calc( 360px - #{$kendo-adaptive-actionsheet-header-padding-x * 2}) ) );
+        }
+        .k-actionsheet-content,
+        .k-actionsheet-footer {
+            margin-inline: auto;
+            width: unquote("min(100%, 360px)");
+        }
+
         .k-list-container,
         .k-treeview {
             height: 100%;
@@ -347,6 +356,13 @@
             height: 100%;
             overflow-y: auto;
         }
+
+        .k-data-table {
+            max-height: 100%;
+            overflow: hidden;
+            display: flex;
+            flex-flow: column nowrap;
+        }
     }
 }