Merge pull request #1121 from thebadking/canary

style: fix tablet and mobile (Create from Template)
This commit is contained in:
Mauricio Siu 2025-01-18 10:52:24 -06:00 committed by GitHub
commit e8f2ab35c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -114,26 +114,26 @@ export const AddTemplate = ({ projectId }: Props) => {
</DialogTrigger>
<DialogContent className="max-h-screen sm:max-w-[90vw] p-0">
<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-between">
<div className="flex flex-col space-y-6">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
<div>
<DialogTitle>Create from Template</DialogTitle>
<DialogDescription>
Create an open source application from a template
</DialogDescription>
</div>
<div className="flex items-center gap-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<Input
placeholder="Search Template"
onChange={(e) => setQuery(e.target.value)}
className="w-[200px]"
className="w-full sm:w-[200px]"
value={query}
/>
<Popover modal={true}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn("w-[200px] justify-between !bg-input")}
className={cn("w-full sm:w-[200px] justify-between !bg-input")}
>
{isLoadingTags
? "Loading...."
@ -238,8 +238,8 @@ export const AddTemplate = ({ projectId }: Props) => {
className={cn(
"grid gap-6",
viewMode === "detailed"
? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6"
: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-8",
? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
)}
>
{templates?.map((template, index) => (
@ -340,6 +340,7 @@ export const AddTemplate = ({ projectId }: Props) => {
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
variant="secondary"
size="sm"
className={cn(
"w-auto",