Make sidebar responsive

docs/src/components/Sidebar.astro

@@ -21,7 +21,7 @@ const { activePath } = Astro.props;
 const starCount = getFormattedStars("kamranahmedse/driver.js");
 ---
 <div class="hidden md:block w-[200px] lg:w-[350px] border-r border-gray-200 text-right min-h-screen flex-shrink-0">
-  <div class="sticky top-0">
+  <div class="relative sh:sticky top-0">
     <div class="justify-end flex pt-10 pb-5 px-5">
       <a href="/" class="block items-center justify-end mb-2">
         <img src="/driver-head.svg" alt="Astro" class="w-16 h-16" />

docs/tailwind.config.cjs

@@ -2,6 +2,12 @@
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
+    screens: {
+      'sh': {
+        'raw': '(min-height: 750px)',
+      },
+      ...require('tailwindcss/defaultConfig').theme.screens,
+    },
     container: {
     },
     extend: {},