From 4c852710f1f71ca88afb0c32fee22bf98f9ec6cf Mon Sep 17 00:00:00 2001
From: fpasquet <fab.pasquet@gmail.com>
Date: Tue, 5 Mar 2024 14:15:41 +0100
Subject: [PATCH] fix: feedback ui (#70)

---
 src/components/Atoms/Picture/Picture.tsx      | 13 +++++++++
 src/components/Atoms/Picture/index.ts         |  1 +
 src/components/Atoms/index.ts                 |  1 +
 .../CategoryIntroBlock/CategoryIntroBlock.tsx |  4 +--
 .../Blocks/HomeIntroBlock/HomeIntroBlock.scss | 23 ++++++++++-----
 .../Blocks/HomeIntroBlock/HomeIntroBlock.tsx  | 21 +++++++-------
 .../Cards/NewsletterCard/NewsletterCard.tsx   |  2 +-
 .../Molecules/Cards/PostCard/PostCard.scss    |  1 +
 .../Cards/PostCard/PostCard.stories.tsx       |  6 ++--
 .../Molecules/Cards/PostCard/PostCard.tsx     | 14 ++++-----
 .../Molecules/SearchField/SearchField.scss    |  2 +-
 .../SearchField/SearchField.stories.tsx       |  2 +-
 .../Molecules/SearchField/SearchField.tsx     |  1 -
 .../Autocomplete/Autocomplete.stories.ts      |  2 +-
 .../LastArticlesBlock/LastArticlesBlock.tsx   |  8 +----
 .../LastTutorialsBlock/LastTutorialsBlock.tsx |  3 +-
 src/components/Organisms/Header/Header.scss   |  1 +
 .../typography/heading.desktop.tokens.json    | 13 ++++++---
 .../typography/heading.tokens.json            | 29 +++++++++++++------
 src/designTokens/typography/text.tokens.json  |  2 +-
 src/designTokens/width.tokens.json            |  3 --
 src/pages/HomePage/HomePage.tsx               |  6 ++--
 src/pages/PostPage/PostPage.stories.tsx       |  6 ++--
 src/pages/PostPage/PostPage.tsx               | 10 +++----
 src/styles/_base.scss                         |  5 ++++
 .../LayoutContentWithSidebar.tsx              |  1 -
 26 files changed, 110 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Atoms/Picture/Picture.tsx
 create mode 100644 src/components/Atoms/Picture/index.ts

diff --git a/src/components/Atoms/Picture/Picture.tsx b/src/components/Atoms/Picture/Picture.tsx
new file mode 100644
index 00000000..3e05ff37
--- /dev/null
+++ b/src/components/Atoms/Picture/Picture.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface PictureProps {
+  img: React.ComponentPropsWithoutRef<'img'>;
+  sources?: React.ComponentPropsWithoutRef<'source'>[];
+}
+
+export const Picture: React.FC<PictureProps> = ({ img, sources }) => (
+  <picture>
+    {sources?.map((source, key) => <source key={key} {...source} />)}
+    <img {...img} alt={img.alt} />
+  </picture>
+);
diff --git a/src/components/Atoms/Picture/index.ts b/src/components/Atoms/Picture/index.ts
new file mode 100644
index 00000000..7d50baff
--- /dev/null
+++ b/src/components/Atoms/Picture/index.ts
@@ -0,0 +1 @@
+export * from './Picture';
diff --git a/src/components/Atoms/index.ts b/src/components/Atoms/index.ts
index 0a65a64e..be273c19 100644
--- a/src/components/Atoms/index.ts
+++ b/src/components/Atoms/index.ts
@@ -10,3 +10,4 @@ export * from './Divider';
 export * from './BurgerButton';
 export * from './CloseButton';
 export * from './Breadcrumb';
+export * from './Picture';
diff --git a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
index aeae673a..d52b87b5 100644
--- a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
+++ b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
@@ -20,9 +20,9 @@ export const CategoryIntroBlock: React.FC<CategoryIntroBlockProps> = ({ title, d
       px={{ xs: 'l', md: '0' }}
       className="category-intro-block__container"
     >
-      <Box width="content-container" pt="m" pb="xxl">
+      <Box pt="m" pb="xxl">
         <Breadcrumb {...breadcrumb} />
-        <Heading mt="xl" size="xl">
+        <Heading size="xl" mt="xl">
           {title}
         </Heading>
         <Text mt="l">{description}</Text>
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.scss b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.scss
index 00956d7c..59401de5 100644
--- a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.scss
+++ b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.scss
@@ -3,14 +3,23 @@
 .home-intro-block {
   background-color: white;
 
-  @include create-media-queries('md') {
-    background-image: url('/imgs/home-intro-block.png');
-    background-repeat: no-repeat;
-    background-position: top right;
-    background-size: auto 100%;
+  &__container {
+    @include create-media-queries('md', 'max') {
+      max-width: 90vw;
+      margin: #{map-get-strict($token-variables, 'spacing', 'xl')} auto;
+    }
+
+    @include create-media-queries('md', 'min') {
+      margin-left: 5vw;
+    }
   }
 
-  &__container {
-    max-width: 724px;
+  &__background {
+    @include create-media-queries('md') {
+      background-image: url('/imgs/home-intro-block.png');
+      background-repeat: no-repeat;
+      background-position: top right;
+      background-size: contain;
+    }
   }
 }
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
index 595c3535..e6cbd28b 100644
--- a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
+++ b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
@@ -1,12 +1,13 @@
+import classNames from 'classnames';
 import React from 'react';
 
-import type { BoxProps } from '@/components';
+import type { FlexProps } from '@/components';
 import { Box, Button, Flex, Heading, Text } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
 import './HomeIntroBlock.scss';
 
-export interface HomeIntroBlockProps extends BoxProps {
+export interface HomeIntroBlockProps extends FlexProps {
   intro: React.ReactNode;
   title: React.ReactNode;
   description: React.ReactNode;
@@ -20,25 +21,25 @@ export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
   elevenLabsLink: { label: elevelLabsLinkLabel, ...elevenLabsLink },
   ...props
 }) => (
-  <Box className="home-intro-block" {...props}>
+  <Flex {...props} className={classNames('home-intro-block', props.className)}>
     <Flex
       alignItems="baseline"
       flexDirection="column"
-      gap="l"
-      p="l"
-      ml={{ xs: '0', md: 'xxl' }}
       className="home-intro-block__container"
+      flex="1"
+      py={{ xs: '0', md: 'xl' }}
     >
       <Heading size="s" color="info" textTransform="uppercase">
         {intro}
       </Heading>
-      <Heading size="xl" color="primary">
+      <Heading size="xl" mt="m" color="primary">
         {title}
       </Heading>
-      <Text>{description}</Text>
-      <Button as="a" {...elevenLabsLink}>
+      <Text mt="l">{description}</Text>
+      <Button {...elevenLabsLink} as="a" mt="l">
         {elevelLabsLinkLabel}
       </Button>
     </Flex>
-  </Box>
+    <Box flex="1" className="home-intro-block__background" hiddenBelow="md" />
+  </Flex>
 );
diff --git a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
index 32fd84fc..b513643a 100644
--- a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
+++ b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
@@ -30,7 +30,7 @@ export const NewsletterCard: React.FC<NewsletterCardProps> = ({
     p="l"
     bg="primary"
     color="white"
-    className={classNames('newsletter-card', `newsletter-card--${variant}`)}
+    className={classNames('newsletter-card', `newsletter-card--${variant}`, props.className)}
   >
     <Box className="newsletter-card__intro">
       <Heading size="m" color="accent">
diff --git a/src/components/Molecules/Cards/PostCard/PostCard.scss b/src/components/Molecules/Cards/PostCard/PostCard.scss
index cc718bf1..e98cbc40 100644
--- a/src/components/Molecules/Cards/PostCard/PostCard.scss
+++ b/src/components/Molecules/Cards/PostCard/PostCard.scss
@@ -41,6 +41,7 @@
   border-radius: #{map-get-strict($token-variables, 'radius', 's')};
 
   #{$this}__cover {
+    width: 100%;
     object-fit: cover;
   }
 
diff --git a/src/components/Molecules/Cards/PostCard/PostCard.stories.tsx b/src/components/Molecules/Cards/PostCard/PostCard.stories.tsx
index 5e206584..38e82a61 100644
--- a/src/components/Molecules/Cards/PostCard/PostCard.stories.tsx
+++ b/src/components/Molecules/Cards/PostCard/PostCard.stories.tsx
@@ -20,8 +20,10 @@ Overview.args = {
   contentType: 'article',
   slug: 'slug',
   cover: {
-    src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
-    alt: 'cover',
+    img: {
+      src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
+      alt: 'cover',
+    },
   },
   title: `REX Studio : Intégration de composants React avec Varnish ESI dans un site No Code`,
   date: '09 fév. 2021',
diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx
index 9bde6c9d..adf57a7e 100644
--- a/src/components/Molecules/Cards/PostCard/PostCard.tsx
+++ b/src/components/Molecules/Cards/PostCard/PostCard.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import type { BoxProps } from '@/components';
-import { Box, Skeleton, Text } from '@/components';
+import type { BoxProps, PictureProps } from '@/components';
+import { Box, Heading, Picture, Skeleton, Text } from '@/components';
 import { PostMetadata } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
@@ -14,7 +14,7 @@ export type PostCardVariantType = (typeof postCardVariant)[number];
 export interface PostCardProps extends BoxProps {
   contentType?: 'article' | 'tutorial';
   variant?: PostCardVariantType;
-  cover?: ComponentPropsWithoutRef<'img'>;
+  cover?: PictureProps;
   slug?: string;
   title?: string;
   excerpt?: string;
@@ -29,7 +29,7 @@ export interface PostCardProps extends BoxProps {
 export const PostCard: React.FC<PostCardProps> = ({
   contentType,
   variant = 'side-image',
-  cover,
+  cover = {},
   title,
   excerpt,
   date,
@@ -42,7 +42,7 @@ export const PostCard: React.FC<PostCardProps> = ({
 }) => (
   <Box as="article" {...props} className={classNames('post-card', `post-card--${variant}`)}>
     <Skeleton isLoading={isLoading}>
-      <img className="post-card__cover" {...cover} alt={cover?.alt} />
+      <Picture {...cover} img={{ className: 'post-card__cover', ...cover?.img }} />
     </Skeleton>
     <Box
       my={{ xs: 's', md: 'm' }}
@@ -52,7 +52,7 @@ export const PostCard: React.FC<PostCardProps> = ({
       style={{ display: 'grid' }}
     >
       <Skeleton isLoading={isLoading}>
-        <Box as="h2" className="post-card__heading">
+        <Heading as="h2" size="xs" className="post-card__heading">
           <Text as="a" {...link} size="m" data-internal-link="post" className="post-card__link">
             {title}
           </Text>
@@ -69,7 +69,7 @@ export const PostCard: React.FC<PostCardProps> = ({
               {tutorialLabel}
             </Text>
           )}
-        </Box>
+        </Heading>
       </Skeleton>
       <PostMetadata
         variant="primary"
diff --git a/src/components/Molecules/SearchField/SearchField.scss b/src/components/Molecules/SearchField/SearchField.scss
index 66e3cde3..6ce70d75 100644
--- a/src/components/Molecules/SearchField/SearchField.scss
+++ b/src/components/Molecules/SearchField/SearchField.scss
@@ -8,7 +8,7 @@
 
   &__input {
     width: 100%;
-    padding: #{map-get-strict($token-variables, 'spacing', 'xs')} calc(#{map-get-strict($token-variables, 'spacing', 'xxl')} + #{map-get-strict($token-variables, 'spacing', 'm')}) #{map-get-strict($token-variables, 'spacing', 'xs')} #{map-get-strict($token-variables, 'spacing', 'xs')};
+    padding: #{map-get-strict($token-variables, 'spacing', 'xs')} calc(#{map-get-strict($token-variables, 'spacing', 'xl')} + #{map-get-strict($token-variables, 'spacing', 'm')}) #{map-get-strict($token-variables, 'spacing', 'xs')} #{map-get-strict($token-variables, 'spacing', 'xs')};
     font-family: #{map-get-strict($token-variables, 'font-family', 'base')};
     font-size: var(--font-size-input, #{map-get-strict($token-variables, 'typography', 'text', 'xs', 'font-size')});
     line-height: #{map-get-strict($token-variables, 'line-height', 'large')};
diff --git a/src/components/Molecules/SearchField/SearchField.stories.tsx b/src/components/Molecules/SearchField/SearchField.stories.tsx
index b0952d65..7480a436 100644
--- a/src/components/Molecules/SearchField/SearchField.stories.tsx
+++ b/src/components/Molecules/SearchField/SearchField.stories.tsx
@@ -12,7 +12,7 @@ export default {
   },
   args: {
     input: {
-      placeholder: 'Rechercher par nom d’article ou d’auteur',
+      placeholder: 'Nom d’article, auteur ...',
     },
     buttonClose: {
       onClick: action('onClose'),
diff --git a/src/components/Molecules/SearchField/SearchField.tsx b/src/components/Molecules/SearchField/SearchField.tsx
index cabd02bf..b532f757 100644
--- a/src/components/Molecules/SearchField/SearchField.tsx
+++ b/src/components/Molecules/SearchField/SearchField.tsx
@@ -27,7 +27,6 @@ export const SearchField = polyRef<'div', SearchFieldProps>(
         {Boolean(input.value) && (
           <CloseButton {...buttonClose} variant="secondary" className="search-field__button-action" />
         )}
-        <Box className="search-field__separator-button" ml="xs" />
         <Box as="button" {...buttonSearch} className="search-field__button-action">
           <Icon name="search" color="primary" size="2.5rem" mx="xs" />
         </Box>
diff --git a/src/components/Organisms/Autocomplete/Autocomplete.stories.ts b/src/components/Organisms/Autocomplete/Autocomplete.stories.ts
index d2c558b6..bd6551e6 100644
--- a/src/components/Organisms/Autocomplete/Autocomplete.stories.ts
+++ b/src/components/Organisms/Autocomplete/Autocomplete.stories.ts
@@ -5,7 +5,7 @@ import { Autocomplete } from './Autocomplete';
 const meta: Meta<typeof Autocomplete> = {
   component: Autocomplete,
   args: {
-    placeholder: 'Rechercher par nom d’article ou d’auteur',
+    placeholder: 'Nom d’article, auteur ...',
     searchLink: {
       label: 'Voir tous les résultats',
       href: '#',
diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
index 4535f2a0..3957b7bc 100644
--- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
+++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
@@ -18,13 +18,7 @@ export const LastArticlesBlock: React.FC<LastArticlesBlockProps> = ({
   linkSeeMore: { label: labelLinkSeeMore, ...linkSeeMore },
   ...props
 }) => (
-  <Box
-    {...props}
-    my="xl"
-    mx={{ xs: 's', md: 'auto' }}
-    width={{ md: 'content-container' }}
-    className="last-articles-block"
-  >
+  <Box {...props} my="xl" mx={{ xs: 's', md: 'auto' }} className="last-articles-block container-content">
     <Heading size="m" color="primary">
       {title}
     </Heading>
diff --git a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
index 2d1711be..166c0669 100644
--- a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
+++ b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
@@ -33,8 +33,7 @@ export const LastTutorialsBlock: React.FC<LastTutorialsBlockProps> = ({
       py="xl"
       mx={{ xs: 's', md: 'auto' }}
       gap="xl"
-      width={{ md: 'content-container' }}
-      className="last-tutorials-block"
+      className="last-tutorials-block container-content"
     >
       <Box className="last-tutorials-block__content">
         <Heading size="m">{title}</Heading>
diff --git a/src/components/Organisms/Header/Header.scss b/src/components/Organisms/Header/Header.scss
index 8310710b..40fca3af 100644
--- a/src/components/Organisms/Header/Header.scss
+++ b/src/components/Organisms/Header/Header.scss
@@ -29,6 +29,7 @@
     color: #{map-get-strict($token-variables, 'color', 'info')};
     font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
     text-decoration: none;
+    align-self: center;
 
     &:hover {
       color: #{map-get-strict($token-variables, 'color', 'primary')};
diff --git a/src/designTokens/typography/heading.desktop.tokens.json b/src/designTokens/typography/heading.desktop.tokens.json
index ea6be47c..1a8e6b60 100644
--- a/src/designTokens/typography/heading.desktop.tokens.json
+++ b/src/designTokens/typography/heading.desktop.tokens.json
@@ -6,24 +6,29 @@
       }
     },
     "heading": {
+      "xs": {
+        "font-size": {
+          "value": "20px"
+        }
+      },
       "s": {
         "font-size": {
-          "value": "24px"
+          "value": "{typography.heading.xs.font-size} + 4"
         }
       },
       "m": {
         "font-size": {
-          "value": "{typography.heading.s.font-size.value} + 8"
+          "value": "{typography.heading.s.font-size} + 8"
         }
       },
       "l": {
         "font-size": {
-          "value": "{typography.heading.m.font-size.value} + 8"
+          "value": "{typography.heading.m.font-size} + 8"
         }
       },
       "xl": {
         "font-size": {
-          "value": "{typography.heading.m.font-size.value} * 2"
+          "value": "{typography.heading.m.font-size} * 2"
         },
         "letter-spacing": {
           "value": "3px"
diff --git a/src/designTokens/typography/heading.tokens.json b/src/designTokens/typography/heading.tokens.json
index 9df69a3c..e48390bc 100644
--- a/src/designTokens/typography/heading.tokens.json
+++ b/src/designTokens/typography/heading.tokens.json
@@ -3,13 +3,24 @@
     "heading": {
       "base": {
         "font-family": {
-          "value": "{font-family.heading.value}"
+          "value": "{font-family.heading}"
         },
         "line-height": {
-          "value": "{line-height.base.value}"
+          "value": "{line-height.base}"
         },
         "letter-spacing": {
-          "value": "1px"
+          "value": "0px"
+        }
+      },
+      "xs": {
+        "font-family": {
+          "value": "{font-family.base}"
+        },
+        "font-size": {
+          "value": "16px"
+        },
+        "font-weight": {
+          "value": "{font-weight.semi-bold}"
         }
       },
       "s": {
@@ -17,28 +28,28 @@
           "value": "16px"
         },
         "font-weight": {
-          "value": "{font-weight.bold.value}"
+          "value": "{font-weight.bold}"
         }
       },
       "m": {
         "font-size": {
-          "value": "{typography.heading.s.font-size.value} + 8"
+          "value": "{typography.heading.s.font-size} + 8"
         },
         "font-weight": {
-          "value": "{font-weight.bold.value}"
+          "value": "{font-weight.bold}"
         }
       },
       "l": {
         "font-size": {
-          "value": "{typography.heading.m.font-size.value} + 8"
+          "value": "{typography.heading.m.font-size} + 8"
         }
       },
       "xl": {
         "font-size": {
-          "value": "{typography.heading.l.font-size.value} + 8"
+          "value": "{typography.heading.l.font-size} + 8"
         },
         "font-weight": {
-          "value": "{font-weight.regular.value}"
+          "value": "{font-weight.regular}"
         },
         "text-transform": {
           "value": "uppercase"
diff --git a/src/designTokens/typography/text.tokens.json b/src/designTokens/typography/text.tokens.json
index aa29a656..8df68fdb 100644
--- a/src/designTokens/typography/text.tokens.json
+++ b/src/designTokens/typography/text.tokens.json
@@ -3,7 +3,7 @@
     "text": {
       "base": {
         "line-height": {
-          "value": "{line-height.base.value}"
+          "value": "{line-height.large}"
         }
       },
       "xs": {
diff --git a/src/designTokens/width.tokens.json b/src/designTokens/width.tokens.json
index 453d3e6d..b77231da 100644
--- a/src/designTokens/width.tokens.json
+++ b/src/designTokens/width.tokens.json
@@ -5,9 +5,6 @@
     },
     "screen": {
       "value": "100vw"
-    },
-    "content-container": {
-      "value": "90rem"
     }
   }
 }
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index f3b05269..40931098 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -22,11 +22,11 @@ export const HomePage: React.FC<HomePageProps> = ({
   newsletterCard,
 }) => (
   <>
-    <HomeIntroBlock py={{ xs: '0', md: 'xl' }} {...homeIntroBlock} />
+    <HomeIntroBlock {...homeIntroBlock} />
     <LastArticlesBlock {...lastArticlesBlock} />
     {lastTutorialsBlock && <LastTutorialsBlock {...lastTutorialsBlock} />}
-    <Box my="xl" mx={{ xs: 's', md: 'auto' }} width={{ md: 'content-container' }}>
-      <NewsletterCard variant="horizontal" {...newsletterCard} />
+    <Box my="xl" mx={{ xs: 's', md: 'auto' }}>
+      <NewsletterCard variant="horizontal" className="container-content" {...newsletterCard} />
     </Box>
   </>
 );
diff --git a/src/pages/PostPage/PostPage.stories.tsx b/src/pages/PostPage/PostPage.stories.tsx
index 775fe31d..fd8ac0c3 100644
--- a/src/pages/PostPage/PostPage.stories.tsx
+++ b/src/pages/PostPage/PostPage.stories.tsx
@@ -19,8 +19,10 @@ const meta: Meta<typeof PostPage> = {
     variant: 'article',
     breadcrumb: BreadcrumbStories.args as PostPageProps['breadcrumb'],
     cover: {
-      src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
-      alt: 'cover',
+      img: {
+        src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
+        alt: 'cover',
+      },
     },
     header: PostHeaderStories.args as PostPageProps['header'],
     children: (
diff --git a/src/pages/PostPage/PostPage.tsx b/src/pages/PostPage/PostPage.tsx
index eabf0060..970b4996 100644
--- a/src/pages/PostPage/PostPage.tsx
+++ b/src/pages/PostPage/PostPage.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Box, Breadcrumb, type BreadcrumbProps, SummaryCard } from '@/components';
+import type { PictureProps } from '@/components';
+import { Box, Breadcrumb, type BreadcrumbProps, Picture, SummaryCard } from '@/components';
 import { LayoutContentWithSidebar } from '@/templates/LayoutContentWithSidebar';
-import type { ComponentPropsWithoutRef } from '@/types';
 
 import './PostPage.scss';
 import { PostPageContent } from './PostPageContent';
@@ -11,7 +11,7 @@ import type { PostPageContentProps } from './PostPageContent';
 
 export interface PostPageProps extends PostPageContentProps {
   breadcrumb: BreadcrumbProps;
-  cover: ComponentPropsWithoutRef<'img'>;
+  cover: PictureProps;
 }
 
 export const PostPage: React.FC<PostPageProps> = ({
@@ -22,9 +22,9 @@ export const PostPage: React.FC<PostPageProps> = ({
   children,
   ...postPageContent
 }) => (
-  <Box mx="auto" width="content-container" className="post-page">
+  <Box mx="auto" className="post-page">
     <Breadcrumb {...breadcrumb} className="post-page__breadcrumb" />
-    <img className="post-page__cover" {...cover} alt={cover.alt} />
+    <Picture {...cover} img={{ className: 'post-page__cover', ...cover?.img }} />
     <LayoutContentWithSidebar
       content={
         <PostPageContent {...postPageContent} variant={variant} summary={summary}>
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index eb51ebbf..61189b86 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -5,3 +5,8 @@ body {
 button, [role="button"], [role="link"] {
   cursor: pointer;
 }
+
+.container-content {
+  margin: 0 auto;
+  max-width: 90vw;
+}
diff --git a/src/templates/LayoutContentWithSidebar/LayoutContentWithSidebar.tsx b/src/templates/LayoutContentWithSidebar/LayoutContentWithSidebar.tsx
index da2c83e6..9b4d8b77 100644
--- a/src/templates/LayoutContentWithSidebar/LayoutContentWithSidebar.tsx
+++ b/src/templates/LayoutContentWithSidebar/LayoutContentWithSidebar.tsx
@@ -25,7 +25,6 @@ export const LayoutContentWithSidebar: React.FC<LayoutContentWithSidebarProps> =
     gap="xl"
     my="xl"
     mx={{ xs: 's', md: 'auto' }}
-    width={{ md: 'content-container' }}
     className={classNames('layout-content-with-sidebar', className)}
   >
     <Flex flexDirection="column" as="main" flex="1" gap="xl" className="layout-content-with-sidebar__content">