Canvas: Fix layout, get rid of scroll bars
Change-Id: I3244784ee741e93565190e538472723ffadfb754
diff --git a/apps/canvas/front/src/ProjectSelect.tsx b/apps/canvas/front/src/ProjectSelect.tsx
index 5178b5e..a643eaa 100644
--- a/apps/canvas/front/src/ProjectSelect.tsx
+++ b/apps/canvas/front/src/ProjectSelect.tsx
@@ -6,6 +6,8 @@
import { Button } from "./components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "./components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
+import { Separator } from "./components/ui/separator";
+import { Plus } from "lucide-react";
export function ProjectSelect() {
const { toast } = useToast();
@@ -97,24 +99,28 @@
}, [name, setCreateNewOpen, toast, store, refreshProjects]);
return (
<Select onValueChange={onSelect} value={project}>
- <SelectTrigger className="w-[200px]">
+ <SelectTrigger className="w-[200px] !border-none !shadow-none !focus:ring-0 !focus:ring-offset-0">
<SelectValue placeholder="Choose Project" defaultValue={project} />
</SelectTrigger>
<SelectContent>
+ {projects.map((p) => (
+ <SelectItem key={p.id} value={p.id}>
+ {p.name}
+ </SelectItem>
+ ))}
+ <Separator />
<SelectItem value={"create-new"}>
<Dialog open={createNewOpen} onOpenChange={setCreateNewOpen}>
- <DialogTrigger>Create New</DialogTrigger>
+ <DialogTrigger className="flex flex-row items-center">
+ <Plus />
+ Create New
+ </DialogTrigger>
<DialogContent>
<Input type="text" placeholder="Name" onChange={updateName} />
<Button onClick={createNew}>Create New</Button>
</DialogContent>
</Dialog>
</SelectItem>
- {projects.map((p) => (
- <SelectItem key={p.id} value={p.id}>
- {p.name}
- </SelectItem>
- ))}
</SelectContent>
</Select>
);