From 3f5829c816761909b56f3864d503b0fceb7957348e55bb76516dcaf2e9d0d034 Mon Sep 17 00:00:00 2001
From: victor <victor@paravatti.com.br>
Date: Mon, 29 Jun 2026 11:24:21 -0300
Subject: [PATCH] =?UTF-8?q?Atualiza=C3=A7=C3=A3o=20dp=20Read.me=20com=20os?=
 =?UTF-8?q?=20detalhes=20do=20que=20foi=20corrigido=20na=20responsividade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 32a5079..3933456 100644
--- a/README.md
+++ b/README.md
@@ -944,7 +944,7 @@ app/javascript/controllers/validacao_controller.js   # value veiculo, chips, cla
 
 ---
 
-<details open>
+<details>
 <summary><strong>🆕 Atualização 26/06/2026 — Entrega de termo, caixa de ferramentas, gestão de motoristas e UX da Validação</strong></summary>
 
 Pacote de implantação focado em **agilizar a precificação** e **dar feedback direto** ao usuário no
@@ -1032,3 +1032,33 @@ docker-compose exec app bundle exec rails db:migrate
 
 </details>
 
+<details open>
+<summary><strong>🔧 Atualização 29/06/2026 — Responsividade da tela de Validar (telas menores)</strong></summary>
+
+Correção da **quebra de layout** dos cards de NF na tela **Passo 2 (Validar)** em telas pequenas e
+em tablets, reportada nos prints `Imagens para correção/Imagem colada (16).png` e `(17).png`.
+
+### 🔴 Bugs corrigidos
+- **Botão "Extra" cortado no celular** *(print 16)* — a fileira dos 5 pilares
+  (`Normal · Retirada · Bônus · Desc. · Extra`) usava `flex gap-1.5` **sem `flex-wrap`**, então não
+  quebrava linha e o último botão estourava a borda do card. Agora os botões **quebram para a linha
+  de baixo** quando não cabem.
+- **Botões sobrepondo o texto da nota no tablet** *(print 17, ~800px)* — o card virava layout em
+  linha já no breakpoint `md` (768px), **exatamente onde a sidebar de 256px passa a aparecer**
+  (`md:ml-64`), espremendo o conteúdo. Sem `flex-wrap`, os botões transbordavam por cima do
+  endereço/data/veículo. O ponto de virada foi movido para `lg` (1024px), onde há largura real.
+
+### ⚙️ Como funciona (técnico)
+- `app/views/consolidacao_entregas/validar.html.erb`:
+  - Card da entrega: `flex flex-col md:flex-row md:items-center` → **`flex flex-col lg:flex-row
+    lg:items-center`** (empilha no celular **e no tablet**; em linha só no desktop).
+  - Grupo de toggles: `flex gap-1.5` → **`flex flex-wrap gap-1.5 lg:shrink-0`** (`flex-wrap` impede
+    o transbordo; `lg:shrink-0` mantém os botões inteiros no desktop, deixando o texto da nota
+    truncar em vez de espremer os botões).
+- Faixa crítica resolvida (768–1023px): antes acumulava *sidebar visível + layout em linha + botões
+  sem quebra*. Agora **< 1024px** o card fica empilhado com botões em `flex-wrap` e **≥ 1024px** vai
+  para linha com truncamento do texto.
+- Sem migration e sem mudança de JS/controller — alteração **somente de classes Tailwind** na view.
+
+</details>
+