From 216c262bf2833ab7a6883331f971abbdfcc74a49 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Mon, 28 Mar 2022 08:51:07 +0200
Subject: [PATCH] fix(techdocs): mobile sidebar width

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../techdocs/src/reader/components/Reader.tsx | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 9ce9ad5d6d..0d7615fab3 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -450,12 +450,6 @@ export const useTechDocsReaderDom = (
               scrollbar-color: rgb(193, 193, 193) #eee;
               scrollbar-width: thin;
             }
-            .md-sidebar .md-sidebar__scrollwrap {
-              width: calc(16rem - 10px);
-            }
-            .md-sidebar--secondary {
-              right: ${theme.spacing(3)}px;
-            }
             .md-sidebar::-webkit-scrollbar {
               width: 5px;
             }
@@ -478,6 +472,12 @@ export const useTechDocsReaderDom = (
             .md-sidebar::-webkit-scrollbar-thumb:hover {
               background: rgb(125, 125, 125);
             }
+            .md-sidebar--secondary {
+              right: ${theme.spacing(3)}px;
+            }
+            .md-sidebar__scrollwrap {
+              overflow: unset !important;
+            }
 
             .md-content {
               max-width: calc(100% - 16rem * 2);
@@ -556,15 +556,18 @@ export const useTechDocsReaderDom = (
                 height: 100%;
               }
               .md-sidebar--primary {
-                width: 12.1rem !important;
+                width: 16rem !important;
                 z-index: 200;
                 left: ${
-                  isPinned ? 'calc(-12.1rem + 242px)' : 'calc(-12.1rem + 72px)'
+                  isPinned ? 'calc(-16rem + 242px)' : 'calc(-16rem + 72px)'
                 } !important;
               }
               .md-sidebar--secondary:not([hidden]) {
                 display: none;
               }
+              [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
+                transform: translateX(16rem);
+              }
 
               .md-content {
                 max-width: 100%;
@@ -593,8 +596,8 @@ export const useTechDocsReaderDom = (
 
             @media screen and (max-width: 600px) {
               .md-sidebar--primary {
-                left: -12.1rem !important;
-                width: 12.1rem;
+                left: -16rem !important;
+                width: 16rem;
               }
             }
           `,