sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

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

* updated pngs

* update snapshot
This commit is contained in:
Sirius
2026-07-28 14:17:44 +00:00
committed by GitHub
parent df7924df02
commit 3d8a80271e
5 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 47 KiB

packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 47 KiB

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+11 -5
View File
@@ -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
+10 -9
View File
@@ -110,15 +110,16 @@ export function LinkPreviewCollapsed(preview: LinkPreviewProps): JSX.Element {
if (preview.image && !preview.image.playable) {
img = (
<button
type="button"
style={{
backgroundImage: `url('${preview.image.imageThumb}')`,
}}
className={styles.preview}
onClick={createImageClickHandler(preview)}
aria-label={_t("timeline|url_preview|view_image")}
/>
<div className={styles.preview}>
<button
type="button"
style={{
backgroundImage: `url('${preview.image.imageThumb}')`,
}}
onClick={createImageClickHandler(preview)}
aria-label={_t("timeline|url_preview|view_image")}
/>
</div>
);
}
packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
+32 -20
View File
@@ -156,12 +156,15 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
<div
class="LinkPreview-module_containerCollapsed"
>
<button
aria-label="View image"
<div
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
aria-label="View image"
<div
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
aria-label="View image"
<div
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
aria-label="View image"
<div
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"
>