npm - react-email - Versions diffs - 4.0.0-alpha.7 → 4.0.0 - Mend

react-email 4.0.0-alpha.7 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/preview/.next/types/app/layout.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/release/packages/react-email/src/app/layout.tsx
 import * as entry from '../../../src/app/layout.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'

package/dist/preview/.next/types/app/page.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/page.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/release/packages/react-email/src/app/page.tsx
 import * as entry from '../../../src/app/page.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'

package/dist/preview/.next/types/app/preview/[...slug]/page.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/Resend/react-email.git/release/packages/react-email/src/app/preview/[...slug]/page.tsx
 import * as entry from '../../../../../src/app/preview/[...slug]/page.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"

package/src/actions/email-validation/check-compatibility.ts CHANGED Viewed

@@ -154,7 +154,11 @@ export const checkCompatibility = async (
         );
         if (Object.keys(compatibilityStats.perEmailClient).length === 0)
           continue;
-        if (compatibilityStats.status === 'success') continue;
+        if (
+          compatibilityStats.status === 'success' ||
+          compatibilityStats.status === 'warning'
+        )
+          continue;
         if (entry.category === 'html') {
           const entryElements = getElementNames(entry.title, entry.keywords);
@@ -274,8 +278,9 @@ export const checkCompatibility = async (
             if (cssEntryType === 'full property') {
               if (
-                property.name === entryFullProperty?.name &&
-                property.value === entryFullProperty.value
+                snakeToCamel(property.name) ===
+                  snakeToCamel(entryFullProperty!.name) &&
+                property.value === entryFullProperty!.value
               ) {
                 addToInsights(property);
                 break;
@@ -302,7 +307,8 @@ export const checkCompatibility = async (
               }
             } else if (
               entryProperties.some(
-                (propertyName) => property.name === propertyName,
+                (propertyName) =>
+                  snakeToCamel(property.name) === snakeToCamel(propertyName),
               )
             ) {
               addToInsights(property);
@@ -318,4 +324,10 @@ export const checkCompatibility = async (
   return readableStream;
 };
+const snakeToCamel = (snakeStr: string) => {
+  return snakeStr
+    .toLowerCase()
+    .replace(/-+([a-z])/g, (_match, letter) => letter.toUpperCase());
+};
 export type AST = ReturnType<typeof parse>;

package/src/app/layout.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       className={`${inter.variable} ${sfMono.variable} font-sans`}
       lang="en"
     >
-      <body className="relative flex h-screen flex-col overflow-x-hidden bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
+      <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
         <EmailsProvider
           initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
         >

package/src/app/page.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
-import { Shell, ShellContent } from '../components/shell';
+import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
@@ -12,8 +12,8 @@ const Home = () => {
   return (
     <Shell>
-      <ShellContent className="mx-auto flex max-w-lg items-center justify-center p-8">
-        <div className="-mt-10 relative flex flex-col items-center gap-3 text-center">
+      <div className="w-full h-full flex items-center justify-center p-8">
+        <div className="-mt-10 relative max-w-lg flex flex-col items-center gap-3 text-center">
           <Image
             alt="React Email Icon"
             className="mb-8"
@@ -38,7 +38,7 @@ const Home = () => {
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>
-      </ShellContent>
+      </div>
     </Shell>
   );
 };

package/src/app/preview/[...slug]/preview.tsx CHANGED Viewed

@@ -1,30 +1,31 @@
 'use client';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useRef } from 'react';
+import { use, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
 import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
-  ResizableWarpper,
+  ResizableWrapper,
   makeIframeDocumentBubbleEvents,
 } from '../../../components/resizable-wrapper';
 import { Send } from '../../../components/send';
-import { ShellContent } from '../../../components/shell';
+import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { cn } from '../../../utils';
 import { RenderingError } from './rendering-error';
-interface PreviewProps {
+interface PreviewProps extends React.ComponentProps<'div'> {
   emailTitle: string;
 }
-const Preview = ({ emailTitle }: PreviewProps) => {
+const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const { renderingResult, renderedEmailMetadata } = use(PreviewContext)!;
   const router = useRouter();
@@ -53,21 +54,21 @@ const Preview = ({ emailTitle }: PreviewProps) => {
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
-  const maxWidthRef = useRef(Number.POSITIVE_INFINITY);
-  const maxHeightRef = useRef(Number.POSITIVE_INFINITY);
-  const minWidth = 350;
-  const minHeight = 600;
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const minWidth = 100;
+  const minHeight = 100;
   const storedWidth = searchParams.get('width');
   const storedHeight = searchParams.get('height');
   const [width, setWidth] = useClampedState(
     storedWidth ? Number.parseInt(storedWidth) : 600,
-    350,
-    maxWidthRef.current,
+    minWidth,
+    maxWidth,
   );
   const [height, setHeight] = useClampedState(
     storedHeight ? Number.parseInt(storedHeight) : 1024,
-    600,
-    maxHeightRef.current,
+    minHeight,
+    maxHeight,
   );
   const handleSaveViewSize = useDebouncedCallback(() => {
@@ -77,6 +78,8 @@ const Preview = ({ emailTitle }: PreviewProps) => {
     router.push(`${pathname}?${params.toString()}${location.hash}`);
   }, 300);
+  const { toggled: toolbarToggled } = useToolbarState();
   return (
     <>
       <Topbar emailTitle={emailTitle}>
@@ -107,14 +110,20 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         ) : null}
       </Topbar>
-      <ShellContent
-        className="relative flex bg-gray-200"
+      <div
+        {...props}
+        className={cn(
+          'h-[calc(100%-3.5rem-2.375rem)] will-change-height flex p-4 transition-all duration-300',
+          activeView === 'preview' && 'bg-gray-200',
+          toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
+          className,
+        )}
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
             if (elementEntry) {
-              maxWidthRef.current = elementEntry.contentRect.width - 80;
-              maxHeightRef.current = elementEntry.contentRect.height - 80;
+              setMaxWidth(elementEntry.contentRect.width);
+              setMaxHeight(elementEntry.contentRect.height);
             }
           });
@@ -132,11 +141,11 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         {hasRenderingMetadata ? (
           <>
             {activeView === 'preview' && (
-              <ResizableWarpper
+              <ResizableWrapper
                 minHeight={minHeight}
                 minWidth={minWidth}
-                maxHeight={maxHeightRef.current}
-                maxWidth={maxWidthRef.current}
+                maxHeight={maxHeight}
+                maxWidth={maxWidth}
                 height={height}
                 onResizeEnd={() => {
                   handleSaveViewSize();
@@ -145,9 +154,9 @@ const Preview = ({ emailTitle }: PreviewProps) => {
                   const isHorizontal =
                     direction === 'east' || direction === 'west';
                   if (isHorizontal) {
-                    setWidth(value);
+                    setWidth(Math.round(value));
                   } else {
-                    setHeight(value);
+                    setHeight(Math.round(value));
                   }
                 }}
                 width={width}
@@ -166,12 +175,12 @@ const Preview = ({ emailTitle }: PreviewProps) => {
                   }}
                   title={emailTitle}
                 />
-              </ResizableWarpper>
+              </ResizableWrapper>
             )}
             {activeView === 'source' && (
-              <div className="h-full w-full bg-black">
-                <div className="m-auto flex max-w-3xl p-6">
+              <div className="h-full w-full">
+                <div className="m-auto h-full flex max-w-3xl p-6">
                   <Tooltip.Provider>
                     <CodeContainer
                       activeLang={activeLang}
@@ -199,7 +208,7 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         ) : null}
         <Toaster />
-      </ShellContent>
+      </div>
     </>
   );
 };

package/src/components/code-container.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   return (
     <div
-      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm"
+      className="relative max-h-[650px] w-full h-full whitespace-pre rounded-md border border-slate-6 text-sm"
       style={{
         lineHeight: '130%',
         background:
@@ -84,7 +84,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
           filename={`email.${activeMarkup.language}`}
         />
       </div>
-      <div>
+      <div className="h-[calc(100%-2.25rem)]">
         <Code language={activeLang}>{activeMarkup.content}</Code>
       </div>
     </div>

package/src/components/code.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import type { Language } from 'prism-react-renderer';
 import { Highlight } from 'prism-react-renderer';
-import { Fragment, useEffect } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
 import { cn } from '../utils';
@@ -73,12 +73,18 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
     return highlight[0] <= line && highlight[1] >= line;
   };
+  const scrollerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if (highlight) {
-      document.getElementById(`L${highlight[0]}`)?.scrollIntoView({
-        block: 'start',
-        behavior: 'smooth',
-      });
+    const scroller = scrollerRef.current;
+    if (highlight && scroller) {
+      const lineElement = scroller.querySelector(`#L${highlight[0]}`);
+      if (lineElement instanceof HTMLAnchorElement) {
+        scroller.scrollTo({
+          top: Math.max(lineElement.offsetTop - 325, 0),
+          behavior: 'smooth',
+        });
+      }
     }
   }, [highlight]);
@@ -97,7 +103,10 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-          <div className="flex h-[650px] p-4 max-h-[calc(100vh-10rem)] after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto">
+          <div
+            ref={scrollerRef}
+            className="flex max-h-[650px] h-full p-4 after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto"
+          >
             <div className="text-[#49494f] text-[13px] font-light font-[MonoLisa,_Menlo,_monospace]">
               {tokens.map((_, i) => (
                 <Link

package/src/components/resizable-wrapper.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { cn } from '../utils';
 type Direction = 'north' | 'south' | 'east' | 'west';
-type ResizableWarpperProps = {
+type ResizableWrapperProps = {
   width: number;
   height: number;
@@ -41,7 +41,7 @@ export const makeIframeDocumentBubbleEvents = (iframe: HTMLIFrameElement) => {
   };
 };
-export const ResizableWarpper = ({
+export const ResizableWrapper = ({
   width,
   height,
   onResize,
@@ -54,7 +54,7 @@ export const ResizableWarpper = ({
   minWidth,
   ...rest
-}: ResizableWarpperProps) => {
+}: ResizableWrapperProps) => {
   const resizableRef = useRef<HTMLElement>(null);
   const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);

package/src/components/shell.tsx CHANGED Viewed

@@ -62,36 +62,31 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
           </svg>
         </button>
       </div>
-      <div className="flex w-[100dvw] h-[100dvh] flex-row">
+      <div className="w-[100dvw] flex h-[calc(100dvh-4.375rem)] lg:h-[100dvh]">
         <React.Suspense>
           <Sidebar
-            className={cn('shrink [transition:width_0.2s_ease-in-out]', {
-              '-translate-x-full lg:translate-x-0': sidebarToggled,
-              'lg:w-0': !sidebarToggled,
-            })}
+            className={cn(
+              'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
+              'lg:static lg:inline-block lg:z-auto lg:max-h-full lg:w-[16rem]',
+              {
+                '-translate-x-full lg:translate-x-0': sidebarToggled,
+                'lg:w-0': !sidebarToggled,
+              },
+            )}
             currentEmailOpenSlug={currentEmailOpenSlug}
           />
         </React.Suspense>
         <main
           className={cn(
-            'h-full max-h-full min-h-full overflow-hidden will-change-width lg:mt-0',
-            'grow',
+            'inline-block relative overflow-hidden will-change-width',
+            'w-full h-full',
             '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
+            sidebarToggled && 'lg:w-[calc(100%-16rem)]',
           )}
         >
-          <div className="relative flex h-full w-full flex-col">{children}</div>
+          {children}
         </main>
       </div>
     </ShellContext.Provider>
   );
 };
-type ShellContentRootProps = React.ComponentProps<'div'>;
-export const ShellContent = ({ children, ...rest }: ShellContentRootProps) => {
-  return (
-    <div {...rest} className={cn('relative grow', rest.className)}>
-      {children}
-    </div>
-  );
-};

package/src/components/sidebar/file-tree-directory-children.tsx CHANGED Viewed

@@ -77,7 +77,7 @@ export const FileTreeDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'relative flex h-8 max-w-full items-center gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            'relative flex h-8 w-full items-center text-start gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
                             props.isRoot ? undefined : 'pl-3',
                             {
                               'text-cyan-11': isCurrentPage,
@@ -116,7 +116,9 @@ export const FileTreeDirectoryChildren = (props: {
                             height="20"
                             width="20"
                           />
-                          <span className="truncate">{emailFilename}</span>
+                          <span className="truncate w-[calc(100%-1.25rem)]">
+                            {emailFilename}
+                          </span>
                         </motion.span>
                       </Link>
                     );

package/src/components/sidebar/file-tree-directory.tsx CHANGED Viewed

@@ -51,31 +51,31 @@ export const FileTreeDirectory = ({
     >
       <Collapsible.Trigger
         className={cn(
-          'mt-1 mb-1.5 flex w-full items-center justify-between gap-2 font-medium text-[14px]',
+          'mt-1 mb-1.5 flex w-full items-center text-start justify-between gap-2 font-medium text-[14px]',
           {
             'cursor-pointer': !isEmpty,
           },
         )}
       >
-        <div className="flex items-center gap-2 text-slate-11 transition duration-200 ease-in-out hover:text-slate-12">
-          {open ? (
-            <IconFolderOpen height="20" width="20" />
-          ) : (
-            <IconFolder height="20" width="20" />
-          )}
-          <Heading
-            as="h3"
-            className="transition duration-200 ease-in-out hover:text-slate-12"
-            color="gray"
-            size="2"
-            weight="medium"
-          >
-            {directoryMetadata.directoryName}
-          </Heading>
-        </div>
+        {open ? (
+          <IconFolderOpen className="w-[20px]" height="20" width="20" />
+        ) : (
+          <IconFolder height="20" width="20" />
+        )}
+        <Heading
+          as="h3"
+          className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+          color="gray"
+          size="2"
+          weight="medium"
+        >
+          {directoryMetadata.directoryName}
+        </Heading>
         {!isEmpty ? (
           <IconArrowDown
-            className="justify-self-end opacity-60 transition-transform data-[open=true]:rotate-180"
+            width="20"
+            height="20"
+            className="ml-auto opacity-60 transition-transform data-[open=true]:rotate-180"
             data-open={open}
           />
         ) : null}

package/src/components/sidebar/file-tree.tsx CHANGED Viewed

@@ -13,8 +13,8 @@ export const FileTree = ({
   emailsDirectoryMetadata,
 }: FileTreeProps) => {
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem]">
-      <nav className="flex w-full flex-grow flex-col overflow-y-auto p-4 pr-0 pl-0">
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-[14.5rem]">
+      <nav className="flex flex-grow flex-col p-4 pr-0 pl-0">
         <Collapsible.Root open>
           <React.Suspense>
             <FileTreeDirectoryChildren

package/src/components/sidebar/sidebar.tsx CHANGED Viewed

@@ -16,28 +16,26 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-ful overflow-hidden bg-black will-change-auto',
+        'overflow-hidden bg-black',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}
     >
-      <div className="w-full h-full overflow-y-auto overflow-x-hidden">
-        <div className="flex w-full h-full flex-col border-slate-6 border-r">
-          <div
-            className={clsx(
-              'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
-            )}
-          >
-            <h2>
-              <Logo />
-            </h2>
-          </div>
-          <div className="relative h-full w-full border-slate-4 border-t px-4 pb-3">
-            <FileTree
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              emailsDirectoryMetadata={emailsDirectoryMetadata}
-            />
-          </div>
+      <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
+        <div
+          className={clsx(
+            'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
+          )}
+        >
+          <h2>
+            <Logo />
+          </h2>
+        </div>
+        <div className="relative grow w-full h-full overflow-y-auto overflow-x-hidden border-slate-4 border-t px-4 pb-3">
+          <FileTree
+            currentEmailOpenSlug={currentEmailOpenSlug}
+            emailsDirectoryMetadata={emailsDirectoryMetadata}
+          />
         </div>
       </div>
     </aside>

package/src/components/toolbar/linter.tsx CHANGED Viewed

@@ -92,6 +92,22 @@ export const Linter = ({ rows }: LinterProps) => {
           const failingCheck = row.result.checks.find(
             (check) => check.passed === false,
           )!;
+          const metadata: React.ReactNode[] = [];
+          for (const check of row.result.checks) {
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
+          }
+          metadata.push(
+            <CodePreviewLineLink
+              line={row.result.codeLocation.line}
+              column={row.result.codeLocation.column}
+              type="html"
+            />,
+          );
           return (
             <Result status={row.result.status} key={i}>
               <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
@@ -102,20 +118,14 @@ export const Linter = ({ rows }: LinterProps) => {
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    There was a redirect, the content may have been moved
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the content may have been moved'
+                  : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    The link is broken
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The link is broken'
+                  : null}
                 {failingCheck.type === 'syntax'
                   ? 'The link is broken due to invalid syntax'
                   : null}
@@ -124,15 +134,7 @@ export const Linter = ({ rows }: LinterProps) => {
                   {row.result.link}
                 </span>
               </Result.Description>
-              <Result.Metadata>
-                {[
-                  <CodePreviewLineLink
-                    line={row.result.codeLocation.line}
-                    column={row.result.codeLocation.column}
-                    type="html"
-                  />,
-                ]}
-              </Result.Metadata>
+              <Result.Metadata>{metadata}</Result.Metadata>
             </Result>
           );
         }
@@ -146,6 +148,12 @@ export const Linter = ({ rows }: LinterProps) => {
             if (check.type === 'image_size' && check.metadata.byteCount) {
               metadata.push(prettyBytes(check.metadata.byteCount));
             }
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
           }
           metadata.push(
             <CodePreviewLineLink
@@ -164,20 +172,14 @@ export const Linter = ({ rows }: LinterProps) => {
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    There was a redirect, the image may have been moved
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the image may have been moved'
+                  : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    The image is broken
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The image is broken'
+                  : null}
                 {failingCheck.type === 'syntax'
                   ? 'The image is broken due to an invalid source'
                   : null}