diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index a8a9788dfe..f8c387c5af 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -50,13 +50,13 @@
             </div>
             <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
                 <adf-toolbar-title  fxFlex="0 1 auto">
-                    <adf-breadcrumb
-                                    class="adf-files-breadcrumb adf-standard-breadcrumb"
+                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
+                                    class="adf-files-breadcrumb"
                                     root="APP.PERSONAL-FILES"
                                     [target]="documentList">
                     </adf-breadcrumb>
-                    <adf-dropdown-breadcrumb
-                                             class="adf-files-breadcrumb adf-alternate-breadcrumb"
+                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                                             class="adf-files-breadcrumb"
                                              [target]="documentList">
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
@@ -250,7 +250,7 @@
                         key="$thumbnail"
                         type="image"
                         [sortable]="false"
-                        class="adf-image-table-cell adf-folder-image-column"
+                        class="adf-image-table-cell "
                         [class.adf-cell-thumbnail]="thumbnails">
                     </data-column>
                     <data-column
@@ -267,7 +267,7 @@
                         key="name"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip"
-                        class="adf-ellipsis-cell adf-expand-cell-5  adf-display-name-column">
+                        class="adf-ellipsis-cell adf-expand-cell-5">
                     </data-column>
                     <!-- Location column demo -->
                     <!--
@@ -279,15 +279,16 @@
                     </data-column>
                     -->
                     <data-column
-                        class="adf-size-column"
                         key="content.sizeInBytes"
                         title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
-                        type="fileSize">
+                        type="fileSize"
+                        class="adf-desktop-only">
                     </data-column>
                     <data-column
                         *ngIf="searchTerm"
                         key="search"
-                        title="Search">
+                        title="Search"
+                        class="adf-desktop-only">
                         <ng-template let-entry="$implicit">
                             <div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
                             </div>
@@ -305,14 +306,14 @@
                     </data-column>
                     -->
                     <data-column
-                        class="adf-full-width adf-ellipsis-cell adf-nodeId-column"
+                        class="adf-full-width adf-ellipsis-cell adf-desktop-only"
                         title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
                         key="id">
                     </data-column>
                     <data-column
-                        class="adf-isLocked-column"
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
-                        key="id">
+                        key="id"
+                        class="adf-desktop-only">
                         <ng-template let-entry="$implicit">
                             <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
                                 <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
@@ -323,14 +324,14 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                         key="createdByUser.displayName"
-                        class="adf-createdBy-column">
+                        class="adf-desktop-only">
                     </data-column>
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                         key="createdAt"
                         type="date"
                         [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
-                        class="adf-desktop-only adf-createdOn-column">
+                        class="adf-desktop-only">
                     </data-column>
 
                 </data-columns>
diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss
index 19cdee0418..1d7ab7a8a0 100644
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@@ -154,90 +154,97 @@
     }
 
     @media (max-width: 500px) {
-        .adf {
+        .adf-datatable-list {
+            .adf {
 
-            &-display-name-column {
-                max-width: 50% !important;
-            }
-            &-size-column {
-                display: none !important;
-            }
-            &-createdBy-column {
-                max-width: 45% !important;
-            }
-            &-nodeId-column {
-                display: none !important;
+                &-display-name-column {
+                    max-width: 50% !important;
+                }
+                &-size-column {
+                    display: none !important;
+                }
+                &-createdBy-column {
+                    max-width: 45% !important;
+                }
+                &-nodeId-column {
+                    display: none !important;
+                }
             }
         }
     }
 
     @media (max-width: 600px) {
-        .adf {
-
-            &-display-name-column {
-                max-width: 35%;
-            }
-            &-size-column {
-                max-width: 8%;
-            }
-            &-createdBy-column {
-                max-width: 35%;
-            }
-            &-createdOn-column {
-                max-width: 15%;
-            }
-            &-nodeId-column {
-                max-width: 10%;
-            }
-            &-isLocked-column {
-                display: none!important;
-            }
-            &-standard-breadcrumb {
-                display: none !important;
+        .adf-datatable-list {
+            .adf {
+                &-display-name-column {
+                    max-width: 35%;
+                }
+                &-size-column {
+                    max-width: 8%;
+                }
+                &-createdBy-column {
+                    max-width: 35%;
+                }
+                &-createdOn-column {
+                    max-width: 15%;
+                }
+                &-nodeId-column {
+                    max-width: 10%;
+                }
+                &-isLocked-column {
+                    display: none!important;
+                }
+                &-standard-breadcrumb {
+                    display: none !important;
+                }
             }
         }
     }
 
     @media (min-width: 601px) {
-        .adf {
+        .adf-datatable-list {
+            .adf {
 
-            &-display-name-column {
-                max-width: 30%;
-            }
-            &-size-column {
-                max-width: 10%;
-            }
-            &-createdBy-column {
-                max-width: 30%;
-            }
-            &-createdOn-column {
-                max-width: 15%;
-            }
-            &-nodeId-column {
-                max-width: 12%;
-            }
-            &-alternate-breadcrumb {
-                display: none !important;
+                &-display-name-column {
+                    max-width: 30%;
+                }
+                &-size-column {
+                    max-width: 10%;
+                }
+                &-createdBy-column {
+                    max-width: 30%;
+                }
+                &-createdOn-column {
+                    max-width: 15%;
+                }
+                &-nodeId-column {
+                    max-width: 12%;
+                }
+                &-alternate-breadcrumb {
+                    display: none !important;
+                }
             }
         }
     }
 
     @media (min-width: 1400px) {
-        .adf {
-            &-display-name-column {
-                max-width: 40%;
-            }
-            &-size-column {
-                max-width: 15%;
-            }
-            &-createdBy-column {
-                max-width: 20%;
-            }
-            &-createdOn-column {
-                max-width: 20%;
-            }
-            &-nodeId-column {
-                max-width: 20%;
+        .adf-datatable-list {
+            .adf {
+                &-display-name-column {
+                    max-width: 40%;
+                }
+                &-size-column {
+                    max-width: 15%;
+                }
+                &-createdBy-column {
+                    max-width: 20%;
+                }
+                &-createdOn-column {
+                    max-width: 20%;
+                }
+                &-nodeId-column {
+                    max-width: 20%;
+                }
             }
         }
     }
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
index 002d92270e..d5fd78701e 100644
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -466,17 +466,13 @@
         /* mobile phone */
         @media all and (max-width: 768px) {
             .adf-desktop-only {
-                display: none;
-            }
-
-            .adf-sticky-header {
-                width: 100%;
+                display: none !important;
             }
         }
 
         @media (max-device-width: 768px) {
             .adf-desktop-only {
-                display: none;
+                display: none !important;
             }
         }
 
@@ -496,6 +492,8 @@
 
     .adf-sticky-header {
         border-top: 0;
+        max-width: calc(100% - 0.2em);
+
         .adf-datatable-header {
             position: absolute;
             background-color: mat-color($background, card);
@@ -503,7 +501,7 @@
             z-index: 10;
             border-top: $data-table-dividers;
             border-bottom: $data-table-dividers;
-            width: calc(100% - 16em);
+            width: calc(100% - 17.4em);
         }
 
         .adf-datatable-body {