[FIX] web: autoresize input correctly in Safari 16

Before this commit, autoresize input in Safari 16 had their
size underestimated, thus truncating the content.
For example, in the Discuss app, the header is a (disabled)
autoresize input, which becomes enabled when the thread can be
renamed. This is also used for threads that cannot be renamed
for consistency of style. So some screens like "Inbox" had its
name truncated to "In...".

This problem is only present in Safari, not in Chrome or Firefox.
Apparently the sizing of input and textarea is incorrect, and it is
fixed in Safari 17. Indeed, Safari 17 can be tested with Safari
Technology Preview where the bug is not present.

This commit fixes the issue by adding an offset to computing the
scroll width of autoresize input, so that it matches the Safari 17
behaviour that is correct.

closes odoo/odoo#129698

X-original-commit: cd9d900c93d22fec1c24dc3b1e77230f80191f04
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/web/static/src/core/utils/autoresize.js

@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import { useEffect } from "@odoo/owl";
+import { browser } from "../browser/browser";
 
 /**
  * This is used on text inputs or textareas to automatically resize it based on its
@@ -42,17 +43,19 @@ function resizeInput(input) {
     // This mesures the maximum width of the input which can get from the flex layout.
     input.style.width = "100%";
     const maxWidth = input.clientWidth;
+    // Somehow Safari 16 computes input sizes incorrectly. This is fixed in Safari 17
+    const isSafari16 = /Version\/16.+Safari/i.test(browser.navigator.userAgent);
     // Minimum width of the input
     input.style.width = "10px";
     if (input.value === "" && input.placeholder !== "") {
         input.style.width = "auto";
         return;
     }
-    if (input.scrollWidth + 5 > maxWidth) {
+    if (input.scrollWidth + 5 + (isSafari16 ? 8 : 0) > maxWidth) {
         input.style.width = "100%";
         return;
     }
-    input.style.width = input.scrollWidth + 5 + "px";
+    input.style.width = input.scrollWidth + 5 + (isSafari16 ? 8 : 0) + "px";
 }
 
 function resizeTextArea(textarea, options) {