Web Page: Change photo preview position (#5308)

src/components/middle/message/WebPage.scss

@@ -72,6 +72,7 @@
   .WebPage--content {
     position: relative;
     margin-inline-start: 0.375rem;
+    margin-inline-end: 0.25rem;
 
     &.is-story {
       display: flex;
@@ -108,6 +109,7 @@
 
   .media-inner {
     margin: 0 !important;
+    margin-block: 0.25rem !important;
 
     &,
     & img,

src/components/middle/message/WebPage.tsx

@@ -194,6 +194,17 @@ const WebPage: FC<OwnProps> = ({
         {isStory && (
           <BaseStory story={story} isProtected={isProtected} isConnected={isConnected} isPreview />
         )}
+        {isArticle && (
+          <div className="WebPage-text">
+            <SafeLink className="site-name" url={url} text={siteName || displayUrl} />
+            {!inPreview && title && (
+              <p className="site-title">{renderText(title)}</p>
+            )}
+            {truncatedDescription && (
+              <p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
+            )}
+          </div>
+        )}
         {photo && !video && !document && (
           <Photo
             photo={photo}
@@ -212,17 +223,6 @@ const WebPage: FC<OwnProps> = ({
             onCancelUpload={onCancelMediaTransfer}
           />
         )}
-        {isArticle && (
-          <div className="WebPage-text">
-            <SafeLink className="site-name" url={url} text={siteName || displayUrl} />
-            {!inPreview && title && (
-              <p className="site-title">{renderText(title)}</p>
-            )}
-            {truncatedDescription && (
-              <p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
-            )}
-          </div>
-        )}
         {!inPreview && video && (
           <Video
             video={video}

src/components/middle/message/_message-content.scss

@@ -622,6 +622,20 @@
   }
 }
 
+.message-content:not(.web-page).media {
+  // Moved below `.has-subheader` to overwrite its styles
+  &.is-inverted-media.has-fact-check .media-inner:not(.file-preview),
+  &.is-inverted-media.has-fact-check .Album,
+  &.text:not(.is-inverted-media) .media-inner:not(.file-preview),
+  &.text:not(.is-inverted-media) .Album {
+    margin-bottom: 0.375rem !important;
+
+    body.is-ios .Message.own & {
+      margin-bottom: 0.375rem;
+    }
+  }
+}
+
 .message-content.media,
 .WebPage:not(.with-document) {
   .media-inner {
@@ -696,18 +710,6 @@
     margin-bottom: 0;
   }
 
-  // Moved below `.has-subheader` to overwrite its styles
-  &.is-inverted-media.has-fact-check .media-inner:not(.file-preview),
-  &.is-inverted-media.has-fact-check .Album,
-  &.text:not(.is-inverted-media) .media-inner:not(.file-preview),
-  &.text:not(.is-inverted-media) .Album {
-    margin-bottom: 0.375rem !important;
-
-    body.is-ios .Message.own & {
-      margin-bottom: 0.375rem;
-    }
-  }
-
   .media-loading {
     display: flex;
     align-items: center;