fix the iamge placeholder text

__manifest__.py

@@ -16,14 +16,17 @@ This module extends the Odoo Sign module to allow users to upload images as a fi
     ],
     'assets': {
         'web.assets_frontend': [
+            'sign_image_field/static/src/css/sign_image_field.css',
             'sign_image_field/static/src/js/sign_image_upload.js',
             'sign_image_field/static/src/xml/sign_items_image.xml',
         ],
         'web.assets_backend': [
+             'sign_image_field/static/src/css/sign_image_field.css',
              'sign_image_field/static/src/js/sign_image_upload.js',
              'sign_image_field/static/src/xml/sign_items_image.xml',
         ],
         'sign.assets_public_sign': [
+            'sign_image_field/static/src/css/sign_image_field.css',
             'sign_image_field/static/src/js/sign_image_upload.js',
             'sign_image_field/static/src/xml/sign_items_image.xml',
         ]

data/sign_item_type_data.xml

@@ -5,8 +5,8 @@
         <field name="item_type">image</field>
         <field name="icon">fa-image</field>
         <field name="tip">Upload an image</field>
-        <field name="placeholder">Click to upload image</field>
+        <field name="placeholder">📷</field>
-        <field name="default_width">0.2</field>
+        <field name="default_width">0.15</field>
-        <field name="default_height">0.05</field>
+        <field name="default_height">0.08</field>
     </record>
 </odoo>

static/src/css/sign_image_field.css

@@ -0,0 +1,43 @@
+/* Sign Image Field Styles */
+
+.o_sign_sign_item[data-type="image"] {
+    border: 2px dashed #ccc;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.o_sign_sign_item[data-type="image"]:hover {
+    border-color: #007bff;
+    background-color: #f0f8ff;
+}
+
+.o_sign_sign_item[data-type="image"] .o_placeholder,
+.o_sign_sign_item .o_placeholder {
+    font-size: 12px !important;
+    color: #666 !important;
+    font-weight: normal !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 100% !important;
+    display: inline-block !important;
+    line-height: 1 !important;
+}
+
+.o_sign_sign_item[data-type="image"] img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 2px;
+}
+
+/* Force reasonable font size for all image placeholders with highest specificity */
+div.o_sign_sign_item[data-type="image"] span.o_placeholder {
+    font-size: 12px !important;
+}
+
+/* Override any inherited font sizes with maximum specificity */
+body div.o_sign_sign_item[data-type="image"] span.o_placeholder {
+    font-size: 12px !important;
+}

static/src/js/sign_image_upload.js

@@ -7,6 +7,32 @@ patch(SignablePDFIframe.prototype, {
     enableCustom(signItem) {
         super.enableCustom(signItem);
         if (signItem.data.type === 'image') {
+            // Add data-type attribute for CSS targeting
+            signItem.el.setAttribute('data-type', 'image');
+            
+            // Function to adjust font size based on container dimensions
+            const adjustFontSize = () => {
+                const placeholder = signItem.el.querySelector('.o_placeholder');
+                if (placeholder) {
+                    const containerHeight = signItem.el.offsetHeight;
+                    const containerWidth = signItem.el.offsetWidth;
+                    // Use the smaller dimension to calculate font size, but make it more reasonable
+                    const minDimension = Math.min(containerHeight, containerWidth);
+                    const fontSize = Math.max(10, Math.min(16, minDimension * 0.4));
+                    placeholder.style.fontSize = fontSize + 'px !important';
+                    placeholder.style.lineHeight = '1';
+                }
+            };
+            
+            // Initial font size adjustment
+            setTimeout(adjustFontSize, 100);
+            
+            // Watch for size changes
+            if (window.ResizeObserver) {
+                const resizeObserver = new ResizeObserver(adjustFontSize);
+                resizeObserver.observe(signItem.el);
+            }
+            
             const input = signItem.el.querySelector('.o_sign_image_upload_input');
             if (!input) return;
 

static/src/xml/sign_items_image.xml

@@ -5,13 +5,13 @@
             <t t-if="type == 'image'" t-call="sign.imageSignItem"/>
         </xpath>
         <xpath expr="//div[@t-if=&quot;type == 'selection'&quot;]" position="after">
-             <div t-if="type == 'image'" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-style="style" t-att-data-value="value" style="text-align:center;">
+             <div t-if="type == 'image'" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-style="style" t-att-data-value="value" style="text-align:center; display:flex; align-items:center; justify-content:center;">
                 <input type="file" accept="image/*" class="o_sign_image_upload_input" style="display:none"/>
                 <t t-if="value">
                      <img t-att-src="value" style="max-width:100%; max-height:100%; object-fit:contain;"/>
                 </t>
                 <t t-else="">
-                     <span class="o_placeholder">
+                     <span class="o_placeholder" style="font-size:12px !important; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1;">
                         <t t-esc="placeholder"/>
                      </span>
                 </t>
@@ -21,13 +21,13 @@
     </t>
 
     <t t-name="sign.imageSignItem">
-         <div t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-data-id="id" t-att-style="style">
+         <div t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item" t-att-data-id="id" t-att-style="style" style="text-align:center; display:flex; align-items:center; justify-content:center;">
-            <div class="sign_item_body" style="text-align:center;">
+            <div class="sign_item_body">
                 <t t-if="value">
                     <img t-att-src="value" style="max-width:100%; max-height:100%; object-fit:contain;"/>
                 </t>
                 <t t-else="">
-                    <span class="o_placeholder">
+                    <span class="o_placeholder" style="font-size:12px !important; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1;">
                          <t t-esc="placeholder"/>
                     </span>
                 </t>