From 23acf203e902afc63ec831ce8601e82c126f0148 Mon Sep 17 00:00:00 2001
From: "Julien Carion (juca)" <juca@odoo.com>
Date: Thu, 30 Mar 2023 14:29:47 +0200
Subject: [PATCH] [FIX] devtools: Fix bad computation of highlight boxes on the
 page

This commit adds box-sizing: border-box to the highlight elements
created by the devtools on the page. This was making some of the
boxes overflow on some pages (like on POS sessions) because
the border-box box-sizing was not the default behavior on these
pages.
---
 tools/devtools/src/page_scripts/owl_devtools_global_hook.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
index bcd331f4..29d495b7 100644
--- a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
+++ b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
@@ -507,6 +507,7 @@
           highlight.style.left = `${left}px`;
           highlight.style.width = `${width}px`;
           highlight.style.height = `${height}px`;
+          highlight.style.boxSizing = "border-box";
           highlight.style.position = "fixed";
           highlight.style.backgroundColor = "rgba(15, 139, 245, 0.4)";
           highlight.style.borderStyle = "solid";
@@ -524,6 +525,7 @@
           highlightMargins.style.height = `${height + marginBottom + marginTop}px`;
           highlightMargins.style.position = "fixed";
           highlightMargins.style.borderStyle = "solid";
+          highlightMargins.style.boxSizing = "border-box";
           highlightMargins.style.borderWidth = `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`;
           highlightMargins.style.borderColor = "rgba(241, 179, 121, 0.4)";
           highlightMargins.style.zIndex = "10000";
@@ -537,6 +539,7 @@
           highlight.style.left = `${left}px`;
           highlight.style.width = `${width}px`;
           highlight.style.height = `${height}px`;
+          highlight.style.boxSizing = "border-box";
           highlight.style.position = "fixed";
           highlight.style.backgroundColor = "rgba(15, 139, 245, 0.4)";
           highlight.style.zIndex = "10000";