Link preview UI improvements

stylesheets/components/CompositionInput.scss

@@ -108,6 +108,7 @@
       &--link-preview {
         min-height: 110px;
         max-height: 200px;
+        padding-top: 0;
       }
     }
 
@@ -203,7 +204,8 @@ div.CompositionInput__link-preview {
   border-radius: 8px;
   flex-direction: row-reverse;
   justify-content: space-between;
-  margin-bottom: 4px;
+  margin: 6px;
+  min-height: 74px;
   overflow: hidden;
 
   @include dark-theme {
@@ -223,6 +225,10 @@ div.CompositionInput__link-preview {
     padding-left: 12px;
     padding-top: 8px;
   }
+
+  &__no-image {
+    margin-right: 0;
+  }
 }
 
 button.CompositionInput__link-preview__close-button {

ts/components/CompositionInput.tsx

@@ -695,6 +695,14 @@ export function CompositionInput(props: Props): React.ReactElement {
             ref={ref}
             data-testid="CompositionInput"
           >
+            {conversationId && linkPreviewLoading && linkPreviewResult && (
+              <StagedLinkPreview
+                {...linkPreviewResult}
+                moduleClassName="CompositionInput__link-preview"
+                i18n={i18n}
+                onClose={() => onCloseLinkPreview?.(conversationId)}
+              />
+            )}
             {children}
             <div
               ref={
@@ -706,21 +714,13 @@ export function CompositionInput(props: Props): React.ReactElement {
               onScroll={onScroll}
               className={classNames(
                 getClassName('__input__scroller'),
-                linkPreviewResult
+                !large && linkPreviewResult
                   ? getClassName('__input__scroller--link-preview')
                   : null,
                 large ? getClassName('__input__scroller--large') : null,
                 children ? getClassName('__input--with-children') : null
               )}
             >
-              {conversationId && linkPreviewLoading && linkPreviewResult && (
-                <StagedLinkPreview
-                  {...linkPreviewResult}
-                  moduleClassName="CompositionInput__link-preview"
-                  i18n={i18n}
-                  onClose={() => onCloseLinkPreview?.(conversationId)}
-                />
-              )}
               {reactQuill}
               {emojiCompletionElement}
               {mentionCompletionElement}

ts/state/ducks/conversations.ts

@@ -134,10 +134,7 @@ import { isNotNil } from '../../util/isNotNil';
 import { PanelType } from '../../types/Panels';
 import { startConversation } from '../../util/startConversation';
 import { UUIDKind } from '../../types/UUID';
-import {
-  removeLinkPreview,
-  suspendLinkPreviews,
-} from '../../services/LinkPreview';
+import { removeLinkPreview } from '../../services/LinkPreview';
 import type {
   ReplaceAttachmentsActionType,
   SetFocusActionType,
@@ -3670,7 +3667,6 @@ function onConversationClosed(
     }
 
     removeLinkPreview(conversationId);
-    suspendLinkPreviews();
 
     dispatch({
       type: CONVERSATION_UNLOADED,