[FIX] mail: small image attachment preview too small for its box

In the chatter, the attachment preview image size is fixed with 160*160
but the actual preview area is 200*200px so the image is not filling correctly.
It appears padding around the image, especially visible when hovering it.

So with this commit, We should make sure to use a properly sized image in the
preview. we have to also provide the perfect resolution and preview for
the small images without upscaling incorrectly. For large images, it should be
display based on the aspect ratio.

Task : 2483885

closes #69755

X-original-commit: 08f152b
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

addons/mail/static/src/components/attachment/attachment.js

@@ -91,10 +91,18 @@ class Attachment extends Component {
         if (this.detailsMode === 'card') {
             size = '38x38';
         } else {
-            size = '160x160';
+            // The size of background-image depends on the props.imageSize
+            // to sync with width and height of `.o_Attachment_image`.
+            if (this.props.imageSize === "large") {
+                size = '400x400';
+            } else if (this.props.imageSize === "medium") {
+                size = '200x200';
+            } else if (this.props.imageSize === "small") {
+                size = '100x100';
+            }
         }
         // background-size set to override value from `o_image` which makes small image stretched
-        return `background-image:url(/web/image/${this.attachment.id}/${size}/?crop=true); background-size: auto;`;
+        return `background-image:url(/web/image/${this.attachment.id}/${size}); background-size: auto;`;
     }
 
     //--------------------------------------------------------------------------

addons/mail/static/src/components/attachment/attachment.scss

@@ -71,7 +71,8 @@
 
     &.o-details-overlay {
         position: relative;
-
+        // small, medium and large size styles should be sync with
+        // the size of the background-image and `.o_Attachment_image`.
         &.o-small {
             min-width: 100px;
             min-height: 100px;

addons/mail/static/src/components/attachment/attachment_tests.js

@@ -106,8 +106,8 @@ QUnit.test('simplest layout + deletable', async function (assert) {
         async mockRPC(route, args) {
             if (route.includes('web/image/750')) {
                 assert.ok(
-                    route.includes('/160x160'),
-                    "should fetch image with 160x160 pixels ratio");
+                    route.includes('/200x200'),
+                    "should fetch image with 200x200 pixels ratio");
                 assert.step('fetch_image');
             }
             return this._super(...arguments);