joelson
/
Portalweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

fix(ui): improve searchbar responsiveness on mobile #7

Merged
joelson merged 2 commits from fix/searchbar-mobile-layout into master 2026-01-15 20:51:31 +00:00
Conversation 0 Commits 2 Files Changed 1 +9 -6
joelson commented 2026-01-15 20:50:44 +00:00
Owner
Copy Link

O que foi feito

Realizado ajuste de responsividade para garantir melhor usabilidade em telas pequenas:

  1. Campos de Data:
    • Mobile (xs): Agora empilham verticalmente (um abaixo do outro).
    • Desktop (sm+): Permanecem lado a lado.
  2. Botões de Ação:
    • Mobile (xs): Empilham verticalmente e ocupam 100% da largura (melhorando a área de toque).
    • Desktop (sm+): Permanecem alinhados horizontalmente com espaçamento correto.

Solução Técnica

  • Aplicação de flexDirection: { xs: 'column', sm: 'row' } no container de datas.
  • Ajuste no container de ações para flexDirection: { xs: 'column', sm: 'row' } e justifyContent: 'space-between'.
  • Definição de width: 100% (ou responsivo) para os botões garantirem preenchimento total no mobile.

Como Testar

  1. Acesse a tela de busca.
  2. Abra as ferramentas de desenvolvedor do navegador (F12) e alterne para o modo de dispositivo móvel (ou redimensione a janela para < 600px).
  3. Verifique se os campos de data estão um abaixo do outro.
  4. Verifique se os botões de ação estão empilhados e ocupando toda a largura da tela.
  5. Aumente a tela para tamanho desktop e garanta que o layout volta ao padrão horizontal.
### O que foi feito Realizado ajuste de responsividade para garantir melhor usabilidade em telas pequenas: 1. **Campos de Data:** * **Mobile (`xs`):** Agora empilham verticalmente (um abaixo do outro). * **Desktop (`sm+`):** Permanecem lado a lado. 2. **Botões de Ação:** * **Mobile (`xs`):** Empilham verticalmente e ocupam **100% da largura** (melhorando a área de toque). * **Desktop (`sm+`):** Permanecem alinhados horizontalmente com espaçamento correto. ### Solução Técnica * Aplicação de `flexDirection: { xs: 'column', sm: 'row' }` no container de datas. * Ajuste no container de ações para `flexDirection: { xs: 'column', sm: 'row' }` e `justifyContent: 'space-between'`. * Definição de `width: 100%` (ou responsivo) para os botões garantirem preenchimento total no mobile. ### Como Testar 1. Acesse a tela de busca. 2. Abra as ferramentas de desenvolvedor do navegador (F12) e alterne para o modo de dispositivo móvel (ou redimensione a janela para < 600px). 3. Verifique se os campos de data estão um abaixo do outro. 4. Verifique se os botões de ação estão empilhados e ocupando toda a largura da tela. 5. Aumente a tela para tamanho desktop e garanta que o layout volta ao padrão horizontal.
joelson added the
bug
 label 2026-01-15 20:50:44 +00:00
joelson self-assigned this 2026-01-15 20:50:44 +00:00
joelson added 1 commit 2026-01-15 20:50:45 +00:00
joelson added this to the Novo Portal-WEB project 2026-01-15 20:50:46 +00:00
joelson added 1 commit 2026-01-15 20:51:23 +00:00
joelson merged commit 82b5166bc0 into master 2026-01-15 20:51:31 +00:00
joelson deleted branch fix/searchbar-mobile-layout 2026-01-15 20:51:38 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
bug

Something is not working

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
help wanted

Need some help

  
invalid

Something is wrong

  
question

More information is needed

  
wontfix

This won't be fixed

No Label
bug
duplicate
enhancement
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Novo Portal-WEB
Assignees
Clear assignees
No Assignees
joelson
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: joelson/Portalweb#7
No description provided.
Delete Branch "fix/searchbar-mobile-layout"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?