[FIX] website_payment: adjust size of donation's custom amount button

With some fonts (e.g. Roboto), the placeholder inside the "Custom
Amount" button of the Donation snippet does not fit within the button.

This commit adjusts the maximum width of the button to make it fit
according to the used font and the placeholder text.
The width has to be set from JavaScript because the same issue
arises with different length of translations of the placeholder.

Steps to reproduce:
- Drop a Donation snippet.
- Increase the button text size (change button font, change large
button font size...)

=> Text is not fully drawn inside custom button.

opw-3283549

closes odoo/odoo#123079

X-original-commit: 320970de
Signed-off-by: Romain Derie (rde) <rde@odoo.com>

addons/website_payment/static/src/snippets/s_donation/000.js

@@ -3,6 +3,8 @@
 import {_t} from 'web.core';
 import publicWidget from 'web.public.widget';
 
+const CUSTOM_BUTTON_EXTRA_WIDTH = 10;
+
 publicWidget.registry.DonationSnippet = publicWidget.Widget.extend({
     selector: '.s_donation',
     disabledInEditableMode: false,
@@ -24,11 +26,23 @@ publicWidget.registry.DonationSnippet = publicWidget.Widget.extend({
             this._setBubble(this.$rangeSlider);
         }
         await this._displayCurrencies();
+        const customButtonEl = this.el.querySelector("#s_donation_amount_input");
+        if (customButtonEl) {
+            const canvasEl = document.createElement("canvas");
+            const context = canvasEl.getContext("2d");
+            context.font = window.getComputedStyle(customButtonEl).font;
+            const width = context.measureText(customButtonEl.placeholder).width;
+            customButtonEl.style.maxWidth = `${Math.ceil(width) + CUSTOM_BUTTON_EXTRA_WIDTH}px`;
+        }
     },
     /**
      * @override
      */
     destroy() {
+        const customButtonEl = this.el.querySelector("#s_donation_amount_input");
+        if (customButtonEl) {
+            customButtonEl.style.maxWidth = "";
+        }
         this.$target.find('.s_donation_currency').remove();
         this._deselectPrefilledButtons();
         this.$('.alert-danger').remove();