chore: fix sidenav alignment when text is long (#1664)

* chore: long text alignment for self learning * chore: fix sidenav alignment when text is long * chore: changeset * chore: fix sidenav order
commercetools · May 9, 2023 · 1340d03 · 1340d03
1 parent 0e81c93
commit 1340d03
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/beige-actors-pay.md b/.changeset/beige-actors-pay.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-learning': patch
+'@commercetools-website/docs-smoke-test': patch
+---
+
+Fix misalignment in self-learning navigation sidebar when topic title is longer than a line
diff --git a/packages/gatsby-theme-learning/src/components/sidebar-course-status.tsx b/packages/gatsby-theme-learning/src/components/sidebar-course-status.tsx
@@ -9,10 +9,9 @@ import ConfigContext, {
   EFeatureFlag,
 } from './config-context';
 import styled from '@emotion/styled';
-import { designSystem } from '@commercetools-docs/ui-kit';
 
 const UnknownStateSpacer = styled.div`
-  width: ${designSystem.dimensions.spacings.l};
+  min-width: 21px;
   margin-right: 5px;
 `;
 

diff --git a/packages/gatsby-theme-learning/src/components/sidebar-topic-status.tsx b/packages/gatsby-theme-learning/src/components/sidebar-topic-status.tsx
@@ -12,7 +12,7 @@ import { designSystem } from '@commercetools-docs/ui-kit';
 import styled from '@emotion/styled';
 
 const UnknownStateSpacer = styled.div`
-  width: ${designSystem.dimensions.spacings.m};
+  min-width: ${designSystem.dimensions.spacings.m};
   margin-right: 5px;
 `;
 

diff --git a/websites/docs-smoke-test/src/data/navigation.yaml b/websites/docs-smoke-test/src/data/navigation.yaml
@@ -59,7 +59,7 @@
   pages:
     - title: Overview
       path: /self-learning/overview
-    - title: Test your knowledge
+    - title: Test your knowledge with long title
       path: /self-learning/quiz
     - title: Test your knowledge 2
       path: /self-learning/2-quiz