From a26293d1e0c3d4be5ee7966ea74c6f74d694d5e6 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Fri, 22 Dec 2023 15:40:14 +0000
Subject: [PATCH 01/10] Add VideoSectionBlock props

---
 workspaces/cms-config/src/blocks.ts                | 14 ++++++++++++++
 workspaces/cms-data/src/pages.ts                   |  2 ++
 .../website/src/blocks/VideoSectionBlock.tsx       |  7 +++++--
 .../src/components/CategoryTabs/CategoryTabs.tsx   |  3 +++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts
index a985890f5e..7735dedaa7 100644
--- a/workspaces/cms-config/src/blocks.ts
+++ b/workspaces/cms-config/src/blocks.ts
@@ -692,6 +692,20 @@ export const blocks = [
     label: "Education video section",
     widget: "object",
     fields: [
+      {
+        label: "Chapter description full width",
+        name: "chapterDescriptionFullWidth",
+        widget: "boolean",
+        default: false,
+        required: false,
+      },
+      {
+        label: "Chapters playlist on bottom of video desktop",
+        name: "playlistOnBottom",
+        widget: "boolean",
+        default: true,
+        required: false,
+      },
       {
         crowdin: true,
         label: 'Chapter 1',
diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
index 642022439e..3efe2ab66d 100644
--- a/workspaces/cms-data/src/pages.ts
+++ b/workspaces/cms-data/src/pages.ts
@@ -158,6 +158,8 @@ export interface VideoSectionBlock {
   readonly sequencer: ChapterInfo;
   readonly prover: ChapterInfo;
   readonly 'eth-settlement': ChapterInfo;
+  readonly chapterDescriptionFullWidth: boolean;
+  readonly playlistOnBottom: boolean;
 }
 
 export interface NewsletterBlock {
diff --git a/workspaces/website/src/blocks/VideoSectionBlock.tsx b/workspaces/website/src/blocks/VideoSectionBlock.tsx
index f429631ea6..116dad237c 100644
--- a/workspaces/website/src/blocks/VideoSectionBlock.tsx
+++ b/workspaces/website/src/blocks/VideoSectionBlock.tsx
@@ -26,6 +26,8 @@ type ChapterType = Chapter & ChapterInfo;
  */
 
 export default function VideoSectionBlock(props: VideoSectionProps) {
+  const { playlistOnBottom, chapterDescriptionFullWidth } = props;
+
   const normalizedPlaylist = useMemo(() => {
     return playlist.map((chapter) => {
       const chapterInfo = props[chapter.id as keyof VideoSectionProps] as ChapterInfo;
@@ -55,7 +57,7 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
         onChapterChange={(id) => 
           setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
         }
-        playlistOnBottom
+        playlistOnBottom={playlistOnBottom}
       />
 
       <Box mt="md">
@@ -68,10 +70,11 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
             id: p.id,
             label: p.subtitle,
           }))}
+          playlistOnBottom={playlistOnBottom}
         />
 
         <Box
-          maxW="656px"
+          maxW={chapterDescriptionFullWidth ? "100%" : "656px"}
           marginInline="auto"
           marginTop={'32px'}
         >
diff --git a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
index 8c7742c31a..27413401d7 100644
--- a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
+++ b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
@@ -24,6 +24,7 @@ export type CategoryTabsProps = {
   items: CategoryTabItem[];
   activeItemId: string;
   onTabClick?: (id: string) => void;
+  playlistOnBottom: boolean;
 };
 
 /**
@@ -34,12 +35,14 @@ export const CategoryTabs = ({
   items,
   activeItemId,
   onTabClick,
+  playlistOnBottom,
 }: CategoryTabsProps) => {
   return (
     <Box
       borderTopWidth="1px"
       borderBottomWidth="1px"
       borderColor="border.divider"
+      marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}
       width="100%"
     >
       <Flex

From 7d03eca008d6fc52043122afcb5fee6c0fbacc77 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Fri, 22 Dec 2023 15:41:21 +0000
Subject: [PATCH 02/10] Update what is starknet page data

---
 _data/pages/what-is-starknet.yml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/_data/pages/what-is-starknet.yml b/_data/pages/what-is-starknet.yml
index a5edef05b2..0f9d4ae4bf 100644
--- a/_data/pages/what-is-starknet.yml
+++ b/_data/pages/what-is-starknet.yml
@@ -5,8 +5,9 @@ page_last_updated: true
 blocks:
   - type: page_header
     title: "What is Starknet? "
+    description: ""
   - type: markdown
-    body: >
+    body: >-
       Starknet is a Validity-Rollup (aka ZK-Rollup) Layer 2 network that
       operates on top of Ethereum, enabling dApps to massively scale without
       compromising on security.
@@ -61,6 +62,8 @@ blocks:
         The Core contract verifies the proof's authenticity and confirms receiving the State Diff, subsequently updating the Starknet state on the Ethereum blockchain. This updated state is then added to an Ethereum block, distributed across the node network for validation and voting. When the block accumulates sufficient votes, it achieves "finalized" status, cementing its place as an immutable part of Ethereum.
       title: Secure Settlement on Ethereum
       description: Chapter 4 explains how to secure settlement on Ethereum
+    chapterDescriptionFullWidth: true
+    playlistOnBottom: false
   - type: link_list
     heading: Further reading
     listSize: lg

From b1e168b586842f57d01491800c01ac76981cc86a Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Fri, 22 Dec 2023 15:40:51 +0000
Subject: [PATCH 03/10] Add VideoSectionBlock new style

---
 .../components/CategoryTabs/CategoryTabs.tsx  |  4 +-
 .../player-core/VideoPlayerCore.tsx           | 13 ++-
 .../player-core/control-bar/CustomControl.tsx |  2 +
 .../player-website/BottomPlaylist.tsx         |  6 +-
 .../player-website/ChaptersPlaylist.tsx       | 79 +++++++++++--------
 .../player-website/VideoPlayerWebsite.tsx     |  2 +-
 6 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
index 27413401d7..21c497bd03 100644
--- a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
+++ b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
@@ -52,9 +52,9 @@ export const CategoryTabs = ({
         width="100%"
         padding={'0 24px'}
       >
-        {items.map((item) => {
+        {items.map((item, index) => {
           return (
-            <Box>
+            <Box key={item.label + index}>
               <Button
                 as={item.link ? "a" : "button"}
                 href={item.link}
diff --git a/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx b/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
index f79204c09e..e41ee67292 100644
--- a/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx
@@ -26,6 +26,7 @@ import { isFinalChapter } from "./utils";
 import "./player-overrides.css";
 import { FinalChapterLeftCTA } from "./chapter-cta/FinalChapterLeftCTA";
 import { FinalChapterRightCTA } from "./chapter-cta/FinalChapterRightCTA";
+import { Box } from "@chakra-ui/react";
 
 export type PlayerRef = React.MutableRefObject<Player | null>;
 
@@ -231,7 +232,15 @@ export function VideoPlayerCore({
     totalDuration - currentTime < 5;
 
   return (
-    <div style={videoWrapperStyle} ref={videoWrapperRef}>
+    <Box
+      sx={{
+        ".video-js, .video-js .vjs-tech, .vjs-poster img": {
+          borderRadius: "8px",
+        },
+      }} 
+      style={videoWrapperStyle} 
+      ref={videoWrapperRef}
+    >
       <div style={videoPositionStyle} onClick={onPlayToggle}>
         <VideoJS
           options={videojsOptions}
@@ -308,6 +317,6 @@ export function VideoPlayerCore({
           onShare={onShareModalOpen}
         />
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx b/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
index 1eb929d9a7..3a1136e7bd 100644
--- a/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx
@@ -109,6 +109,8 @@ export default function CustomControl(props: CustomControlProps) {
           bg: "rgba(0, 0, 0, .75)",
           backdropBlur: "sm",
           alignItems: "center",
+          borderBottomLeftRadius: "8px",
+          borderBottomRightRadius: "8px",
         }}
       >
         <PlayButton playingStatus={playingStatus} handlePlay={onPlayToggle} />
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
index fc475babe2..6ec6d981e0 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx
@@ -5,7 +5,6 @@
 
 import { Box, Image } from "@chakra-ui/react";
 import { Chapter } from "../constants";
-import { useOverflow } from "../hooks/useOverflow";
 import { useRef } from "react";
 
 /**
@@ -30,12 +29,10 @@ export default function BottomPlaylist({
   onChapterSelect
 }: BottomPlaylistProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const { hasOverflowX } = useOverflow(ref);
 
   return (
     <Box
       borderColor="border.divider"
-      borderRightWidth={hasOverflowX ? "1px" : "0px"}
       borderStyle="solid"
       display="flex"
       flexDirection={{ base: "row", lg: 'row' }}
@@ -46,8 +43,7 @@ export default function BottomPlaylist({
       }}
       marginTop={'24px'}
       maxH={{ base: "auto", lg: 'auto' }}
-      overflow={'auto'}
-      paddingRight={hasOverflowX ? "sm" : undefined}
+      overflowX="auto"
       ref={ref}
       sx={{
         overflow: "auto",
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
index 4c4c030183..440851dcf1 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
@@ -1,6 +1,13 @@
 import { Box, Image, useBreakpointValue } from "@chakra-ui/react";
 import { Chapter } from "../constants";
 import { useUpdateEffect } from "react-use";
+import styled from "@emotion/styled";
+
+const ChaptersPlaylistWrapper = styled(Box)`
+  ::-webkit-scrollbar {
+    width: thin;
+  }
+`;
 
 type ChaptersPlaylistProps = {
   height: number;
@@ -29,19 +36,24 @@ export default function ChaptersPlaylist({
   }, [currentChapter, isMobile]);
 
   return (
-    <Box
+    <ChaptersPlaylistWrapper
       sx={{
-        overflow: "scroll",
         maxHeight: height,
-        gap: "16px",
         cursor: "pointer",
       }}
       display={{ base: "flex", lg: "grid" }}
       maxH={{ base: "auto", lg: height }}
+      gap={{ base: "40px", lg: "16px" }}
+      overflowY="auto"
+      overflowX="auto"
       flexWrap="nowrap"
     >
       {chapters.map((chapter) => {
         const isActive = chapter.id === currentChapter;
+        const textColor = isActive
+          ? "heading-navy-fg"
+          : "content.accent.disabled";
+
         return (
           <Box
             key={chapter.id}
@@ -52,62 +64,59 @@ export default function ChaptersPlaylist({
               gap: "16px",
               pointer: "cursor",
             }}
-            minW={{ base: "151px", lg: "auto" }}
+            maxW={{ base: "151px", md: "175px", lg: "100%" }}
             flexDir={{ base: "column", lg: "row" }}
             flexWrap="nowrap"
-            padding={{ base: "0px 0px 2rem", lg: "0px 1rem 0px" }}
+            padding={{ lg: "0px 4px 0px 0px" }}
             height="max-content"
           >
-            <Box
-              maxW={{ base: "151px", lg: "99px", xl: "151px" }}
-              height="min-content"
-            >
+            <Box minW={{ base: "151px", md: "175px" }}>
               <Image
                 src={chapter.thumbnail}
                 width={{
                   base: "151px",
-                  lg: "99px",
-                  xl: "151px",
+                  md: "175px"
                 }}
                 height="auto"
                 alt={chapter.title}
                 style={{
-                  // borderBottom: isActive ? "1px solid#EC796B" : "",
-                  borderRadius: "10px",
+                  borderRadius: "8px",
                 }}
                 aspectRatio="16/9"
+                objectFit="cover"
               />
             </Box>
-            <Box display="flex" flexDir="column" gap="4px">
+
+            <Box display="flex" width="100%" flexDir="column" gap="4px" color={textColor}>            
               <Box
-                as="h5"
-                fontSize="sm"
-                fontWeight="bold"
-                color={isActive ? "heading-navy-fg" : "fg-muted"}
+                fontSize="12px"
+                fontWeight={500}
                 lineHeight="normal"
+                display="flex"
+                justifyContent="space-between"
               >
+                {chapter.subtitle}
+                <Box
+                  display={{
+                    base: "block"
+                  }}
+                >
+                  {chapter.durationTime}
+                </Box>
+              </Box>
+
+              <Box as="h5" fontSize="15px" fontWeight="600" lineHeight="21px">
                 {chapter.title}
               </Box>
+
               <Box
                 as="p"
                 fontSize="12px"
-                lineHeight="15px"
-                sx={{
-                  maxW: "200px",
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
-              >
-                {chapter.description}
-              </Box>
-              <Box
-                as="p"
-                fontSize="xs"
-                lineHeight={1}
-                sx={{
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
+                lineHeight="normal"
                 flex={1}
-                display="flex"
+                display={{
+                  base: "none"
+                }}
                 alignItems="flex-end"
               >
                 {chapter.durationTime}
@@ -116,6 +125,6 @@ export default function ChaptersPlaylist({
           </Box>
         );
       })}
-    </Box>
+    </ChaptersPlaylistWrapper>
   );
 }
diff --git a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
index 018c75cfc8..1102ef09f7 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx
@@ -86,7 +86,7 @@ export function VideoPlayerWebsite({
         display: "grid",
         position: "relative",
       }}
-      gap="2xl"
+      gap="32px"
       gridTemplateColumns={{
         base: "1fr",
         lg: playlistOnBottom ? "1fr" : "2fr 1fr",

From f1258feec04ed74d73a44a59b75456ccb402f7ae Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 17:14:24 +0000
Subject: [PATCH 04/10] Remove category tabs mobile layout

---
 .../website/src/blocks/VideoSectionBlock.tsx  | 28 ++++++++++---------
 .../components/CategoryTabs/CategoryTabs.tsx  |  3 --
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/workspaces/website/src/blocks/VideoSectionBlock.tsx b/workspaces/website/src/blocks/VideoSectionBlock.tsx
index 116dad237c..ff93bc733b 100644
--- a/workspaces/website/src/blocks/VideoSectionBlock.tsx
+++ b/workspaces/website/src/blocks/VideoSectionBlock.tsx
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 
-import { Box } from "@chakra-ui/react";
+import { Box, Show } from "@chakra-ui/react";
 import {
   VideoSectionBlock as VideoSectionProps,
   ChapterInfo
@@ -60,18 +60,20 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
         playlistOnBottom={playlistOnBottom}
       />
 
-      <Box mt="md">
-        <CategoryTabs
-          activeItemId={currentChapter.id}
-          onTabClick={(id) => 
-            setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
-          }
-          items={normalizedPlaylist.map((p) => ({
-            id: p.id,
-            label: p.subtitle,
-          }))}
-          playlistOnBottom={playlistOnBottom}
-        />
+      <Box marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}>
+        <Show above="lg">   
+          <CategoryTabs
+            activeItemId={currentChapter.id}
+            onTabClick={(id) => 
+              setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
+            }
+            items={normalizedPlaylist.map((p) => ({
+              id: p.id,
+              label: p.subtitle,
+            }))}
+            playlistOnBottom={playlistOnBottom}
+          />
+        </Show>
 
         <Box
           maxW={chapterDescriptionFullWidth ? "100%" : "656px"}
diff --git a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
index 21c497bd03..dd475afb2b 100644
--- a/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
+++ b/workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx
@@ -24,7 +24,6 @@ export type CategoryTabsProps = {
   items: CategoryTabItem[];
   activeItemId: string;
   onTabClick?: (id: string) => void;
-  playlistOnBottom: boolean;
 };
 
 /**
@@ -35,14 +34,12 @@ export const CategoryTabs = ({
   items,
   activeItemId,
   onTabClick,
-  playlistOnBottom,
 }: CategoryTabsProps) => {
   return (
     <Box
       borderTopWidth="1px"
       borderBottomWidth="1px"
       borderColor="border.divider"
-      marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}
       width="100%"
     >
       <Flex

From 4f5898ea7ad7501030212c1ae3f33b7482ddb119 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 17:15:24 +0000
Subject: [PATCH 05/10] Add padding from scrollbar

---
 .../components/VideoPlayer/player-website/ChaptersPlaylist.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
index 440851dcf1..62218bad63 100644
--- a/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
+++ b/workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx
@@ -44,6 +44,7 @@ export default function ChaptersPlaylist({
       display={{ base: "flex", lg: "grid" }}
       maxH={{ base: "auto", lg: height }}
       gap={{ base: "40px", lg: "16px" }}
+      paddingBottom={{ base: "12px", lg: "0px" }}
       overflowY="auto"
       overflowX="auto"
       flexWrap="nowrap"

From 0716f1e9d5719d12a7296279be3a2414844b2bf3 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 12:34:25 +0000
Subject: [PATCH 06/10] Fix roadmap post state

---
 .../src/pages/roadmap/@slug/(components)/RoadmapPost.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
index 1eb53c72f9..da0b0fbe2e 100644
--- a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
+++ b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
@@ -128,7 +128,7 @@ export default function RoadmapPost({
               </Heading>
               {roadmapPost?.state ? <Flex alignItems="center">{roadmapPost?.specific_info ? <Text variant="cardBody" ml="2">{roadmapPost?.specific_info}</Text> : null}</Flex> : null}
             </Flex>
-            <div>{roadmapPost?.state ? <Text display="flex" alignItems="center" variant="cardBody" color="roadmap-availability-state-fg" height="32px" borderRadius="5px" padding="4px 12px" borderWidth="1px" borderStyle="solid" borderColor="roadmap-card-border-color" bg="roadmap-card-tag-bg">{roadmapPost?.state}<Box display="inline-block" bg={roadmapPost?.state === "On testnet" ? "#00815C" : "#EF5600"} borderRadius="50%" width="14px" height="14px" ml="2"></Box></Text> : null}</div>
+            <div>{roadmapPost?.state ? <Text display="flex" alignItems="center" variant="cardBody" color="roadmap-availability-state-fg" borderRadius="5px" padding="4px 12px" borderWidth="1px" borderStyle="solid" borderColor="roadmap-card-border-color" bg="roadmap-card-tag-bg">{roadmapPost?.state}<Box display="inline-block" bg={roadmapPost?.state === "On testnet" ? "#00815C" : "#EF5600"} borderRadius="50%" width="14px" height="14px" ml="2"></Box></Text> : null}</div>
           </Flex>
           <Divider mt="8px" mb="32px" />
 

From 0026b9303b100a50529e55d2f346e0cf137cc516 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 16:43:21 +0000
Subject: [PATCH 07/10] Fix roadmap card badge

---
 .../src/pages/roadmap/(components)/RoadmapPostVersion.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/workspaces/website/src/pages/roadmap/(components)/RoadmapPostVersion.tsx b/workspaces/website/src/pages/roadmap/(components)/RoadmapPostVersion.tsx
index 95c31fc234..d3b1a573a8 100644
--- a/workspaces/website/src/pages/roadmap/(components)/RoadmapPostVersion.tsx
+++ b/workspaces/website/src/pages/roadmap/(components)/RoadmapPostVersion.tsx
@@ -12,7 +12,7 @@ export default function RoadmapPostVersion({
       <Badge variant={roadmapVersion?.color}>
         {roadmapVersion?.version}
       </Badge>
-      <Badge variant={roadmapVersion?.color} sx={{textWrap: "wrap"}}>
+      <Badge variant={roadmapVersion?.color} sx={{ whiteSpace: "unset", textWrap: "wrap" }}>
         {roadmapVersion?.impact}
       </Badge>
     </Flex>

From cc51d6b1d36cbd1c23aad940f2583c13edd3ad76 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 16:43:42 +0000
Subject: [PATCH 08/10] Fix roadmap page layout

---
 .../src/pages/(components)/roadmap/RoadmapLayout.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/workspaces/website/src/pages/(components)/roadmap/RoadmapLayout.tsx b/workspaces/website/src/pages/(components)/roadmap/RoadmapLayout.tsx
index f1ee25063a..49c84c0ae8 100644
--- a/workspaces/website/src/pages/(components)/roadmap/RoadmapLayout.tsx
+++ b/workspaces/website/src/pages/(components)/roadmap/RoadmapLayout.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { HeroImage } from "@ui/HeroImage/HeroImage";
 import { PageLayout } from "@ui/Layout/PageLayout";
 import { ReactNode } from "react";
@@ -27,7 +27,7 @@ export default function RoadmapLayout({
     <>
       <PageLayout
         main={
-          <Container>
+          <Box>
             {roadmapSettings?.show_hero_banner && <HeroImage
               title={roadmapSettings?.hero_title}
               description={roadmapSettings?.hero_description}
@@ -68,7 +68,7 @@ export default function RoadmapLayout({
               </Box>
             </Flex> */}
             {children}
-          </Container>
+          </Box>
         }
       />
     </>

From e5c25b4938e2e59a1dae67c9d577e394cfd9ee53 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 16:43:57 +0000
Subject: [PATCH 09/10] Fix roadmap post layout

---
 .../src/pages/roadmap/@slug/(components)/RoadmapPost.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
index da0b0fbe2e..931174e6f4 100644
--- a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
+++ b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
@@ -113,7 +113,7 @@ export default function RoadmapPost({
         roadmapPost?.gitlog?.date
       ).fromNow()}`}
       main={
-        <Container maxWidth="846px">
+        <Box maxWidth="846px">
           <Box mb={"2rem"}>
             <RoadmapPostVersion roadmapVersion={roadmapVersion} />
           </Box>
@@ -146,7 +146,7 @@ export default function RoadmapPost({
           <MarkdownBlock body={psCopy as string} />
           <RoadmapSubscribeForm env={env} isOpen={isOpen} setIsOpen={setIsOpen} />
           <Divider mt="6" />
-        </Container>
+        </Box>
       }
     />
   );

From 1cb439da2cd9a42c75b09ee9dc308e132e3a3937 Mon Sep 17 00:00:00 2001
From: PedroBailaAndrade <pedrocbva@gmail.com>
Date: Thu, 28 Dec 2023 16:48:13 +0000
Subject: [PATCH 10/10] Fix article card image

---
 workspaces/website/src/components/ArticleCard/ArticleCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/workspaces/website/src/components/ArticleCard/ArticleCard.tsx b/workspaces/website/src/components/ArticleCard/ArticleCard.tsx
index f8efcb9691..61b0c4e47d 100644
--- a/workspaces/website/src/components/ArticleCard/ArticleCard.tsx
+++ b/workspaces/website/src/components/ArticleCard/ArticleCard.tsx
@@ -60,8 +60,8 @@ const Image = ({ url, imageAlt, type = "grid" }: ImageProps) => {
         src={isProd ? cloudflareImage : url}
         alt={imageAlt}
         width="full"
-        height={type === "featured" ? "100%" : { base: "16rem", md: "12rem", lg: "10rem" }}
-        objectFit="cover"
+        height={type === "featured" ? "100%" : { base: "16rem", lg: "10rem" }}
+        objectFit={type === "featured" ? "contain" : { base: "contain", lg: "cover" }}
         {...type === "grid" && { borderTopRadius: 8}}
       />
     </Box>