fix: docs mobile appereance

.prettierrc.cjs

@@ -1,7 +1,6 @@
 module.exports = {
   plugins: [
     require.resolve("prettier-plugin-astro"),
-    require.resolve("prettier-plugin-tailwindcss"),
   ],
   overrides: [
     {

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>
       {

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>