fix: make scroll buttons consistent in tabstrip, spreadsheet and and …

…chat
telerik · Jan 17, 2022 · 72ad38d · 72ad38d
1 parent e7bb71f
commit 72ad38d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/default/scss/chat/_layout.scss b/packages/default/scss/chat/_layout.scss
@@ -444,12 +444,13 @@
 
 
         .k-scroll-button {
+            // IMPORTANT: if we don't set padding, the browser will set for us
+            padding: 0 map-get( $spacing, 1 );
             height: 100%;
             aspect-ratio: auto;
             position: absolute;
             z-index: 2;
-            top: 50%;
-            transform: translateY(-50%);
+            top: 0;
 
             .k-button-icon {
                 min-width: auto;

diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -134,19 +134,27 @@
             }
 
             > .k-button {
-                flex-shrink: 0;
+                width: auto;
+                height: auto;
+                flex: none;
                 align-self: stretch;
+                aspect-ratio: auto;
+
+                .k-button-icon {
+                    min-width: auto;
+                    min-height: auto;
+                }
             }
 
             &.k-hstack {
                 > .k-button {
-                    height: auto;
+                    padding: 0 map-get( $spacing, 1 );
                 }
             }
 
             &.k-vstack {
                 > .k-button {
-                    width: auto;
+                    padding: map-get( $spacing, 1 ) 0;
                 }
             }
         }