diff --git a/tests/_output/bootstrap/tabstrip/tabstrip-scrollable-buttons-hidden.png b/tests/_output/bootstrap/tabstrip/tabstrip-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..4e26ab0d085
Binary files /dev/null and b/tests/_output/bootstrap/tabstrip/tabstrip-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/bootstrap/tabstrip/tabstrip-sizes.png b/tests/_output/bootstrap/tabstrip/tabstrip-sizes.png
new file mode 100644
index 00000000000..263f02a3f3a
Binary files /dev/null and b/tests/_output/bootstrap/tabstrip/tabstrip-sizes.png differ
diff --git a/tests/_output/classic/tabstrip/tabstrip-scrollable-buttons-hidden.png b/tests/_output/classic/tabstrip/tabstrip-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..5ad88eb0d09
Binary files /dev/null and b/tests/_output/classic/tabstrip/tabstrip-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/classic/tabstrip/tabstrip-sizes.png b/tests/_output/classic/tabstrip/tabstrip-sizes.png
new file mode 100644
index 00000000000..bade5f6a358
Binary files /dev/null and b/tests/_output/classic/tabstrip/tabstrip-sizes.png differ
diff --git a/tests/_output/default/tabstrip/tabstrip-scrollable-buttons-hidden.png b/tests/_output/default/tabstrip/tabstrip-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..581502bc9f7
Binary files /dev/null and b/tests/_output/default/tabstrip/tabstrip-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/default/tabstrip/tabstrip-sizes.png b/tests/_output/default/tabstrip/tabstrip-sizes.png
new file mode 100644
index 00000000000..1d1235443f6
Binary files /dev/null and b/tests/_output/default/tabstrip/tabstrip-sizes.png differ
diff --git a/tests/_output/fluent/tabstrip/tabstrip-scrollable-buttons-hidden.png b/tests/_output/fluent/tabstrip/tabstrip-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..e385a866c67
Binary files /dev/null and b/tests/_output/fluent/tabstrip/tabstrip-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/fluent/tabstrip/tabstrip-sizes.png b/tests/_output/fluent/tabstrip/tabstrip-sizes.png
new file mode 100644
index 00000000000..3af916095ec
Binary files /dev/null and b/tests/_output/fluent/tabstrip/tabstrip-sizes.png differ
diff --git a/tests/_output/material/tabstrip/tabstrip-scrollable-buttons-hidden.png b/tests/_output/material/tabstrip/tabstrip-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..7f63c05f7c4
Binary files /dev/null and b/tests/_output/material/tabstrip/tabstrip-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/material/tabstrip/tabstrip-sizes.png b/tests/_output/material/tabstrip/tabstrip-sizes.png
new file mode 100644
index 00000000000..2f16af436ef
Binary files /dev/null and b/tests/_output/material/tabstrip/tabstrip-sizes.png differ
diff --git a/tests/chart-wizard/chart-wizard-tabs-content.html b/tests/chart-wizard/chart-wizard-tabs-content.html
index 451b6f7b7d4..459256a92af 100644
--- a/tests/chart-wizard/chart-wizard-tabs-content.html
+++ b/tests/chart-wizard/chart-wizard-tabs-content.html
@@ -21,7 +21,7 @@
         <div class="k-font-bold">Data Tab</div>
         <div class="k-font-bold">Format Tab</div>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-active k-first">
@@ -131,7 +131,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -173,7 +173,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/chart-wizard/chart-wizard.html b/tests/chart-wizard/chart-wizard.html
index b53099c0984..41e6cd9d2e4 100644
--- a/tests/chart-wizard/chart-wizard.html
+++ b/tests/chart-wizard/chart-wizard.html
@@ -195,7 +195,7 @@
                             </div>
                         </div>
                         <div class="k-chart-wizard-property-pane k-pane k-pane-static" style="flex-basis: 300px;">
-                            <div class="k-tabstrip k-tabstrip-top">
+                            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                         <li class="k-item k-tabstrip-item k-active k-first">
diff --git a/tests/column-menu/column-menu-tabbed.html b/tests/column-menu/column-menu-tabbed.html
index 51daea232e5..34b56d3f9ad 100644
--- a/tests/column-menu/column-menu-tabbed.html
+++ b/tests/column-menu/column-menu-tabbed.html
@@ -26,7 +26,7 @@
         <span>Second tab selected</span>
         <section>
             <div class="k-column-menu k-column-menu-tabbed">
-                <div class="k-tabstrip k-pos-relative k-tabstrip-top">
+                <div class="k-tabstrip k-pos-relative k-tabstrip-top k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-active">
@@ -64,7 +64,7 @@
         </section>
         <section>
             <div class="k-column-menu k-column-menu-tabbed">
-                <div class="k-tabstrip k-overflow-hidden k-tabstrip-top">
+                <div class="k-tabstrip k-overflow-hidden k-tabstrip-top k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item">
@@ -148,7 +148,7 @@
         <span>Single Tab Set</span>
         <section>
             <div class="k-column-menu k-column-menu-tabbed">
-                <div class="k-tabstrip k-overflow-hidden k-tabstrip-top">
+                <div class="k-tabstrip k-overflow-hidden k-tabstrip-top k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-active">
@@ -232,7 +232,7 @@
         </section>
         <section>
             <div class="k-column-menu k-column-menu-tabbed">
-                <div class="k-tabstrip k-pos-relative k-tabstrip-top">
+                <div class="k-tabstrip k-pos-relative k-tabstrip-top k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-active">
diff --git a/tests/dock-manager/dock-manager-floating-panes.html b/tests/dock-manager/dock-manager-floating-panes.html
index d90965227d0..b82fe6e44ae 100644
--- a/tests/dock-manager/dock-manager-floating-panes.html
+++ b/tests/dock-manager/dock-manager-floating-panes.html
@@ -82,7 +82,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-active k-first">
diff --git a/tests/dock-manager/dock-manager-unpinned-pane.html b/tests/dock-manager/dock-manager-unpinned-pane.html
index da84bd20061..2d40b3f69a0 100644
--- a/tests/dock-manager/dock-manager-unpinned-pane.html
+++ b/tests/dock-manager/dock-manager-unpinned-pane.html
@@ -60,7 +60,7 @@
                     <div class="k-pane k-pane-static" style="flex-basis: 70%;">
                         <div class="k-dock-manager-splitter k-splitter k-splitter-horizontal k-splitter-flex">
                             <div class="k-pane k-pane-static k-pane-tabbed" style="flex-basis: 40%;">
-                                <div class="k-tabstrip k-tabstrip-top" style="height: 100%;">
+                                <div class="k-tabstrip k-tabstrip-top k-tabstrip-md" style="height: 100%;">
                                     <div class="k-tabstrip-items-wrapper k-hstack">
                                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                             <li class="k-item k-tabstrip-item k-active k-first">
@@ -116,7 +116,7 @@
                             <div class="k-pane">
                                 <div class="k-dock-manager-splitter k-splitter k-splitter-vertical k-splitter-flex">
                                     <div class="k-pane k-pane-static k-pane-tabbed" style="flex-basis: 50%;">
-                                        <div class="k-tabstrip k-tabstrip-top" style="height: 100%;">
+                                        <div class="k-tabstrip k-tabstrip-top k-tabstrip-md" style="height: 100%;">
                                             <div class="k-tabstrip-items-wrapper k-hstack">
                                                 <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                                     <li class="k-item k-tabstrip-item k-active k-first">
diff --git a/tests/dock-manager/dock-manager.html b/tests/dock-manager/dock-manager.html
index 002bf90e0a9..c69e2a0623e 100644
--- a/tests/dock-manager/dock-manager.html
+++ b/tests/dock-manager/dock-manager.html
@@ -63,7 +63,7 @@
                                     <div class="k-resize-handle"></div>
                                 </div>
                                 <div class="k-pane k-pane-static k-pane-tabbed" style="flex-basis: 40%;">
-                                    <div class="k-tabstrip k-tabstrip-top" style="height: 100%;">
+                                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md" style="height: 100%;">
                                         <div class="k-tabstrip-items-wrapper k-hstack">
                                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                                 <li class="k-item k-tabstrip-item k-active k-first">
@@ -119,7 +119,7 @@
                                 <div class="k-pane">
                                     <div class="k-dock-manager-splitter k-splitter k-splitter-vertical k-splitter-flex">
                                         <div class="k-pane k-pane-static k-pane-tabbed" style="flex-basis: 50%;">
-                                            <div class="k-tabstrip k-tabstrip-top" style="height: 100%;">
+                                            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md" style="height: 100%;">
                                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                                         <li class="k-item k-tabstrip-item k-active k-first">
diff --git a/tests/editor/editor-find-replace.html b/tests/editor/editor-find-replace.html
index c12593d8ea5..4339ffd124a 100644
--- a/tests/editor/editor-find-replace.html
+++ b/tests/editor/editor-find-replace.html
@@ -45,7 +45,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-editor-find-replace k-tabstrip-top">
+                    <div class="k-tabstrip k-editor-find-replace k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-active">
@@ -140,7 +140,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-editor-find-replace k-tabstrip-top">
+                    <div class="k-tabstrip k-editor-find-replace k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item">
diff --git a/tests/editor/editor-table-wizard.html b/tests/editor/editor-table-wizard.html
index b17262dbd23..ccb2cabc121 100644
--- a/tests/editor/editor-table-wizard.html
+++ b/tests/editor/editor-table-wizard.html
@@ -40,7 +40,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-active k-first">
@@ -414,7 +414,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/gantt/gantt-editing-popup-general.html b/tests/gantt/gantt-editing-popup-general.html
index 572bb28d1c0..7b2915eecb0 100644
--- a/tests/gantt/gantt-editing-popup-general.html
+++ b/tests/gantt/gantt-editing-popup-general.html
@@ -47,7 +47,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-active k-first">
diff --git a/tests/gantt/gantt-editing-popup-other.html b/tests/gantt/gantt-editing-popup-other.html
index 955b6c8d245..52030c7bd79 100644
--- a/tests/gantt/gantt-editing-popup-other.html
+++ b/tests/gantt/gantt-editing-popup-other.html
@@ -47,7 +47,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/gantt/gantt-editing-popup-predecessors.html b/tests/gantt/gantt-editing-popup-predecessors.html
index 23e8b644665..e4b6e1e5894 100644
--- a/tests/gantt/gantt-editing-popup-predecessors.html
+++ b/tests/gantt/gantt-editing-popup-predecessors.html
@@ -48,7 +48,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/gantt/gantt-editing-popup-resources.html b/tests/gantt/gantt-editing-popup-resources.html
index d16aa83cfe7..0846c2a1c86 100644
--- a/tests/gantt/gantt-editing-popup-resources.html
+++ b/tests/gantt/gantt-editing-popup-resources.html
@@ -47,7 +47,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/gantt/gantt-editing-popup-successors.html b/tests/gantt/gantt-editing-popup-successors.html
index 966f2bf8650..82ca2a2b61e 100644
--- a/tests/gantt/gantt-editing-popup-successors.html
+++ b/tests/gantt/gantt-editing-popup-successors.html
@@ -48,7 +48,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/grid/grid-column-menu-tabbed.html b/tests/grid/grid-column-menu-tabbed.html
index f3665104846..1083947a845 100644
--- a/tests/grid/grid-column-menu-tabbed.html
+++ b/tests/grid/grid-column-menu-tabbed.html
@@ -30,7 +30,7 @@
                 <div class="k-child-animation-container">
                     <div class="k-grid-columnmenu-popup k-popup">
                         <div class="k-column-menu k-column-menu-tabbed">
-                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top">
+                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top k-tabstrip-md">
                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                         <li class="k-item k-tabstrip-item k-active">
@@ -129,7 +129,7 @@
                 <div class="k-child-animation-container">
                     <div class="k-grid-columnmenu-popup k-popup">
                         <div class="k-column-menu k-column-menu-tabbed">
-                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top">
+                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top k-tabstrip-md">
                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                         <li class="k-item k-tabstrip-item">
@@ -233,7 +233,7 @@
                 <div class="k-child-animation-container">
                     <div class="k-grid-columnmenu-popup k-popup">
                         <div class="k-column-menu k-column-menu-tabbed">
-                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top">
+                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top k-tabstrip-md">
                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                         <li class="k-item k-tabstrip-item">
@@ -416,7 +416,7 @@
                 <div class="k-child-animation-container">
                     <div class="k-grid-columnmenu-popup k-popup">
                         <div class="k-column-menu k-column-menu-tabbed">
-                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top">
+                            <div class="k-tabstrip k-overflow-hidden k-tabstrip-top k-tabstrip-md">
                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                         <li class="k-item k-tabstrip-item k-active">
@@ -506,7 +506,7 @@
                 <div class="k-child-animation-container">
                     <div class="k-grid-columnmenu-popup k-popup">
                         <div class="k-column-menu k-column-menu-tabbed">
-                            <div class="k-tabstrip k-pos-relative k-tabstrip-top">
+                            <div class="k-tabstrip k-pos-relative k-tabstrip-top k-tabstrip-md">
                                 <div class="k-tabstrip-items-wrapper k-hstack">
                                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                         <li class="k-item k-tabstrip-item k-active">
diff --git a/tests/spreadsheet/spreadsheet-cell-contextmenu.html b/tests/spreadsheet/spreadsheet-cell-contextmenu.html
index 960c8e0db28..7b981125ac0 100644
--- a/tests/spreadsheet/spreadsheet-cell-contextmenu.html
+++ b/tests/spreadsheet/spreadsheet-cell-contextmenu.html
@@ -726,7 +726,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable">
+                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/spreadsheet/spreadsheet-filtering.html b/tests/spreadsheet/spreadsheet-filtering.html
index 1680ef128ec..402e0625674 100644
--- a/tests/spreadsheet/spreadsheet-filtering.html
+++ b/tests/spreadsheet/spreadsheet-filtering.html
@@ -733,7 +733,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable">
+                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/spreadsheet/spreadsheet-formula.html b/tests/spreadsheet/spreadsheet-formula.html
index 7384b95d204..c3bad2abda1 100644
--- a/tests/spreadsheet/spreadsheet-formula.html
+++ b/tests/spreadsheet/spreadsheet-formula.html
@@ -521,7 +521,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable">
+                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/spreadsheet/spreadsheet-print.html b/tests/spreadsheet/spreadsheet-print.html
index 3da7999138a..168c8845f57 100644
--- a/tests/spreadsheet/spreadsheet-print.html
+++ b/tests/spreadsheet/spreadsheet-print.html
@@ -32,7 +32,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-active k-first">
@@ -374,7 +374,7 @@
                     </div>
                 </div>
                 <div class="k-window-content">
-                    <div class="k-tabstrip k-tabstrip-top">
+                    <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/spreadsheet/spreadsheet-row-contextmenu.html b/tests/spreadsheet/spreadsheet-row-contextmenu.html
index 196ec91583b..940d5217475 100644
--- a/tests/spreadsheet/spreadsheet-row-contextmenu.html
+++ b/tests/spreadsheet/spreadsheet-row-contextmenu.html
@@ -726,7 +726,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable">
+                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/spreadsheet/spreadsheet-sheets-bar.html b/tests/spreadsheet/spreadsheet-sheets-bar.html
index 4dea0b50260..7e5fe5080e1 100644
--- a/tests/spreadsheet/spreadsheet-sheets-bar.html
+++ b/tests/spreadsheet/spreadsheet-sheets-bar.html
@@ -48,7 +48,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable">
+                    <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                         <div class="k-tabstrip-items-wrapper k-hstack">
                             <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                 <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/spreadsheet/spreadsheet.html b/tests/spreadsheet/spreadsheet.html
index fbedb8798ca..7c39dfe160a 100644
--- a/tests/spreadsheet/spreadsheet.html
+++ b/tests/spreadsheet/spreadsheet.html
@@ -719,7 +719,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable">
+                <div class="k-tabstrip k-spreadsheet-sheets k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                     <div class="k-tabstrip-items-wrapper k-hstack">
                         <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                             <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-actions.html b/tests/tabstrip/tabstrip-actions.html
index 6603f005bfb..707a801c3ec 100644
--- a/tests/tabstrip/tabstrip-actions.html
+++ b/tests/tabstrip/tabstrip-actions.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-1">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-alignment.html b/tests/tabstrip/tabstrip-alignment.html
index 4b015363062..a60500e9733 100644
--- a/tests/tabstrip/tabstrip-alignment.html
+++ b/tests/tabstrip/tabstrip-alignment.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -48,7 +48,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-center">
                         <li class="k-item k-tabstrip-item k-first">
@@ -84,7 +84,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-end">
                         <li class="k-item k-tabstrip-item k-first">
@@ -120,7 +120,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-stretched">
                         <li class="k-item k-tabstrip-item k-first">
@@ -156,7 +156,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-justify">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-closable.html b/tests/tabstrip/tabstrip-closable.html
index e156737a4b0..bb1d2ef1d54 100644
--- a/tests/tabstrip/tabstrip-closable.html
+++ b/tests/tabstrip/tabstrip-closable.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -65,7 +65,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-bottom">
+            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Closable items</div>
                 </div>
@@ -118,7 +118,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-left">
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -171,7 +171,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-right">
+            <div class="k-tabstrip k-tabstrip-right k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-icons.html b/tests/tabstrip/tabstrip-icons.html
index eb8411815a1..b4334437d6b 100644
--- a/tests/tabstrip/tabstrip-icons.html
+++ b/tests/tabstrip/tabstrip-icons.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -63,7 +63,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-rtl.html b/tests/tabstrip/tabstrip-rtl.html
index 758f05c7754..784d0dd04b3 100644
--- a/tests/tabstrip/tabstrip-rtl.html
+++ b/tests/tabstrip/tabstrip-rtl.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-top">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -44,7 +44,7 @@
                 </div>
                 <div class="k-tabstrip-content k-active">
                     <div class="k-tabstrip-wrapper">
-                        <div dir="rtl" class="k-tabstrip k-tabstrip-left">
+                        <div dir="rtl" class="k-tabstrip k-tabstrip-left k-tabstrip-md">
                             <div class="k-tabstrip-items-wrapper k-vstack">
                                 <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                     <li class="k-item k-tabstrip-item k-active k-first">
@@ -66,7 +66,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-bottom">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-bottom k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom orientation</div>
                 </div>
@@ -102,7 +102,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-left">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-left k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -138,7 +138,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-right">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-right k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-scrollable-buttons-end.html b/tests/tabstrip/tabstrip-scrollable-buttons-end.html
index df9f87b7546..81296f632f3 100644
--- a/tests/tabstrip/tabstrip-scrollable-buttons-end.html
+++ b/tests/tabstrip/tabstrip-scrollable-buttons-end.html
@@ -24,7 +24,7 @@
     </style>
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -74,7 +74,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom scrollable</div>
                 </div>
@@ -124,7 +124,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -174,7 +174,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip-scrollable-buttons-hidden.html b/tests/tabstrip/tabstrip-scrollable-buttons-hidden.html
new file mode 100644
index 00000000000..08a2f61ff57
--- /dev/null
+++ b/tests/tabstrip/tabstrip-scrollable-buttons-hidden.html
@@ -0,0 +1,440 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style></style>
+    <div id="test-area" class="k-d-grid k-grid-cols-3">
+        <span>Horizontal orientation</span>
+        <span></span>
+        <span></span>
+        <section>
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-scrollable-start k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Horizontal - Scrollable - No Buttons Scroll Start</div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-scrollable-end k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Horizontal - Scrollable - No Buttons Scroll End</div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Horizontal - Scrollable - No Buttons Scroll Both</div>
+                </div>
+            </div>
+        </section>
+        <span>Vertical orientation</span>
+        <span></span>
+        <span></span>
+        <section>
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-scrollable-start k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-vstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Vertical - Scrollable - No Buttons Scroll Start</div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-scrollable-end k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-vstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Vertical - Scrollable - No Buttons Scroll End</div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-vstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Vertical - Scrollable - No Buttons Scroll both</div>
+                </div>
+            </div>
+        </section>
+        <span>Horizontal orientation - RTL</span>
+        <span></span>
+        <span></span>
+        <section>
+            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-scrollable-start k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Horizontal - Scrollable - No Buttons Scroll Start</div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-scrollable-end k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Horizontal - Scrollable - No Buttons Scroll End</div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-scrollable-overlay k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <ul class="k-tabstrip-items-scroll k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Second</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-active">
+                            <span class="k-link">
+                                <span class="k-link-text">Third</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fourth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Fifth - last visible</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item">
+                            <span class="k-link">
+                                <span class="k-link-text">Sixth</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last Very Long item</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Horizontal - Scrollable - No Buttons Scroll Both</div>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/tests/tabstrip/tabstrip-scrollable-buttons-start.html b/tests/tabstrip/tabstrip-scrollable-buttons-start.html
index 5ad4bb173e4..8ac6adc8853 100644
--- a/tests/tabstrip/tabstrip-scrollable-buttons-start.html
+++ b/tests/tabstrip/tabstrip-scrollable-buttons-start.html
@@ -24,7 +24,7 @@
     </style>
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
@@ -74,7 +74,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom scrollable</div>
                 </div>
@@ -124,7 +124,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
@@ -174,7 +174,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
diff --git a/tests/tabstrip/tabstrip-scrollable-rtl.html b/tests/tabstrip/tabstrip-scrollable-rtl.html
index 57fd51210fb..37132f16cb2 100644
--- a/tests/tabstrip/tabstrip-scrollable-rtl.html
+++ b/tests/tabstrip/tabstrip-scrollable-rtl.html
@@ -24,7 +24,7 @@
     </style>
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
@@ -74,7 +74,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom scrollable</div>
                 </div>
@@ -124,7 +124,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
@@ -174,7 +174,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
diff --git a/tests/tabstrip/tabstrip-scrollable.html b/tests/tabstrip/tabstrip-scrollable.html
index 74757a5f98f..787728d5ca9 100644
--- a/tests/tabstrip/tabstrip-scrollable.html
+++ b/tests/tabstrip/tabstrip-scrollable.html
@@ -24,7 +24,7 @@
     </style>
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
@@ -74,7 +74,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom scrollable</div>
                 </div>
@@ -124,7 +124,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
@@ -174,7 +174,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable">
+            <div class="k-tabstrip k-tabstrip-right k-tabstrip-scrollable k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
diff --git a/tests/tabstrip/tabstrip-sizes.html b/tests/tabstrip/tabstrip-sizes.html
new file mode 100644
index 00000000000..0cfeb3eeb3a
--- /dev/null
+++ b/tests/tabstrip/tabstrip-sizes.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <div id="test-area" class="k-d-grid k-grid-cols-3">
+        <div>
+            <span>small</span>
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-sm">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <button class="k-tabstrip-prev k-button k-button-sm k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m160 256 192-128v256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-active k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last</span>
+                            </span>
+                        </li>
+                    </ul>
+                    <button class="k-tabstrip-next k-button k-button-sm k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M352 256 160 384V128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Tab Content</div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <span>medium</span>
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-md">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m160 256 192-128v256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-active k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last</span>
+                            </span>
+                        </li>
+                    </ul>
+                    <button class="k-tabstrip-next k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M352 256 160 384V128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Tab Content</div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <span>large</span>
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-scrollable k-tabstrip-lg">
+                <div class="k-tabstrip-items-wrapper k-hstack">
+                    <button class="k-tabstrip-prev k-button k-button-lg k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m160 256 192-128v256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
+                        <li class="k-item k-tabstrip-item k-active k-first">
+                            <span class="k-link">
+                                <span class="k-link-text">First</span>
+                            </span>
+                        </li>
+                        <li class="k-item k-tabstrip-item k-last">
+                            <span class="k-link">
+                                <span class="k-link-text">Last</span>
+                            </span>
+                        </li>
+                    </ul>
+                    <button class="k-tabstrip-next k-button k-button-lg k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M352 256 160 384V128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+                <div class="k-tabstrip-content k-active">
+                    <div>Tab Content</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/tests/tabstrip/tabstrip-sortable.html b/tests/tabstrip/tabstrip-sortable.html
index bdf2bc71287..474812b6dfb 100644
--- a/tests/tabstrip/tabstrip-sortable.html
+++ b/tests/tabstrip/tabstrip-sortable.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-active k-tabstrip-dragging k-first">
@@ -33,7 +33,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-bottom">
+            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom sortable</div>
                 </div>
@@ -54,7 +54,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-left">
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-active k-tabstrip-dragging k-first">
@@ -75,7 +75,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-right">
+            <div class="k-tabstrip k-tabstrip-right k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-active k-tabstrip-dragging k-first">
diff --git a/tests/tabstrip/tabstrip-states.html b/tests/tabstrip/tabstrip-states.html
index 453ac0b8609..d469455d2ac 100644
--- a/tests/tabstrip/tabstrip-states.html
+++ b/tests/tabstrip/tabstrip-states.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-active">
@@ -43,7 +43,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -96,7 +96,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-focus k-active k-first">
@@ -117,7 +117,7 @@
             </div>
         </section>
         <section>
-            <div dir="rtl" class="k-tabstrip k-tabstrip-top">
+            <div dir="rtl" class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -169,7 +169,7 @@
                 </div>
             </div>
         </section>
-        <div class="k-tabstrip k-tabstrip-top">
+        <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
             <div class="k-tabstrip-items-wrapper k-hstack">
                 <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                     <li class="k-item k-tabstrip-item k-first">
diff --git a/tests/tabstrip/tabstrip.html b/tests/tabstrip/tabstrip.html
index 4656fc7efb4..c370280f028 100644
--- a/tests/tabstrip/tabstrip.html
+++ b/tests/tabstrip/tabstrip.html
@@ -12,7 +12,7 @@
 <body id="app" class="k-body">
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <section>
-            <div class="k-tabstrip k-tabstrip-top">
+            <div class="k-tabstrip k-tabstrip-top k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-hstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -44,7 +44,7 @@
                 </div>
                 <div class="k-tabstrip-content k-active">
                     <div class="k-tabstrip-wrapper">
-                        <div class="k-tabstrip k-tabstrip-left">
+                        <div class="k-tabstrip k-tabstrip-left k-tabstrip-md">
                             <div class="k-tabstrip-items-wrapper k-vstack">
                                 <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                                     <li class="k-item k-tabstrip-item k-active k-first">
@@ -66,7 +66,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-bottom">
+            <div class="k-tabstrip k-tabstrip-bottom k-tabstrip-md">
                 <div class="k-tabstrip-content k-active">
                     <div>Bottom orientation</div>
                 </div>
@@ -102,7 +102,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-left">
+            <div class="k-tabstrip k-tabstrip-left k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">
@@ -138,7 +138,7 @@
             </div>
         </section>
         <section>
-            <div class="k-tabstrip k-tabstrip-right">
+            <div class="k-tabstrip k-tabstrip-right k-tabstrip-md">
                 <div class="k-tabstrip-items-wrapper k-vstack">
                     <ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
                         <li class="k-item k-tabstrip-item k-first">