, Correçoes UX

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. %>

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>