Fixed collapsed URL preview incorrect aspect ratio for chromium (#34382)

* fixed collpased url preview logo aspect ratio for chrome because chromium doesnt understand that aspect ratio means aspect ratio

* updated pngs

* update snapshot

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css

@@ -29,13 +29,19 @@ button.preview {
     }
 
     .preview {
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        border-radius: 8px;
-        border: none;
         flex-shrink: 0;
         aspect-ratio: 1;
+        height: 2.7em;
+
+        button {
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            border-radius: 8px;
+            border: none;
+            height: 100%;
+            aspect-ratio: 1;
+        }
     }
 
     .siteName span {

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx

@@ -110,15 +110,16 @@ export function LinkPreviewCollapsed(preview: LinkPreviewProps): JSX.Element {
 
     if (preview.image && !preview.image.playable) {
         img = (
-            <button
+            <div className={styles.preview}>
-                type="button"
+                <button
-                style={{
+                    type="button"
-                    backgroundImage: `url('${preview.image.imageThumb}')`,
+                    style={{
-                }}
+                        backgroundImage: `url('${preview.image.imageThumb}')`,
-                className={styles.preview}
+                    }}
-                onClick={createImageClickHandler(preview)}
+                    onClick={createImageClickHandler(preview)}
-                aria-label={_t("timeline|url_preview|view_image")}
+                    aria-label={_t("timeline|url_preview|view_image")}
-            />
+                />
+            </div>
         );
     }
 

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap

@@ -156,12 +156,15 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
       <div
         class="LinkPreview-module_containerCollapsed"
       >
-        <button
+        <div
-          aria-label="View image"
           class="LinkPreview-module_preview"
-          style="background-image: url("/static/tallImage.png");"
+        >
-          type="button"
+          <button
-        />
+            aria-label="View image"
+            style="background-image: url("/static/tallImage.png");"
+            type="button"
+          />
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -187,12 +190,15 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
       <div
         class="LinkPreview-module_containerCollapsed"
       >
-        <button
+        <div
-          aria-label="View image"
           class="LinkPreview-module_preview"
-          style="background-image: url("/static/element.png");"
+        >
-          type="button"
+          <button
-        />
+            aria-label="View image"
+            style="background-image: url("/static/element.png");"
+            type="button"
+          />
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -394,12 +400,15 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
       <div
         class="LinkPreview-module_containerCollapsed"
       >
-        <button
+        <div
-          aria-label="View image"
           class="LinkPreview-module_preview"
-          style="background-image: url("/static/tallImage.png");"
+        >
-          type="button"
+          <button
-        />
+            aria-label="View image"
+            style="background-image: url("/static/tallImage.png");"
+            type="button"
+          />
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -425,12 +434,15 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
       <div
         class="LinkPreview-module_containerCollapsed"
       >
-        <button
+        <div
-          aria-label="View image"
           class="LinkPreview-module_preview"
-          style="background-image: url("/static/element.png");"
+        >
-          type="button"
+          <button
-        />
+            aria-label="View image"
+            style="background-image: url("/static/element.png");"
+            type="button"
+          />
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >