[IMP] css: remove global content-box directive

We have a global css directive that sets `box-sizing: content-box`
everywhere. This is a bit stupid, as it override bootstrap default
`border-box` directive.

And it also make using `width/height` directive less intuitive, as the
size you set does not includes border/padding.

We had 32 occurrences of `box-sizing: border-box` in our codebase, to
override the global directive.

closes #5641

Task: 4550753
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

Author: hokolomopo

src/components/action_button/action_button.ts

@@ -11,7 +11,7 @@ css/* scss */ `
     margin: 2px 1px;
     padding: 0px 1px;
     border-radius: 2px;
-    min-width: 20px;
+    min-width: 22px;
   }
   .o-disabled {
     opacity: 0.6;

src/components/autofill/autofill.ts

@@ -15,7 +15,6 @@ css/* scss */ `
     height: ${AUTOFILL_EDGE_LENGTH}px;
     width: ${AUTOFILL_EDGE_LENGTH}px;
     border: 1px solid white;
-    box-sizing: border-box !important;
     background-color: #1a73e8;
   }
 

src/components/border_editor/border_editor.ts

@@ -72,8 +72,8 @@ css/* scss */ `
         margin: 1px;
         .o-line-item {
           padding: 4px;
-          width: 18px;
-          height: 18px;
+          width: 26px;
+          height: 26px;
           &.active {
             background-color: ${BUTTON_ACTIVE_BG};
           }

src/components/color_picker/color_picker.ts

@@ -74,8 +74,8 @@ css/* scss */ `
       }
     }
     .o-color-picker-line-item {
-      width: ${ITEM_EDGE_LENGTH}px;
-      height: ${ITEM_EDGE_LENGTH}px;
+      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
       margin: 0px;
       border-radius: 50px;
       border: ${ITEM_BORDER_WIDTH}px solid #666666;
@@ -98,7 +98,6 @@ css/* scss */ `
         font-size: 14px;
         background: white;
         border-radius: 4px;
-        box-sizing: border-box;
         &:hover:enabled {
           background-color: rgba(0, 0, 0, 0.08);
         }
@@ -125,7 +124,6 @@ css/* scss */ `
       .o-gradient {
         margin-bottom: ${MAGNIFIER_EDGE / 2}px;
         border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        box-sizing: border-box;
         width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
         height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
         position: relative;
@@ -134,7 +132,6 @@ css/* scss */ `
       .magnifier {
         height: ${MAGNIFIER_EDGE}px;
         width: ${MAGNIFIER_EDGE}px;
-        box-sizing: border-box;
         border-radius: 50%;
         border: 2px solid #fff;
         box-shadow: 0px 0px 3px #c0c0c0;
@@ -149,7 +146,6 @@ css/* scss */ `
       }
       .o-hue-picker {
         border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        box-sizing: border-box;
         width: 100%;
         height: 12px;
         border-radius: 4px;
@@ -176,7 +172,6 @@ css/* scss */ `
         padding: 2px 0px;
         display: flex;
         input {
-          box-sizing: border-box;
           width: 50%;
           border-radius: 4px;
           padding: 4px 23px 4px 10px;

src/components/color_picker/color_picker_widget.ts

@@ -38,7 +38,7 @@ css/* scss */ `
     .o-color-picker-button {
       > span {
         border-bottom: 4px solid;
-        height: 16px;
+        height: 20px;
         margin-top: 2px;
         display: block;
       }

src/components/composer/composer/composer.ts

@@ -51,8 +51,6 @@ css/* scss */ `
       word-break: break-all;
       padding-right: 2px;
 
-      box-sizing: border-box;
-
       caret-color: black;
       padding-left: 3px;
       padding-right: 3px;

src/components/composer/grid_composer/grid_composer.ts

@@ -21,7 +21,6 @@ const GRID_CELL_REFERENCE_TOP_OFFSET = 28;
 css/* scss */ `
   div.o-grid-composer {
     z-index: ${ComponentsImportance.GridComposer};
-    box-sizing: border-box;
     position: absolute;
     border: ${COMPOSER_BORDER_WIDTH}px solid ${SELECTION_BORDER_COLOR};
     font-family: ${DEFAULT_FONT};

src/components/composer/standalone_composer/standalone_composer.ts

@@ -15,7 +15,6 @@ css/* scss */ `
   .o-spreadsheet {
     .o-standalone-composer {
       min-height: 24px;
-      box-sizing: border-box;
 
       border-bottom: 1px solid;
       border-color: ${GRAY_300};

src/components/data_validation_overlay/dv_checkbox/dv_checkbox.ts

@@ -8,8 +8,6 @@ const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
 
 css/* scss */ `
   .o-dv-checkbox {
-    box-sizing: border-box !important;
-    accent-color: #808080;
     margin: ${MARGIN}px;
     /* required to prevent the checkbox position to be sensible to the font-size (affects Firefox) */
     position: absolute;

src/components/error_tooltip/error_tooltip.ts

@@ -14,7 +14,6 @@ css/* scss */ `
     border-left: 3px solid red;
     padding: 10px;
     width: ${ERROR_TOOLTIP_WIDTH}px;
-    box-sizing: border-box !important;
     overflow-wrap: break-word;
 
     .o-error-tooltip-message {