[IMP] big inputs on forms in edit mode

web_responsive/static/src/legacy/css/web_responsive.scss

@@ -27,6 +27,10 @@ html .o_web_client .o_action_manager .o_action {
 }
 
 @include media-breakpoint-down(sm) {
+    .ui-menu .ui-menu-item {
+        height: 35px;
+        font-size: 15px;
+    }
     .o_calendar_view .o_calendar_widget {
         .fc-timeGridDay-view .fc-axis,
         .fc-timeGridWeek-view .fc-axis {
@@ -89,6 +93,52 @@ html .o_web_client .o_action_manager .o_action {
             overflow-x: auto;
         }
 
+        .o_td_label .o_form_label:not(.o_status):not(.o_calendar_invitation) {
+            min-height: 23px;
+            @include media-breakpoint-up(md) {
+                margin-bottom: 10px;
+            }
+        }
+        .o_horizontal_separator {
+            font-size: 14px;
+        }
+        // Some UX improvements for form in edit mode
+        @include media-breakpoint-down(sm) {
+            .o_field_widget {
+                vertical-align: middle;
+            }
+            &.o_form_editable .o_field_widget {
+                &:not(.o_stat_info):not(.o_readonly_modifier):not(.oe_form_field_html):not(.o_field_image) {
+                    min-height: 35px;
+                }
+                .o_x2m_control_panel {
+                    margin-bottom: 10px;
+                }
+                &.o_field_float_percentage,
+                &.o_field_monetary,
+                &.o_field_many2manytags,
+                .o_field_many2one_selection {
+                    align-items: center;
+                }
+                .o_field_many2one_selection .o_input_dropdown,
+                &.o_datepicker,
+                &.o_field_partner_autocomplete {
+                    input {
+                        min-height: 35px;
+                    }
+                }
+                .o_external_button {
+                    margin-left: 10px;
+                }
+                .o_dropdown_button,
+                .o_datepicker_button {
+                    top: 8px;
+                    right: 6px;
+                    bottom: auto;
+                }
+            }
+        }
+
         .o_FormRenderer_chatterContainer {
             padding-top: 0;
             .o_Activity_info {
@@ -335,13 +385,15 @@ html .o_web_client .o_action_manager .o_action {
 }
 
 // Big checkboxes
-.o_list_view {
+.o_list_view,
+.o_settings_container .o_setting_box {
+    .o_setting_right_pane {
+        margin-left: 34px;
+    }
     .custom-checkbox:not(.o_boolean_toggle) {
         margin-right: 10px;
 
         .custom-control-label {
-            top: -6px;
-
             &::after {
                 width: 24px;
                 height: 24px;
@@ -355,3 +407,18 @@ html .o_web_client .o_action_manager .o_action {
         }
     }
 }
+.o_list_view {
+    .custom-checkbox:not(.o_boolean_toggle) {
+        top: -6px;
+    }
+}
+@include media-breakpoint-down(sm) {
+    .o_base_settings
+        .o_setting_container
+        .settings
+        > .app_settings_block
+        .o_settings_container {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

web_responsive/static/src/legacy/js/web_responsive.js

@@ -8,9 +8,12 @@ odoo.define("web_responsive", function (require) {
     const core = require("web.core");
     const FormRenderer = require("web.FormRenderer");
     const RelationalFields = require("web.relational_fields");
+    const ViewDialogs = require("web.view_dialogs");
     const ListRenderer = require("web.ListRenderer");
     const CalendarRenderer = require("web.CalendarRenderer");
 
+    const _t = core._t;
+
     // Fix for iOS Safari to set correct viewport height
     // https://github.com/Faisal-Manzer/postcss-viewport-height-correction
     function setViewportProperty(doc) {
@@ -110,6 +113,86 @@ odoo.define("web_responsive", function (require) {
         },
     });
 
+    /**
+     * Directly open popup dialog in mobile for search.
+     */
+    RelationalFields.FieldMany2One.include({
+        start: function () {
+            var superRes = this._super.apply(this, arguments);
+            if (config.device.isMobile) {
+                this.$input.prop("readonly", true);
+            }
+            return superRes;
+        },
+        // --------------------------------------------------------------------------
+        // Private
+        // --------------------------------------------------------------------------
+
+        /**
+         * @private
+         * @override
+         */
+        _bindAutoComplete: function () {
+            if (!config.device.isMobile) {
+                return this._super.apply(this, arguments);
+            }
+        },
+
+        /**
+         * @private
+         * @override
+         */
+        _getSearchCreatePopupOptions: function () {
+            const options = this._super.apply(this, arguments);
+            _.extend(options, {
+                on_clear: () => this.reinitialize(false),
+            });
+            return options;
+        },
+
+        /**
+         * @private
+         * @override
+         */
+        _toggleAutoComplete: function () {
+            if (config.device.isMobile) {
+                this._searchCreatePopup("search");
+            } else {
+                return this._super.apply(this, arguments);
+            }
+        },
+    });
+
+    /**
+     * Support for Clear button in search popup.
+     */
+    ViewDialogs.SelectCreateDialog.include({
+        init: function () {
+            this._super.apply(this, arguments);
+            this.on_clear =
+                this.options.on_clear ||
+                function () {
+                    return undefined;
+                };
+        },
+        /**
+         * @override
+         */
+        _prepareButtons: function () {
+            this._super.apply(this, arguments);
+            if (config.device.isMobile && this.options.disable_multiple_selection) {
+                this.__buttons.push({
+                    text: _t("Clear"),
+                    classes: "btn-secondary o_clear_button",
+                    close: true,
+                    click: function () {
+                        this.on_clear();
+                    },
+                });
+            }
+        },
+    });
+
     CalendarRenderer.include({
         /**
          * @override