docs: improve responsiveness

Author: maiieul

apps/website/src/components/status-banner/status-banner.tsx

@@ -81,7 +81,7 @@ export const StatusBanner = component$(({ status }: StatusBannerProps) => {
         onAnimationEnd$={() => (isBannerClosedSig.value = true)}
         class={cn(
           getBackgroundByStatus(status),
-          'normal-state rounded-base relative -mx-8 border-2 px-8 py-6 md:flex-row md:items-center',
+          'normal-state rounded-base relative border-2 px-8 py-6 md:flex-row md:items-center 2xl:-mx-8',
         )}
         style={{ marginBottom: `${marginBottom}px` }}
       >

apps/website/src/routes/docs.css

@@ -1,8 +1,4 @@
 .docs {
-  & {
-    @apply overflow-hidden px-8 py-8;
-  }
-
   table a {
     @apply border-none;
   }

apps/website/src/routes/layout.tsx

@@ -31,12 +31,12 @@ export default component$(() => {
     <>
       <Header showBottomBorder={true} showVersion={true} />
       <MDXProvider components={components}>
-        <div class="relative flex justify-between space-x-10 2xl:justify-center 2xl:space-x-20">
+        <div class="flex justify-around lg:justify-around lg:space-x-10 2xl:justify-center 2xl:space-x-24">
           <DocsNavigation
             linksGroups={menuItemsGroups}
-            class=" bg-background sticky top-16 hidden h-[calc(100vh-64px)] min-w-72 overflow-auto lg:block"
+            class=" sticky top-16 hidden h-[calc(100vh-64px)] min-w-72 overflow-auto lg:flex"
           />
-          <main class="docs w-full max-w-3xl">
+          <main class="w-full max-w-3xl px-4 py-8 sm:px-8">
             <Slot />
           </main>
           <div class="hidden min-w-64 text-sm xl:block">