, Correçoes UX

2026-08-28 16:14:38 -03:00
parent 19a0c7a302
commit 0e57e48214
7 changed files with 126 additions and 16 deletions
--- a/app/views/admin/romaneios/_controles.html.erb
+++ b/app/views/admin/romaneios/_controles.html.erb
@@ -5,10 +5,16 @@
  <div class="grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_minmax(0,280px)] gap-3">
    <div>
      <label class="block text-sm font-medium text-gray-300 mb-1.5">Buscar nesta folha</label>
-      <div class="flex gap-2">
+      <%# `min-w-0` no input é o que impede rolagem lateral no celular: um <input>
+          tem largura intrínseca (~20 caracteres) e `flex-1` NÃO encolhe abaixo
+          dela, porque o `min-width` padrão de um item flex é `auto`. Com o botão
+          ao lado, o par estourava para 487px numa tela de 393px e levava a página
+          junto. O `flex-wrap` é a segunda rede: em tela muito estreita o botão
+          desce em vez de espremer o campo. %>
+      <div class="flex flex-wrap gap-2">
        <input type="search" placeholder="NF, nome ou bairro/rua…"
               data-romaneio-target="busca" data-action="input->romaneio#filtrar"
-               class="flex-1 bg-[#1a1a1a] border border-white/10 rounded-xl px-3 py-3 text-white
+               class="flex-1 min-w-0 bg-[#1a1a1a] border border-white/10 rounded-xl px-3 py-3 text-white
                      placeholder-gray-600 focus:outline-none focus:border-orange-500 min-h-[48px]">
        <%# Rótulo que descreve o que o controle faz (diretriz 2): limpa a BUSCA,
            não o romaneio. %>
--- a/app/views/admin/romaneios/_veiculos.html.erb
+++ b/app/views/admin/romaneios/_veiculos.html.erb
@@ -4,10 +4,29 @@
    paradas cada um tem, que é justamente a conferência que ele faz antes de
    mandar imprimir.

-    Adapta ao dispositivo (diretriz 3): no celular vira faixa horizontal, porque
-    72 itens empilhados empurrariam a tabela para fora da primeira tela; no
-    desktop é coluna com rolagem própria, do lado da tabela. %>
-<div class="bg-[#111] border border-white/5 rounded-2xl p-4 space-y-3">
+    ── NO CELULAR É UM BLOCO RECOLHIDO (diretriz 3) ───────────────────────────
+    Aberto, este painel tem os 72 carros mais o campo de motorista e três botões:
+    media 1.160px de altura e empurrava a EDIÇÃO — busca, campo PLANO e a tabela
+    de paradas — para 1.330px e 1.533px de rolagem, ou seja, duas telas abaixo do
+    que o operador foi fazer ali. Medido em 28/08/2026 no iPhone.
+
+    Recolhido, o <summary> mostra o que importa de relance (carro atual e quantas
+    paradas) e a edição sobe para a primeira tela. Um toque abre a lista inteira.
+
+    NO DESKTOP NADA MUDA: o <summary> some (`lg:hidden`) e o conteúdo é forçado a
+    aparecer com `lg:block`, que vence o "esconder" nativo do <details> fechado —
+    continua a coluna sempre aberta ao lado da tabela. %>
+<details class="bg-[#111] border border-white/5 rounded-2xl overflow-hidden">
+  <summary class="lg:hidden cursor-pointer list-none min-h-[56px] px-4 py-3 flex items-center gap-3
+                  text-white hover:bg-white/5">
+    <span class="font-semibold truncate"><%= @veiculo %></span>
+    <span class="text-xs px-2 py-0.5 rounded-lg bg-white/5 text-gray-400 shrink-0">
+      <%= @romaneio.contagem_por_veiculo[@veiculo].to_i %> paradas
+    </span>
+    <span class="ml-auto text-xs text-orange-400 shrink-0">trocar veículo</span>
+  </summary>
+
+  <div class="lg:block p-4 space-y-3">
  <div class="flex items-center justify-between">
    <h2 class="text-white font-semibold text-sm">Veículos</h2>
    <span class="text-xs text-gray-500"><%= @veiculos.size %> no plano</span>
@@ -108,4 +127,5 @@
      </span>
    <% end %>
  </div>
-</div>
+  </div>
+</details>
--- a/app/views/consolidacoes/arquivadas.html.erb
+++ b/app/views/consolidacoes/arquivadas.html.erb
@@ -1,7 +1,9 @@
 <%# app/views/consolidacoes/arquivadas.html.erb %>
 <% content_for :title, 'Consolidações arquivadas' %>

-<div class="flex items-center justify-between mb-6">
+<%# flex-wrap pelo mesmo motivo do cabeçalho de consolidacoes/index: título longo
+    mais botão não cabem na largura de um celular e esticariam a página. %>
+<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
  <h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :arquivadas, espaco: false %> Consolidações arquivadas</h1>
  <%= link_to rotulo(:voltar, 'Voltar às ativas', cor: nil), consolidacoes_path,
      class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-lg min-h-[48px] flex items-center' %>
--- a/app/views/consolidacoes/index.html.erb
+++ b/app/views/consolidacoes/index.html.erb
@@ -3,9 +3,14 @@

 <div data-controller="nota-avulsa"
     data-nota-avulsa-buscar-url-value="<%= buscar_nf_consolidacoes_path %>">
-  <div class="flex items-center justify-between mb-6">
+  <%# `flex-wrap` nos DOIS níveis: no celular o título mais os três botões
+      ("Arquivadas", "Nota avulsa", "+ Nova Consolidação") somam mais de 450px e
+      não cabem nos 393px da tela. Sem a quebra, eles esticavam a PÁGINA INTEIRA
+      para 732px e tudo — incluindo a lista de consolidações — passava a exigir
+      rolagem lateral. Medido em 28/08/2026 no iPhone. %>
+  <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
    <h1 class="text-2xl font-bold text-white flex items-center gap-2"><%= icone :consolidacoes, espaco: false %> Consolidações</h1>
-    <div class="flex gap-2">
+    <div class="flex flex-wrap gap-2">
      <%= link_to rotulo(:arquivadas, 'Arquivadas', cor: nil), arquivadas_consolidacoes_path,
          class: 'text-gray-400 hover:text-white border border-[#2a2a2a] px-4 py-3 rounded-lg min-h-[48px] flex items-center transition-colors' %>
      <% if policy(Consolidacao).create? %>
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -584,7 +584,11 @@
        info.textContent = de + '–' + ate + ' de ' + linhas.length + ' ' + rotulo;
        abas.querySelectorAll('button').forEach(function (b) {
          const ativa = Number(b.dataset.pagina) === p;
-          b.className = 'px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors ' +
+          // min-w/min-h 44px: são os alvos de toque mais apertados do sistema
+          // (medidos 63 abaixo de 44px no celular em 28/08/2026) e ficam lado a
+          // lado, então errar o número da página é fácil com o dedo em movimento.
+          b.className = 'min-w-[44px] min-h-[44px] px-3 py-1.5 rounded-lg text-xs font-semibold ' +
+            'inline-flex items-center justify-center transition-colors ' +
            (ativa ? 'bg-[#f97316] text-white'
                   : 'bg-[#0a0a0a] text-gray-400 border border-white/5 hover:text-white');
        });
--- a/app/views/layouts/_navbar.html.erb
+++ b/app/views/layouts/_navbar.html.erb
@@ -6,19 +6,31 @@
     class="fixed inset-0 bg-black/70 z-30 hidden md:hidden"
     onclick="toggleSidebar()"></div>

-<%# Sidebar %>
+<%# Sidebar
+    `flex flex-col` NÃO é decoração: é o que faz o menu ROLAR. O <nav> do meio
+    pede `flex-1 overflow-y-auto`, e `flex-1` só tem efeito dentro de um flex
+    container — sem isto o <nav> crescia com o conteúdo, nunca ganhava altura
+    limitada, o `overflow-y-auto` nunca ativava e a lista simplesmente
+    transbordava o painel sem barra de rolagem.
+
+    Caso real (28/08/2026, iPhone 393×852): 1.194px de menu dentro de 852px de
+    tela, com o último item terminando 324px ABAIXO da borda. Contatos, Grupos,
+    Envios, Eventos, Variáveis, WhatsApp e o **Sair** ficavam inalcançáveis no
+    celular — e no notebook de tela baixa também. %>
 <aside id="sidebar"
       class="fixed top-0 left-0 h-full w-64 bg-[#111111] border-r border-[#2a2a2a] z-40
+              flex flex-col
              transform -translate-x-full md:translate-x-0 transition-transform duration-300">

-  <%# Logo / Marca %>
-  <div class="px-4 py-5 border-b border-[#2a2a2a]">
+  <%# Logo / Marca — `shrink-0`: num flex-col, um bloco de altura fixa ainda é
+      espremido quando o irmão rolável é grande demais. %>
+  <div class="px-4 py-5 border-b border-[#2a2a2a] shrink-0">
    <%= image_tag '/logo-reem.png', alt: 'Reem Transporte',
        class: 'h-14 w-auto mx-auto object-contain' %>
  </div>

  <%# Usuário logado %>
-  <div class="px-6 py-4 border-b border-[#2a2a2a]">
+  <div class="px-6 py-4 border-b border-[#2a2a2a] shrink-0">
    <p class="text-xs text-gray-500 mb-1">Logado como</p>
    <p class="text-white font-semibold text-sm truncate"><%= current_user.nome_display %></p>
    <span class="inline-block mt-1 px-2 py-0.5 text-xs rounded-full
@@ -114,7 +126,9 @@
  </nav>

  <%# Footer da sidebar — sair %>
-  <div class="px-6 py-4 border-t border-[#2a2a2a]">
+  <%# Rodapé com o "Sair": shrink-0 para ele ficar ancorado embaixo, sempre
+      visível, em vez de rolar junto com a lista. %>
+  <div class="px-6 py-4 border-t border-[#2a2a2a] shrink-0">
    <%= link_to destroy_user_session_path, data: { turbo_method: :delete, turbo_confirm: 'Deseja sair?' },
        class: "flex items-center gap-2 text-gray-400 hover:text-red-400 text-sm transition-colors" do %>
      <%= icone :sair, cor: nil, tamanho: 'w-5 h-5' %> Sair