diff --git a/.changeset/beige-actors-pay.md b/.changeset/beige-actors-pay.md new file mode 100644 index 0000000000..c74c951fc8 --- /dev/null +++ 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 index 9a80f8e9c5..dadf73c585 100644 --- 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 index af1ac2f161..0ddfb1ff20 100644 --- 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 index 7821a1c4aa..5600b0a3e5 100644 --- 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