diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 4a8b53006..0d50c00d6 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -3,6 +3,7 @@
 @import (reference) "./tools.less";
 @import (reference) "./limit-bar.less";
 @import (reference) "./tokenfield.less";
+@import (reference) "./dropdown.less";
 
 .drive_main() {
     --LessLoader_require: LessLoader_currentFile();
@@ -102,10 +103,10 @@
 
     .cp-app-drive-container {
         flex: 1;
-        overflow-x: auto;
         width: 100%;
         display: flex;
         flex-flow: row;
+        min-height: 0;
         @media screen and (max-width: @browser_media-medium-screen) {
             display: block;
             #cp-app-drive-toolbar {
@@ -159,7 +160,6 @@
     .cp-app-drive-element-selected {
         background: @drive_selected-bg !important;
         color: #eee;
-        margin: -1px;
         .fa-minus-square-o, .fa-plus-square-o {
             color: @colortheme_sidebar-left-fg;
         }
@@ -169,7 +169,6 @@
         border: 1px dotted #bbb;
         background: #AAA;
         color: #ddd;
-        margin: -1px;
         .fa-minus-square-o, .fa-plus-square-o {
             color: @colortheme_sidebar-left-fg;
         }
@@ -434,10 +433,8 @@
     #cp-app-drive-content-container {
         display: flex;
         flex-flow: column;
-        flex: 1;
-        // Needed to avoid the folder's path to overflows
-        // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
-        // min-width: 0;
+        flex: 1 1 100%;
+        min-width: 0;
     }
     #cp-app-drive-content {
         box-sizing: border-box;
@@ -637,22 +634,70 @@
                 display: none;
             }
             // Make it act as a table!
-            padding-left: 20px;
+            padding-left: 10px;
             ul {
-                display: table;
                 width: 100%;
-                padding: 0px 10px;
             }
             li {
-                display: table-row;
+                display: flex;
                 input {
                     border: 1px solid #ddd;
                     margin: 0;
                     padding: 0 4px;
+                    flex: 1;
+                    min-width: 0;
                 }
+
                 &> span {
                     padding: 0 5px;
-                    display: table-cell;
+                    display: inline-block;
+                    white-space: nowrap;
+                    &.cp-app-drive-element-state {
+                        .fa, .cptools {
+                            &:not(:last-child) {
+                                margin-right: 2px;
+                            }
+                        }
+                    }
+                    &:first-child, &.cp-icon {
+                        min-width: 20px;
+                        text-align: center;
+                        font-size: 18px;
+                        line-height: 32px;
+                        padding: 0;
+                    }
+                    &.cp-app-drive-element-name {
+                        flex: 1;
+                        min-width: 0;
+                        text-align: left;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                    &.cp-app-drive-element-state {
+                        min-width: 40px;
+                        text-align: right;
+                    }
+                    &.cp-app-drive-element-list {
+                        width: 110px;
+                    }
+                    &.cp-app-drive-element-sort {
+                        display: none;
+                        .dropdown_main();
+                        .cp-dropdown-content a {
+                            display: block !important;
+                            .sortdesc {
+                                order: 2;
+                            }
+                        }
+                        button {
+                            color: inherit;
+                            background: none;
+                            border: none;
+                            .fa {
+                                margin-right: 5px;
+                            }
+                        }
+                    }
                 }
                 &:not(.cp-app-drive-element-header) {
                     height: @variables_bar-height;
@@ -674,14 +719,11 @@
                             text-align: left;
                         }
                         &.sortasc, &.sortdesc {
-                            float: right;
+                            margin-right: 3px;
                         }
                     }
                     &> span {
-                        padding: 15px 5px;
-                        &.cp-app-drive-sort-active {
-                            font-weight: bold;
-                        }
+                        padding: 14px 5px;
                         &.cp-app-drive-sort-clickable {
                             cursor: pointer;
                             &:hover {
@@ -696,28 +738,29 @@
                     overflow: hidden;
                     white-space: nowrap;
                     box-sizing: border-box;
-                    &.cp-app-drive-element-state {
-                        .fa, .cptools {
-                            &:not(:last-child) {
-                                margin-right: 5px;
-                            }
-                        }
-                    }
-                    &.cp-app-drive-content-icon, &.cp-app-drive-element-state, &.cp-icon {
-                        width: 30px;
-                    }
-                    &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
-                        width: 175px;
-                    }
-                    &.cp-app-drive-element-title {
-                        width: 250px;
-                        @media screen and (max-width: 1200px) {
-                            display: none;
-                        }
-                    }
-                    &.cp-app-drive-element-folders, &.cp-app-drive-element-files {
-                        width: 150px;
-                    }
+                }
+            }
+            @media screen and (max-width: 840px) {
+                .cp-app-drive-element-type, .cp-app-drive-element-filler {
+                    display: none !important;
+                }
+            }
+
+            @media screen and (max-width: 740px) {
+                .cp-app-drive-element-folders, .cp-app-drive-element-ctime {
+                    display: none !important;
+                }
+            }
+
+            @media screen and (max-width: 670px) {
+                .cp-app-drive-element-files, .cp-app-drive-element-atime {
+                    display: none !important;
+                }
+                .cp-app-drive-element-header .cp-app-drive-element-state {
+                    display: none !important;
+                }
+                .cp-app-drive-element-sort {
+                    display: block !important;
                 }
             }
         }
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index 57e40ffdb..9cbb5fb3b 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -1931,7 +1931,6 @@ define([
             if (thumbsUrls[element]) {
                 var img = new Image();
                 img.src = thumbsUrls[element];
-                $element.find('.cp-icon').addClass('cp-app-drive-element-list');
                 $element.prepend(img);
                 $(img).addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
                 $(img).attr("draggable", false);
@@ -1940,7 +1939,7 @@ define([
                 common.displayThumbnail(href || data.roHref, data.channel, data.password, $element, function ($thumb) {
                     // Called only if the thumbnail exists
                     // Remove the .hide() added by displayThumnail() because it hides the icon in list mode too
-                    $element.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list');
+                    $element.find('.cp-icon').removeAttr('style');
                     $thumb.addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
                     $thumb.attr("draggable", false);
                     thumbsUrls[element] = $thumb[0].src;
@@ -1998,10 +1997,13 @@ define([
             var $files = $('<span>', {
                 'class': 'cp-app-drive-element-files cp-app-drive-element-list'
             }).text(files);
+            var $filler = $('<span>', {
+                'class': 'cp-app-drive-element-filler cp-app-drive-element-list'
+            });
             if (getViewMode() === 'grid') {
                 $span.attr('title', key);
             }
-            $span.append($name).append($state).append($subfolders).append($files);
+            $span.append($name).append($state).append($subfolders).append($files).append($filler);
         };
 
         // This is duplicated in cryptpad-common, it should be unified
@@ -2714,7 +2716,7 @@ define([
                     value = '';
                 }
             } else {
-                ['cp-app-drive-element-title', 'cp-app-drive-element-type',
+                ['cp-app-drive-element-type',
                  'cp-app-drive-element-atime', 'cp-app-drive-element-ctime'].some(function (c) {
                     if ($span.hasClass(c)) {
                         var nValue = c.replace(/cp-app-drive-element-/, '');
@@ -2744,6 +2746,47 @@ define([
                 $list.find('.cp-app-drive-sort-foldername').addClass('cp-app-drive-sort-active').prepend($icon);
             }
         };
+        Messages.fm_sort = "Sort"; // XXX
+        var getSortDropdown = function (folder) {
+            var $fhSort = $(h('span.cp-dropdown-container.cp-app-drive-element-sort.cp-app-drive-sort-clickable'));
+            var options = [];
+            if (folder) {
+                options = [{
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-element-folders'},
+                    content: Messages.fm_numberOfFolders
+                },{
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-element-files'},
+                    content: Messages.fm_numberOfFiles
+                }];
+            } else {
+                options = [{
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-element-type'},
+                    content: Messages.fm_type
+                },{
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-element-atime'},
+                    content: Messages.fm_lastAccess
+                },{
+                    tag: 'a',
+                    attributes: {'class': 'cp-app-drive-element-ctime'},
+                    content: Messages.fm_creation
+                }];
+            }
+            var dropdownConfig = {
+                text: '', // Button initial text
+                options: options, // Entries displayed in the menu
+                container: $fhSort,
+                left: true,
+                common: common
+            };
+            var $sortBlock = UIElements.createDropdown(dropdownConfig);
+            $sortBlock.find('button').append(h('span.fa.fa-sort-amount-desc')).append(h('span', Messages.fm_sort));
+            $sortBlock.on('click', 'a', onSortByClick);
+            return $fhSort;
+        };
         var getFolderListHeader = function () {
             var $fohElement = $('<li>', {
                 'class': 'cp-app-drive-element-header cp-app-drive-element-list'
@@ -2754,6 +2797,8 @@ define([
                 'class': 'cp-app-drive-element-name cp-app-drive-sort-foldername ' +
                          'cp-app-drive-sort-clickable'
             }).text(Messages.fm_folderName).click(onSortByClick);
+            var $fhSort = getSortDropdown(true);
+
             var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
             var $subfolders = $('<span>', {
                 'class': 'cp-app-drive-element-folders cp-app-drive-element-list'
@@ -2761,8 +2806,11 @@ define([
             var $files = $('<span>', {
                 'class': 'cp-app-drive-element-files cp-app-drive-element-list'
             }).text(Messages.fm_numberOfFiles);
-            $fohElement.append($fhIcon).append($name).append($state)
-                        .append($subfolders).append($files);
+            var $filler = $('<span>', {
+                'class': 'cp-app-drive-element-filler cp-app-drive-element-list'
+            });
+            $fohElement.append($fhIcon).append($name).append($fhSort).append($state)
+                        .append($subfolders).append($files).append($filler);
             addFolderSortIcon($fohElement);
             return $fohElement;
         };
@@ -2788,18 +2836,20 @@ define([
                 'class': 'cp-app-drive-element-name cp-app-drive-sort-filename ' +
                          'cp-app-drive-sort-clickable'
             }).text(Messages.fm_fileName).click(onSortByClick);
+            var $fhSort = getSortDropdown();
+
             var $fhState = $('<span>', {'class': 'cp-app-drive-element-state'});
             var $fhType = $('<span>', {
-                'class': 'cp-app-drive-element-type cp-app-drive-sort-clickable'
+                'class': 'cp-app-drive-element-type cp-app-drive-sort-clickable cp-app-drive-element-list'
             }).text(Messages.fm_type).click(onSortByClick);
             var $fhAdate = $('<span>', {
-                'class': 'cp-app-drive-element-atime cp-app-drive-sort-clickable'
+                'class': 'cp-app-drive-element-atime cp-app-drive-sort-clickable cp-app-drive-element-list'
             }).text(Messages.fm_lastAccess).click(onSortByClick);
             var $fhCdate = $('<span>', {
-                'class': 'cp-app-drive-element-ctime cp-app-drive-sort-clickable'
+                'class': 'cp-app-drive-element-ctime cp-app-drive-sort-clickable cp-app-drive-element-list'
             }).text(Messages.fm_creation).click(onSortByClick);
             // If displayTitle is false, it means the "name" is the title, so do not display the "name" header
-            $fihElement.append($fhIcon).append($fhName).append($fhState).append($fhType);
+            $fihElement.append($fhIcon).append($fhName).append($fhSort).append($fhState).append($fhType);
             $fihElement.append($fhAdate).append($fhCdate);
             addFileSortIcon($fihElement);
             return $fihElement;
diff --git a/www/common/translations/messages.fr.json b/www/common/translations/messages.fr.json
index 98f124ccb..0768c8e1e 100644
--- a/www/common/translations/messages.fr.json
+++ b/www/common/translations/messages.fr.json
@@ -325,7 +325,7 @@
     "fm_fileName": "Nom du fichier",
     "fm_title": "Titre",
     "fm_type": "Type",
-    "fm_lastAccess": "Dernier accès",
+    "fm_lastAccess": "Accès",
     "fm_creation": "Création",
     "fm_forbidden": "Action interdite",
     "fm_originalPath": "Chemin d'origine",