[IMP] web: improve Export Data UI on mobile

This commit improves the UI of the Export Data action's modal on mobile
screens:
* open it full-screen
* 2 main panels are one after the other (side-by-side on desktop)

Task ID: 1879566

addons/web/static/src/js/widgets/data_export.js

@@ -41,6 +41,7 @@ var DataExport = Dialog.extend({
                 {text: _t("Export"), click: this._onExportData, classes: 'btn-primary'},
                 {text: _t("Close"), close: true},
             ],
+            fullscreen: config.device.isMobile,
         };
         this._super(parent, options);
         this.records = {};

addons/web/static/src/scss/data_export.scss

@@ -1,10 +1,8 @@
 .o_web_client .o_export {
-    padding: 20px;
     .o-export-panel {
         height: 100%;
     }
     .o_left_panel {
-        padding-right: 10px;
         flex-flow: column nowrap;
         height: 100%;
         .o_left_field_panel {
@@ -30,7 +28,6 @@
     }
 
     .o_right_panel {
-        padding-left: 10px;
         flex-flow: column nowrap;
         height: 100%;
         .o_save_list {
@@ -50,4 +47,18 @@
             }
         }
     }
+
+    @include media-breakpoint-down(sm) {
+        .ui-sortable-handle {
+            display: none;
+        }
+
+        .o_right_field_panel .o_export_field {
+            padding-left: map-get($spacers, 1);
+        }
+
+        .o_left_panel, .o_right_panel {
+            height: 50%;
+        }
+    }
 }

addons/web/static/src/xml/base.xml

@@ -1566,8 +1566,8 @@
 </div>
 
 <div t-name="ExportDialog" class="o_export">
-    <div class="row o-export-panel no-gutters">
-        <div class="col-6 d-flex o_left_panel">
+    <div class="row o-export-panel">
+        <div class="col-12 col-md-6 d-flex o_left_panel">
             <div class="form-check o_import_compat">
                 <input class="form-check-input" id="o-update-data" type="checkbox"/>
                 <label class="form-check-label" for="o-update-data">
@@ -1582,7 +1582,7 @@
             </div>
             <div class="border o_left_field_panel"/>
         </div>
-        <div class="col-6 d-flex o_right_panel">
+        <div class="col-12 col-md-6 d-flex o_right_panel mt-3 mt-md-0">
             <div class="o_export_format">
                 <strong>Export Format:</strong>
             </div>