fix: feedback ui post card (#73)

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@eleven-labs/design-system",
  "description": "Design System for Eleven Labs",
- "version": "0.30.2",
+ "version": "0.30.3",
  "repository": {
  "type": "git",
  "url": "https://github.com/eleven-labs/design-system.git"

src/components/Molecules/Cards/PostCard/PostCard.scss

@@ -93,6 +93,7 @@
 
  #{$this}__heading {
  -webkit-line-clamp: 3;
+ min-height: 5.5rem;
  }
  }
 
@@ -113,6 +114,10 @@
 
  #{$this}__heading {
  -webkit-line-clamp: 2;
+
+ @include create-media-queries('md') {
+ width: calc(100% - 55px);
+ }
  }
  #{$this}__excerpt {
  -webkit-line-clamp: 2;

src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss

@@ -3,11 +3,13 @@
 .last-articles-block {
  &__post-list {
  display: grid; // @todo: add component for grid
- }
 
- @include create-media-queries('md') {
- &__post-list {
- grid-template-columns: repeat(4, 1fr); // @todo: add component for grid
+ @include create-media-queries('md') {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @include create-media-queries('lg') {
+ grid-template-columns: repeat(4, 1fr);
  }
  }
 }

src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.stories.ts

@@ -13,9 +13,15 @@ const meta: Meta<typeof LastTutorialsBlock> = {
  description:
  'Avec nos tutoriels, apprenez pas à pas à créer de nouvelles features : créer un chat avec Mercure et Symfony, mettre en place un CI/CD avec GitLab-CI pour une application Javascript et bien plus encore. Suivez le guide !',
  tutorialLabel: 'Tutoriel',
- posts: Array.from({ length: 2 }).map(
- () => PostCardStories.WithContentTypeTutorial.args as LastTutorialsBlockProps['posts'][0]
- ),
+ posts: [
+ {
+ ...(PostCardStories.WithContentTypeTutorial.args as LastTutorialsBlockProps['posts'][0]),
+ },
+ {
+ ...(PostCardStories.WithContentTypeTutorial.args as LastTutorialsBlockProps['posts'][0]),
+ title: 'Nam molestie elementum libero, ut sollicitudin lorem placerat',
+ },
+ ],
  linkSeeMore: { label: 'Découvrir tous nos tutoriels', href: '#' },
  },
 };

src/components/Organisms/Header/Header.scss

@@ -50,6 +50,17 @@
  width: 100%;
  border-top: 0.5px solid #{map-get-strict($token-variables, 'color', 'secondary-dark')};
 
+ @include create-media-queries('md') {
+ margin: 0 #{map-get-strict($token-variables, 'spacing', 'xs')};
+ gap: #{map-get-strict($token-variables, 'spacing', 'm')};
+ font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
+ }
+
+ @include create-media-queries('lg') {
+ margin: 0;
+ gap: #{map-get-strict($token-variables, 'spacing', 'xl')};
+ }
+
  &--is-open {
  display: flex;
  }
@@ -60,11 +71,4 @@
  border-bottom: 0.5px solid #{map-get-strict($token-variables, 'color', 'secondary-dark')};
  }
  }
-
- @include create-media-queries('md') {
- &__menu {
- gap: #{map-get-strict($token-variables, 'spacing', 'xl')};
- font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
- }
- }
 }

src/components/Organisms/PostCardList/PostCardList.tsx

@@ -17,7 +17,7 @@ export const PostCardList: React.FC<PostCardListProps> = ({ posts, pagination, i
  <PostCard {...(post || {})} isLoading={isLoading} />
  </React.Fragment>
  ))}
- {pagination && pagination?.totalPages > 1 && <Pagination {...pagination} />}
+ {pagination && pagination?.totalPages > 1 && <Pagination mx="auto" {...pagination} />}
  </Flex>
  </>
 );

src/pages/PostPage/PostPage.tsx

@@ -23,8 +23,8 @@ export const PostPage: React.FC<PostPageProps> = ({
  ...postPageContent
 }) => (
  <Box mx="auto" className="post-page">
- <Breadcrumb {...breadcrumb} />
- <Picture {...cover} img={{ className: 'post-page__cover', ...cover?.img }} />
+ <Breadcrumb mx={{ xs: 'xs', md: '0' }} {...breadcrumb} />
+ <Picture {...cover} mx={{ xs: 'xs', md: '0' }} img={{ className: 'post-page__cover', ...cover?.img }} />
  <LayoutContentWithSidebar
  content={
  <PostPageContent {...postPageContent} variant={variant} summary={summary}>