From dcb717b79f1c9e82300321e483533b1aec533f26 Mon Sep 17 00:00:00 2001
From: Borghild <borghild.vikoyr@miles.no>
Date: Mon, 13 May 2024 14:53:03 +0200
Subject: [PATCH] :art: added small tweaks

---
 web/components/src/Fact/Content.tsx                         | 2 +-
 .../shared/portableText/components/news/Fact.tsx            | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/components/src/Fact/Content.tsx b/web/components/src/Fact/Content.tsx
index d99c4ab00..850cf3462 100644
--- a/web/components/src/Fact/Content.tsx
+++ b/web/components/src/Fact/Content.tsx
@@ -21,7 +21,7 @@ export const Content = ({
   ...rest
 }: ContentProps) => {
   const contentClassNames = `
-  ${!hasColumns && !hasImage ? 'px-layout-lg' : ''}
+  ${!hasColumns && !hasImage ? 'px-layout-lg max-w-viewport mx-auto' : ''}
   ${hasColumns && !hasImage ? 'px-layout-sm' : ''}
   ${
     hasImage
diff --git a/web/pageComponents/shared/portableText/components/news/Fact.tsx b/web/pageComponents/shared/portableText/components/news/Fact.tsx
index e978e423c..748297c92 100644
--- a/web/pageComponents/shared/portableText/components/news/Fact.tsx
+++ b/web/pageComponents/shared/portableText/components/news/Fact.tsx
@@ -1,5 +1,4 @@
 import { toPlainText } from '@portabletext/react'
-import Img from 'next/image'
 import { FactBox } from '@components'
 import type { FactImagePosition } from '@components'
 import type { PortableTextBlock } from '@portabletext/types'
@@ -7,6 +6,7 @@ import type { BackgroundColours, ImageWithAlt } from '../../../../../types/types
 import { urlFor } from '../../../../../common/helpers'
 import Blocks from '../../Blocks'
 import { Typography } from '@core/Typography'
+import Image from '../../../SanityImage'
 
 type FactboxProps = {
   title: string
@@ -51,7 +51,7 @@ export const Fact = (block: BlockProps) => {
     >
       {imageSrc && (
         <FactBox.Image imagePosition={imagePosition}>
-          <Img src={imageSrc} alt={image.alt ? image.alt : 'FactBox'} style={{ objectFit: 'cover' }} fill />
+          <Image image={image} fill />
         </FactBox.Image>
       )}
 
@@ -67,7 +67,7 @@ export const Fact = (block: BlockProps) => {
             {title}
           </Typography>
         )}
-        <FactBox.Text hasColumns={hasColumns}>
+        <FactBox.Text>
           <Blocks
             value={content}
             className={`prose ${hasColumns ? 'max-w-none lg:columns-2 lg:[column-gap:theme(spacing.24)]' : ''}`}