chore: fix sidebar for small width screens

Author: brendan-kellam

packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

@@ -32,8 +32,9 @@ import { KeymapType } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import {
     ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
-    Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
+    Laptop, LogIn, LogOut, Menu, Moon, SettingsIcon, Sun, UserIcon
 } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import { useTheme } from "next-themes";
@@ -45,6 +46,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Separator } from "@/components/ui/separator";
 import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
 import { UpgradeButton } from "./upgradeButton";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 interface SidebarBaseProps {
     session: Session | null;
@@ -57,6 +59,7 @@ interface SidebarBaseProps {
 export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive }: SidebarBaseProps) {
     const [isScrolled, setIsScrolled] = useState(false);
     const contentRef = useRef<HTMLDivElement>(null);
+    const isMobile = useIsMobile();
 
     useEffect(() => {
         const el = contentRef.current;
@@ -69,36 +72,60 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
     }, []);
 
     return (
-        <Sidebar
-            collapsible={collapsible}
-            className="!border-r-0"
+        <>
+            <MobileSidebarTrigger />
+            <Sidebar
+                collapsible={collapsible}
+                className="!border-r-0"
+            >
+                <SidebarHeader className={cn("pt-4 border-b transition-[border-color] duration-200", isScrolled ? "border-sidebar-border" : "border-transparent")}>
+                    <Link href="/">
+                        <div className="group-data-[state=collapsed]:hidden">
+                            <SourcebotLogo className="w-fit h-8" size="large" />
+                        </div>
+                        <div className="hidden group-data-[state=collapsed]:block">
+                            <SourcebotLogo className="w-fit h-8" size="small" />
+                        </div>
+                    </Link>
+                    {headerContent}
+                </SidebarHeader>
+                <SidebarContent ref={contentRef}>
+                    {children}
+                </SidebarContent>
+                <SidebarFooter className="border-t border-sidebar-border">
+                    {!isValidLicenseActive && <UpgradeButton />}
+                    {
+                        (collapsible !== "none" && !isMobile) &&
+                        <CollapseSidebarButton />
+                    }
+                    <WhatsNewSidebarButton />
+                    {session ? (
+                        <MeControlDropdownMenu session={session} />
+                    ) : (
+                        <GuestDropdownMenu />
+                    )}
+                </SidebarFooter>
+                {collapsible !== "none" && <SidebarRail />}
+            </Sidebar>
+        </>
+    );
+}
+
+function MobileSidebarTrigger() {
+    const { isMobile, setOpenMobile } = useSidebar();
+    if (!isMobile) {
+        return null;
+    }
+    return (
+        <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setOpenMobile(true)}
+            className="fixed bottom-4 left-4 z-50 shadow-md rounded-full"
+            aria-label="Open sidebar"
         >
-            <SidebarHeader className={cn("pt-4 border-b transition-[border-color] duration-200", isScrolled ? "border-sidebar-border" : "border-transparent")}>
-                <Link href="/">
-                    <div className="group-data-[state=collapsed]:hidden">
-                        <SourcebotLogo className="w-fit h-8" size="large" />
-                    </div>
-                    <div className="hidden group-data-[state=collapsed]:block">
-                        <SourcebotLogo className="w-fit h-8" size="small" />
-                    </div>
-                </Link>
-                {headerContent}
-            </SidebarHeader>
-            <SidebarContent ref={contentRef}>
-                {children}
-            </SidebarContent>
-            <SidebarFooter className="border-t border-sidebar-border">
-                {!isValidLicenseActive && <UpgradeButton />}
-                {collapsible !== "none" && <CollapseSidebarButton />}
-                <WhatsNewSidebarButton />
-                {session ? (
-                    <MeControlDropdownMenu session={session} />
-                ) : (
-                    <GuestDropdownMenu />
-                )}
-            </SidebarFooter>
-            {collapsible !== "none" && <SidebarRail />}
-        </Sidebar>
+            <Menu className="h-4 w-4" />
+        </Button>
     );
 }
 

packages/web/src/app/(app)/layout.tsx

@@ -175,7 +175,7 @@ export default async function Layout(props: LayoutProps) {
                 <div className="fixed inset-0 flex bg-shell">
                     <SidebarProvider defaultOpen={cookieStore.get("sidebar_state")?.value !== "false"}>
                         {sidebar}
-                        <div className="flex-1 min-h-0 flex flex-col pt-2 pb-2 pr-2">
+                        <div className="flex-1 min-h-0 flex flex-col pt-2 pb-2 pr-2 pl-2 md:pl-0">
                             <div className="flex-1 min-h-0 bg-background flex flex-col border border-[#e6e6e6] dark:border-[#1d1d1f] rounded-xl overflow-hidden">
                                 <BannerSlot
                                     role={role}

packages/web/src/components/ui/sidebar.tsx

@@ -192,21 +192,6 @@ const Sidebar = React.forwardRef<
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      )
-    }
-
     if (isMobile) {
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
@@ -231,6 +216,21 @@ const Sidebar = React.forwardRef<
       )
     }
 
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "hidden h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground md:flex",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
     return (
       <div
         ref={ref}

packages/web/src/features/chat/components/chatBox/chatBox.tsx

@@ -367,7 +367,7 @@ const ChatBoxComponent = ({
                 className={cn("flex flex-col justify-between gap-0.5 w-full px-3 py-2", className)}
             >
                 <Editable
-                    className="w-full focus-visible:outline-none focus-visible:ring-0 bg-background text-base disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-64 overflow-y-auto"
+                    className="w-full focus-visible:outline-none focus-visible:ring-0 bg-background text-sm disabled:cursor-not-allowed disabled:opacity-50 max-h-64 overflow-y-auto"
                     placeholder="Ask a question about your code. @mention files or select search scopes to refine your query."
                     renderElement={renderElement}
                     renderLeaf={renderLeaf}