[FIX] sale, sale_management: fix mobile quantity input in SO template

Issue

	- Install eCommerce with any theme
	- Website > Enable optional product
	- Create a SO with an optional product
	- Save > Customer Preview
	- Mobile view with inspector
	- Click on the shopping cart icon in
	  the optional product line

	Quantity selector is not correctly
	displayed

Cause

	First, the input width is 50%, which
	means very small on mobile and there
	are paddings on the input and the buttons

Solution

	Remove the 50% width and paddings on mobile
	It allows to see 3 chars on very small
	mobile screen.

OPW-2220893

closes odoo/odoo#48423

X-original-commit: 38e90e09239eb75bd25001c7870758b380159ad0
Signed-off-by: Jason Van Malder (jvm) <jvm@odoo.com>

addons/sale/static/src/scss/sale_portal.scss

@@ -14,3 +14,15 @@
 .sale_tbody .o_line_note {
     word-break: break-all;
 }
+
+.o_portal .sale_tbody .js_quantity_container {
+    width: 50%;
+
+    .js_quantity {
+        text-align: center;
+    }
+
+    @include media-breakpoint-down(sm) {
+        width: 100%;
+    }
+}

addons/sale_management/views/sale_portal_templates.xml

@@ -79,10 +79,10 @@
 
         <xpath expr="//section[@id='details']//div[@id='quote_qty']" position="replace">
             <t t-if="sale_order.state in ['draft', 'sent'] and line.sale_order_option_ids">
-                <div class="input-group w-50 pull-right">
+                <div class="input-group js_quantity_container pull-right">
 
                     <div class="input-group-prepend d-print-none">
-                        <span class="input-group-text">
+                        <span class="input-group-text d-none d-md-inline-block">
                             <a t-att-data-line-id="line.id" t-att-data-remove="True" href="#" class="js_update_line_json" aria-label="Remove one" title="Remove one">
                                 <span class="fa fa-minus"/>
                             </a>
@@ -91,7 +91,7 @@
                     <!-- TODO add uom in this case too -->
                     <input type="text" class="js_quantity form-control" t-att-data-line-id="line.id" t-att-value="line.product_uom_qty"/>
                     <div class="input-group-append d-print-none">
-                        <span class="input-group-text">
+                        <span class="input-group-text d-none d-md-inline-block">
                             <a t-att-data-line-id="line.id" href="#" class="js_update_line_json" aria-label="Add one" title="Add one">
                                 <span class="fa fa-plus"/>
                             </a>