.

client/package.json

@@ -70,7 +70,8 @@
     "react-wrap-balancer": "^1.1.1",
     "recharts": "^2.12.7",
     "slugify": "^1.6.6",
-    "use-debounce": "^10.0.3"
+    "use-debounce": "^10.0.3",
+    "vaul": "^0.9.1"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "^5.51.23",

client/src/app/quotes/components/CatalogPickerDataTable.tsx

@@ -62,9 +62,7 @@ export const CatalogPickerDataTable = ({ onSelect }: { onSelect: (data: unknown)
             }}
           >
             <PackagePlusIcon className='h-3.5 w-3.5' />
-            <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
+            <span className='sr-only xl:not-sr-only xl:whitespace-nowrap'>{t("common.add")}</span>
-              {t("common.add")}
-            </span>
           </Button>
         ),
       },

client/src/app/quotes/components/QuotesDataTable.tsx

@@ -225,7 +225,6 @@ export const QuotesDataTable = ({
   }, [data, table]);
 
   const handleFinishDownload = useCallback(() => {
-    console.log("Download success!!");
     toast({
       description: t("quotes.downloading_dialog.toast_success"),
     });

client/src/app/quotes/components/editors/CatalogPickerDialog.tsx

@@ -6,9 +6,16 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
 } from "@/ui";
 
-import { DataTableProvider } from "@/lib/hooks";
+import { DataTableProvider, useMediaQuery } from "@/lib/hooks";
 import { t } from "i18next";
 import { CatalogPickerDataTable } from "../CatalogPickerDataTable";
 
@@ -21,23 +28,46 @@ export const CatalogPickerDialog = ({
   onOpenChange: (open: boolean) => void;
   onSelect: (data: unknown) => void;
 }) => {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  if (isDesktop) {
+    return (
+      <Dialog modal open={isOpen} onOpenChange={onOpenChange}>
+        <DialogContent className='w-full max-w-full md:w-9/12 lg:w-10/12'>
+          <DialogHeader>
+            <DialogTitle>{t("quotes.catalog_picker_dialog.title")}</DialogTitle>
+            <DialogDescription>{t("quotes.catalog_picker_dialog.description")}</DialogDescription>
+          </DialogHeader>
+          <DataTableProvider syncWithLocation={false} initialPageSize={5}>
+            <CatalogPickerDataTable onSelect={onSelect} />
+          </DataTableProvider>
+
+          <DialogFooter>
+            <Button type='submit' onClick={() => onOpenChange(false)}>
+              {t("common.close")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
-    <Dialog modal open={isOpen} onOpenChange={onOpenChange}>
+    <Drawer open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className='w-8/12 max-w-full'>
+      <DrawerContent>
-        <DialogHeader>
+        <DrawerHeader className='text-left'>
-          <DialogTitle>{t("quotes.catalog_picker_dialog.title")}</DialogTitle>
+          <DrawerTitle>{t("quotes.catalog_picker_dialog.title")}</DrawerTitle>
-          <DialogDescription>{t("quotes.catalog_picker_dialog.description")}</DialogDescription>
+          <DrawerDescription>{t("quotes.catalog_picker_dialog.description")}</DrawerDescription>
-        </DialogHeader>
+        </DrawerHeader>
         <DataTableProvider syncWithLocation={false} initialPageSize={5}>
           <CatalogPickerDataTable onSelect={onSelect} />
         </DataTableProvider>
-
+        <DrawerFooter className='pt-2'>
-        <DialogFooter>
+          <DrawerClose asChild>
-          <Button type='submit' onClick={() => onOpenChange(false)}>
+            <Button variant='outline'>{t("common.close")}</Button>
-            {t("common.close")}
+          </DrawerClose>
-          </Button>
+        </DrawerFooter>
-        </DialogFooter>
+      </DrawerContent>
-      </DialogContent>
+    </Drawer>
-    </Dialog>
   );
 };

client/src/app/quotes/components/editors/QuoteDetailsCardEditor.tsx

@@ -203,7 +203,7 @@ export const QuoteDetailsCardEditor = ({
         unit_price: article.retail_price,
       });
       toast({
-        title: "Artículo del catálog añadido:",
+        title: t("quotes.catalog_picker_dialog.toast_article_added"),
         description: article.description,
       });
     },

client/src/locales/en.json

@@ -192,7 +192,8 @@
       },
       "catalog_picker_dialog": {
         "title": "Select catalog items",
-        "description": "To complete your quote, you can add items from the catalog."
+        "description": "To complete your quote, you can add items from the catalog.",
+        "toast_article_added": "Catalog item added:"
       },
       "status": {
         "draft": "Draft"

client/src/locales/es.json

@@ -188,7 +188,8 @@
       },
       "catalog_picker_dialog": {
         "title": "Seleccionar artículos del catálogo",
-        "description": "Para rellenar su cotización, puede añadir artículos del catálogo."
+        "description": "Para rellenar su cotización, puede añadir artículos del catálogo.",
+        "toast_article_added": "Artículo del catálogo añadido:"
       },
       "status": {
         "draft": "Borrador"

client/src/ui/index.ts

@@ -15,6 +15,7 @@ export * from "./collapsible";
 export * from "./command";
 export * from "./context-menu";
 export * from "./dialog";
+export * from "./drawer";
 export * from "./dropdown-menu";
 export * from "./form";
 export * from "./hover-card";
@@ -43,4 +44,3 @@ export * from "./toaster";
 export * from "./toggle";
 export * from "./toggle-group";
 export * from "./tooltip";
-

client/src/ui/toaster.tsx

@@ -17,7 +17,7 @@ export function Toaster() {
         return (
           <Toast key={id} {...props}>
             <div className='grid gap-1'>
-              {title && <ToastTitle>º{title}</ToastTitle>}
+              {title && <ToastTitle>{title}</ToastTitle>}
               {description && <ToastDescription>{description}</ToastDescription>}
             </div>
             {action}