From acdbfc55488a77ff6629fd272ca3be99f0cb0131 Mon Sep 17 00:00:00 2001
From: OLIMINATOR <oliminator@protonmail.com>
Date: Sun, 4 Jun 2023 21:16:32 +0200
Subject: [PATCH] fix: docs mobile appereance

---
 .prettierrc.cjs                               |  1 -
 src/components/widgets/docs/LeftSidebar.astro |  4 ++--
 src/layouts/docs/ItemLayout.astro             | 10 ++++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 7772ceb..dd613a8 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -1,7 +1,6 @@
 module.exports = {
   plugins: [
     require.resolve("prettier-plugin-astro"),
-    require.resolve("prettier-plugin-tailwindcss"),
   ],
   overrides: [
     {
diff --git a/src/components/widgets/docs/LeftSidebar.astro b/src/components/widgets/docs/LeftSidebar.astro
index cd5aadf..c28eeba 100644
--- a/src/components/widgets/docs/LeftSidebar.astro
+++ b/src/components/widgets/docs/LeftSidebar.astro
@@ -25,7 +25,7 @@ const getLinkClasses = (link: SidebarItem) => {
 };
 ---
 
-<aside title="Site Navigation">
+<aside title="Site Navigation" class="left-0 absolute md:relative">
   <div class="absolute z-10 text-white md:hidden">
     <button id="sidebar-show" class="p-4 pl-2">
       <span class="sr-only">sidebar menu</span>
@@ -40,7 +40,7 @@ const getLinkClasses = (link: SidebarItem) => {
   <nav
     id="sidebar"
     aria-labelledby="grid-left"
-    class="bg-dark-r w-64 -translate-x-full p-4 transition-transform duration-200 md:visible md:translate-x-0 md:bg-transparent"
+    class="bg-dark w-screen md:w-64 -translate-x-full p-4 transition-transform duration-200 md:visible md:translate-x-0 md:bg-transparent"
   >
     <ul>
       {
diff --git a/src/layouts/docs/ItemLayout.astro b/src/layouts/docs/ItemLayout.astro
index 7ec6f1d..1974abd 100644
--- a/src/layouts/docs/ItemLayout.astro
+++ b/src/layouts/docs/ItemLayout.astro
@@ -15,18 +15,20 @@ const currentPage = new URL(Astro.request.url).pathname;
 >
   <Navbar />
 
-  <div class="grid grid-cols-12">
+  <div class="grid grid-cols-4 md:grid-cols-12">
     <div
-      class="col-span-3 flex flex-row md:sticky md:top-0 md:h-screen md:pt-4"
+      class="md:col-span-3 flex flex-row md:sticky md:top-0 md:h-screen md:pt-4"
     >
       <div class="ml-auto">
         <LeftSidebar currentPage={currentPage} />
       </div>
     </div>
-    <main class="col-span-6 overflow-auto py-12">
+    <main
+      class="container mx-auto px-4 col-span-4 md:col-span-6 overflow-auto py-12"
+    >
       <div>
         <article id="article" class="content">
-          <section class="main-section prose prose-invert max-w-none">
+          <section class="break-all main-section prose prose-invert max-w-none">
             <nav class="block sm:hidden"></nav>
             <slot />
           </section>