Fix sidebar responsive behavior and remove unused sidebar code

Author: akashwarrior

app/workflows/[workflowId]/page.tsx

@@ -588,7 +588,11 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
               </button>
             )}
           </div>
-          <NodeConfigPanel />
+
+          {/* Desktop: Docked sidebar - now resizable */}
+          <div className="flex size-full flex-col bg-background">
+            <NodeConfigPanel />
+          </div>
         </div>
       )}
     </div>

components/workflow/node-config-panel.tsx

@@ -5,7 +5,6 @@ import {
   Eye,
   EyeOff,
   FileCode,
-  MenuIcon,
   RefreshCw,
   Trash2,
 } from "lucide-react";
@@ -47,9 +46,7 @@ import {
   updateNodeDataAtom,
 } from "@/lib/workflow-store";
 import { findActionById } from "@/plugins";
-import { Panel } from "../ai-elements/panel";
 import { IntegrationsDialog } from "../settings/integrations-dialog";
-import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { IntegrationSelector } from "../ui/integration-selector";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ActionConfig } from "./config/action-config";
@@ -143,7 +140,7 @@ const MultiSelectionPanel = ({
 };
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Complex UI logic with multiple conditions
-export const PanelInner = () => {
+export const NodeConfigPanel = () => {
   const [selectedNodeId] = useAtom(selectedNodeAtom);
   const [selectedEdgeId] = useAtom(selectedEdgeAtom);
   const [nodes] = useAtom(nodesAtom);
@@ -942,29 +939,3 @@ export const PanelInner = () => {
     </>
   );
 };
-export const NodeConfigPanel = () => {
-  return (
-    <>
-      {/* Mobile: Drawer */}
-      <div className="md:hidden">
-        <Drawer>
-          <DrawerTrigger asChild>
-            <Panel position="bottom-right">
-              <Button className="h-8 w-8" size="icon" variant="ghost">
-                <MenuIcon className="size-4" />
-              </Button>
-            </Panel>
-          </DrawerTrigger>
-          <DrawerContent>
-            <PanelInner />
-          </DrawerContent>
-        </Drawer>
-      </div>
-
-      {/* Desktop: Docked sidebar - now resizable */}
-      <div className="hidden size-full flex-col bg-background md:flex">
-        <PanelInner />
-      </div>
-    </>
-  );
-};

components/workflow/workflow-toolbar.tsx

@@ -49,7 +49,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
 import { api, type IntegrationType } from "@/lib/api-client";
 import { useSession } from "@/lib/auth-client";
 import { integrationsAtom } from "@/lib/integrations-store";
@@ -89,7 +89,7 @@ import { IntegrationsDialog } from "../settings/integrations-dialog";
 import { IntegrationIcon } from "../ui/integration-icon";
 import { WorkflowIcon } from "../ui/workflow-icon";
 import { UserMenu } from "../workflows/user-menu";
-import { PanelInner } from "./node-config-panel";
+import { NodeConfigPanel } from "./node-config-panel";
 
 type WorkflowToolbarProps = {
   workflowId?: string;
@@ -849,7 +849,7 @@ function ToolbarActions({
       </ButtonGroup>
 
       {/* Properties - Mobile Vertical (always visible) */}
-      <ButtonGroup className="flex lg:hidden" orientation="vertical">
+      <ButtonGroup className="flex md:hidden" orientation="vertical">
         <Button
           className="border hover:bg-black/5 dark:hover:bg-white/5"
           onClick={() => setShowPropertiesSheet(true)}
@@ -876,8 +876,9 @@ function ToolbarActions({
       {/* Properties Sheet - Mobile Only */}
       <Sheet onOpenChange={setShowPropertiesSheet} open={showPropertiesSheet}>
         <SheetContent className="w-full p-0 sm:max-w-full" side="bottom">
+          <SheetTitle className="sr-only" />
           <div className="h-[80vh]">
-            <PanelInner />
+            <NodeConfigPanel />
           </div>
         </SheetContent>
       </Sheet>