refactor/#71/implement responsivity on drawer and dialog of UserProfileEditor.tsx

[LUISPINTO90]

Descripción

Refactorizar el componente UserProfileEditor.tsx para que el drawer y el dialog sean responsivos. Actualmente, en la vista horizontal de móvil, el contenido se desborda de la pantalla. Una posible solución que pensé es implementar un Scroll-area de Shadcn para mejorar la usabilidad en dispositivos móviles.

Así luce la vista con el error de responsividad horizontal:

Subtareas

• Agregar (si es que esa será la solución) el Scroll-area de Shadcn
• Modificar el componente UserProfileEditor.tsx para incluir un área de desplazamiento en el drawer y el dialog.
• Asegurar que el contenido del drawer y el dialog se ajuste correctamente en todas las resoluciones de pantalla.
• Probar el componente en diferentes dispositivos y orientaciones para garantizar que no haya desbordamientos.
• Verificar que la funcionalidad de edición de perfil siga intacta después de la refactorización.

Notas

• Para iniciar con la issue:

  • Llena el campo "Start date" de la issue.
  • git fetch origin
  • git checkout refactor/#71/responsive-drawer-and-dialog-of-user-profile-editor
  • git merge dev

• Para finalizar la issue:

  • Llenar el campo "End date" de la issue.
  • Anexar capturas de pantalla o gifs del resultado al PR.

• Asegúrate de seguir las pautas de diseño y estilo del proyecto.

Recursos útiles

• Documentación de Shadcn
• Guía de estilos con Tailwind CSS

Diseño

El diseño del componente debe ser coherente con el resto de la aplicación, manteniendo la misma estética y funcionalidad. Asegúrate de que el drawer y el dialog sean responsivos y se adapten a diferentes tamaños de pantalla. Implementa un área de desplazamiento para evitar el desbordamiento en dispositivos móviles, especialmente en vista horizontal.

Ejemplo de implementación

Puedes agregar el área de desplazamiento de Shadcn en el contenido del drawer y dialog de la siguiente manera:

import { ScrollArea } from "@/components/ui/scroll-area"; // Asegúrate de importar el componente

// Dentro del contenido del dialog y drawer
<ScrollArea className="h-full">
  {content}
</ScrollArea>