From 1340d0398bf318868162ceabcb517aaa0360d1de Mon Sep 17 00:00:00 2001
From: Gabriele Antonini <106664971+gabriele-ct@users.noreply.github.com>
Date: Tue, 9 May 2023 16:37:27 +0200
Subject: [PATCH] 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
---
 .changeset/beige-actors-pay.md                              | 6 ++++++
 .../src/components/sidebar-course-status.tsx                | 3 +--
 .../src/components/sidebar-topic-status.tsx                 | 2 +-
 websites/docs-smoke-test/src/data/navigation.yaml           | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/beige-actors-pay.md

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