From 245d8908659fd36554b3aba4f2ecc0832a737285 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Thu, 26 Mar 2020 11:15:21 +0800
Subject: [PATCH] docs: fix the height of menu item can not be scaled

---
 lib/components/playground/index.tsx       | 1 +
 lib/components/sidebar/active-catalog.tsx | 1 -
 lib/components/sidebar/side-item.tsx      | 9 ++-------
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/lib/components/playground/index.tsx b/lib/components/playground/index.tsx
index aaa21ae..8f298e3 100644
--- a/lib/components/playground/index.tsx
+++ b/lib/components/playground/index.tsx
@@ -90,6 +90,7 @@ const editor = (code: string) => {
           justify-content: center;
           align-items: center;
           height: 100%;
+          width: fit-content;
         }
         
         summary :global(svg) {
diff --git a/lib/components/sidebar/active-catalog.tsx b/lib/components/sidebar/active-catalog.tsx
index 69db0c3..e8e9d22 100644
--- a/lib/components/sidebar/active-catalog.tsx
+++ b/lib/components/sidebar/active-catalog.tsx
@@ -21,7 +21,6 @@ const ActiveCatalog: React.FC<Props> = React.memo(
             transition: all .2s ease;
             color: ${theme.palette.accents_3};
             text-transform: uppercase;
-            padding-bottom: .5rem;
           }
           
           .active {
diff --git a/lib/components/sidebar/side-item.tsx b/lib/components/sidebar/side-item.tsx
index ed352ea..8f9b692 100644
--- a/lib/components/sidebar/side-item.tsx
+++ b/lib/components/sidebar/side-item.tsx
@@ -43,11 +43,6 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
       })}
       <style jsx>{`
         .item {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          justify-content: center;
-          align-items: flex-start;
           width: 100%;
         }
         
@@ -55,7 +50,7 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
           width: 100%;
           color: ${theme.palette.accents_5};
           display: flex;
-          height: 36px;
+          height: 2.25rem;
           align-items: center;
           justify-content: flex-start;
           cursor: pointer;
@@ -82,9 +77,9 @@ const SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(({
           align-items: flex-start;
           flex-direction: column;
           padding-left: ${theme.layout.gapHalf};
-          overflow: hidden;
           transition: all .2s ease-in-out;
           position: relative;
+          margin-top: .5rem;
         }
         
         .active-title {