Ajustar responsividade na página de organizações

[TalysonSoares]

Problemas de Responsividade na Página de Organizações

A página de organizações apresenta os seguintes problemas de responsividade:

1. Seção "Visualizar como"
   • As opções desta seção estão em coluna no fim da tela.
   • Talvez essa parte esteja criando um scroll horizontal
   • Sugestão: Organizar as opções em linha, alinhadas do início ao fim da tela.

2. Margens laterais

   • A margem entre os cards e as bordas laterais da tela está excessiva. Diminuir para melhorar o uso do espaço.
   

3. Proporção dos cards de agente

   • Ajustar as dimensões para garantir um layout responsivo.

4. Botão de filtro

   • O botão de filtro está desproporcional. Ajustar o tamanho para harmonizar com o layout.

5. Vazamento de conteúdo com o filtro aberto

   • Quando o filtro está aberto:
     • Os cards vazam para a direita, criando um scroll lateral.
     • O filtro fica atrás dos cards, impossibilitando seu fechamento.

6. Breakpoints no CSS
   • Definir e implementar pelo menos dois breakpoints no CSS da página de agentes para tratar tamanhos de tela distintos.
   • Sugestão de breakpoints:
     • Tablet: 768px
     • Mobile: 480px

Checklist de Ajustes na Página de organizações

• Organizar as opções da seção "Visualizar como" em linha, alinhadas do início ao fim da tela.
• Corrigir e eliminar o scroll horizontal.
• Reduzir a margem lateral entre os cards e as bordas da tela.
• Ajustar a proporção dos cards de agente para um layout responsivo.
• Ajustar o tamanho do botão de filtro.
• Corrigir o vazamento dos cards quando o filtro está aberto, eliminando o scroll lateral.
• Garantir que o filtro não fique atrás dos cards, permitindo seu fechamento.
• Implementar breakpoints no CSS:
  • Tablet: 768px
  • Mobile: 480px