Fixed story link preview tooltip fonts and avoid scaling them as the story scales

stylesheets/components/TextAttachment.scss

@@ -165,11 +165,12 @@
       border-radius: 12px;
       color: $color-white;
       display: flex;
-      font-size: 30px;
+      font-size: 13px;
+      font-weight: 400;
       justify-content: center;
-      line-height: 32px;
+      line-height: 18px;
       max-width: 656px;
-      padding: 24px 32px;
+      padding: 12px;
       position: absolute;
       text-decoration: none;
       z-index: $z-index-above-base;
@@ -185,6 +186,11 @@
         top: 100%;
       }
 
+      &__title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+
       &__url {
         margin-top: 4px;
         max-width: 566px;

ts/components/TextAttachment.tsx

@@ -139,7 +139,10 @@ export const TextAttachment = ({
 
   return (
     <Measure bounds>
-      {({ contentRect, measureRef }) => (
+      {({ contentRect, measureRef }) => {
+        const scaleFactor = (contentRect.bounds?.height || 1) / 1280;
+
+        return (
           // eslint-disable-next-line jsx-a11y/no-static-element-interactions
           <div
             className="TextAttachment"
@@ -157,11 +160,39 @@ export const TextAttachment = ({
             ref={measureRef}
             style={isThumbnail ? storyBackgroundColor : undefined}
           >
+            {/* 
+            The tooltip must be outside of the scaled area, as it should not scale with 
+            the story, but it must be positioned using the scaled offset
+            */}
+            {textAttachment.preview &&
+              textAttachment.preview.url &&
+              linkPreviewOffsetTop &&
+              !isThumbnail && (
+                <a
+                  className="TextAttachment__preview__tooltip"
+                  href={textAttachment.preview.url}
+                  rel="noreferrer"
+                  style={{
+                    top: linkPreviewOffsetTop * scaleFactor - 89, // minus height of tooltip and some spacing
+                  }}
+                  target="_blank"
+                >
+                  <div>
+                    <div className="TextAttachment__preview__tooltip__title">
+                      {i18n('TextAttachment__preview__link')}
+                    </div>
+                    <div className="TextAttachment__preview__tooltip__url">
+                      {textAttachment.preview.url}
+                    </div>
+                  </div>
+                  <div className="TextAttachment__preview__tooltip__arrow" />
+                </a>
+              )}
             <div
               className="TextAttachment__story"
               style={{
                 ...(isThumbnail ? {} : storyBackgroundColor),
-              transform: `scale(${(contentRect.bounds?.height || 1) / 1280})`,
+                transform: `scale(${scaleFactor})`,
               }}
             >
               {(textContent || onChange) && (
@@ -212,25 +243,6 @@ export const TextAttachment = ({
               )}
               {textAttachment.preview && textAttachment.preview.url && (
                 <>
-                {linkPreviewOffsetTop && !isThumbnail && (
-                  <a
-                    className="TextAttachment__preview__tooltip"
-                    href={textAttachment.preview.url}
-                    rel="noreferrer"
-                    style={{
-                      top: linkPreviewOffsetTop - 150,
-                    }}
-                    target="_blank"
-                  >
-                    <div>
-                      <div>{i18n('TextAttachment__preview__link')}</div>
-                      <div className="TextAttachment__preview__tooltip__url">
-                        {textAttachment.preview.url}
-                      </div>
-                    </div>
-                    <div className="TextAttachment__preview__tooltip__arrow" />
-                  </a>
-                )}
                   <div
                     className={classNames('TextAttachment__preview-container', {
                       'TextAttachment__preview-container--large': Boolean(
@@ -240,19 +252,25 @@ export const TextAttachment = ({
                     ref={linkPreview}
                     onFocus={() => {
                       if (!disableLinkPreviewPopup) {
-                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+                        setLinkPreviewOffsetTop(
+                          linkPreview?.current?.offsetTop
+                        );
                       }
                     }}
                     onMouseOver={() => {
                       if (!disableLinkPreviewPopup) {
-                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+                        setLinkPreviewOffsetTop(
+                          linkPreview?.current?.offsetTop
+                        );
                       }
                     }}
                   >
                     {onRemoveLinkPreview && (
                       <div className="TextAttachment__preview__remove">
                         <button
-                        aria-label={i18n('Keyboard--remove-draft-link-preview')}
+                          aria-label={i18n(
+                            'Keyboard--remove-draft-link-preview'
+                          )}
                           type="button"
                           onClick={onRemoveLinkPreview}
                         />
@@ -272,7 +290,8 @@ export const TextAttachment = ({
               )}
             </div>
           </div>
-      )}
+        );
+      }}
     </Measure>
   );
 };