MDL-46860 filepicker: change responsive styling

Changed the filepicker's responsive styling to kick in
on screen width less than 768px (which is the bootstrap
standard) rather than 873px. This allows the standard
styling to apply within an iframe.

repository/filepicker.js

@@ -1318,7 +1318,7 @@ M.core_filepicker.init = function(Y, options) {
                 modal        : true,
                 visible      : false,
                 width        : width+'px',
-                responsiveWidth : 873,
+                responsiveWidth : 768,
                 height       : '558px',
                 zIndex       : this.options.zIndex
             });

theme/base/style/filemanager.css

@@ -461,9 +461,9 @@ a.ygtvspacer:hover {color:transparent;text-decoration:none;}
 /**
  * Responsive styles for the filepicker
  */
-@media (max-width:873px) {
+@media (max-width:767px) {
     .file-picker .fp-repo-area {width:100%;height:auto;max-height:220px;y-scroll:auto;float:none;border:0px;}
-    .file-picker .fp-repo-items {width:100%;float:none;}
+    .file-picker .fp-repo-items {width:100%;float:none;margin-left:0;}
     .file-picker .fp-login-form .fp-login-input .label {text-align:left;}
     .dir-rtl .file-picker .fp-login-form .fp-login-input .label {text-align:right;}
     .file-picker .fp-content form td {display:block;width:100%;text-align:left;}

theme/bootstrapbase/less/moodle/responsive.less

@@ -52,7 +52,7 @@
     }
 }
 
-@media (max-width: 873px) {
+@media (max-width: 767px) {
     .file-picker .fp-repo-area {
         width: 100%;
         height: auto;
@@ -64,6 +64,7 @@
     .file-picker .fp-repo-items {
         width: 100%;
         float: none;
+        margin-left: 0;
     }
     .file-picker .fp-login-form .fp-login-input label {
         text-align: left;