Correção de responsividade

2026-07-22 01:21:32 -03:00
parent dc1b5c1b41
commit 3dbb65efd2
3 changed files with 44 additions and 27 deletions
--- a/app/views/consolidacao_entregas/validar.html.erb
+++ b/app/views/consolidacao_entregas/validar.html.erb
@@ -24,19 +24,21 @@
    <%# basis-40: o nome não pode ser espremido até virar "P…" — se não couber
        com o resto, a linha quebra em vez de esmagar a identificação. %>
    <div class="min-w-0 flex-1 basis-40">
-      <h1 class="text-lg lg:text-xl font-bold text-white flex items-center gap-2 truncate"><%= icone :caminhao, espaco: false %> <%= @motorista %></h1>
-      <p class="text-gray-400 text-xs truncate"><%= @consolidacao.nome %> · <%= l @consolidacao.data_inicio, format: :short %> → <%= l @consolidacao.data_fim, format: :short %></p>
+      <h1 class="text-xl lg:text-2xl font-bold text-white flex items-center gap-2 truncate"><%= icone :caminhao, espaco: false %> <%= @motorista %></h1>
+      <p class="text-gray-400 text-sm truncate"><%= @consolidacao.nome %> · <%= l @consolidacao.data_inicio, format: :short %> → <%= l @consolidacao.data_fim, format: :short %></p>
    </div>

    <%# Progresso ao lado do título (em vez de um card de 70px só p/ ele). No
-        celular vai para uma linha própria, no fim, para não brigar pelo espaço. %>
-    <p class="order-last w-full text-left sm:order-none sm:w-auto sm:shrink-0 sm:text-right text-xs text-gray-300">
-      <% if @veiculos_sel.any? %><%= icone :caminhao %> <%= @veiculos_sel.join(', ') %> — <% end %>
-      <span data-validacao-target="contadorClassificadas"><%= @classificadas %></span>/<span data-validacao-target="contadorTotal"><%= @total_entregas %></span>
-      <span class="hidden sm:inline">classificadas</span>
+        celular vai para uma linha própria, no fim, para não brigar pelo espaço.
+        Números em branco/negrito: esta é a informação que o ADM confere o tempo
+        todo enquanto classifica — compactar não pode custar a leitura dela. %>
+    <p class="order-last w-full text-left sm:order-none sm:w-auto sm:shrink-0 sm:text-right text-sm text-gray-400">
+      <% if @veiculos_sel.any? %><span class="text-gray-300"><%= icone :caminhao %> <%= @veiculos_sel.join(', ') %></span> — <% end %>
+      <span class="text-white font-semibold"><span data-validacao-target="contadorClassificadas"><%= @classificadas %></span>/<span data-validacao-target="contadorTotal"><%= @total_entregas %></span></span>
+      classificadas
      <span data-validacao-target="manuaisInfo" class="<%= 'hidden' unless @manuais.positive? %> text-blue-400">·
        +<span data-validacao-target="contadorManuais"><%= @manuais %></span> manuais</span>
-      <span class="text-orange-500 font-bold ml-1" data-validacao-target="percentual"></span>
+      <span class="text-orange-500 font-bold ml-1 text-base" data-validacao-target="percentual"></span>
    </p>

    <%= link_to revisar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista),
@@ -46,9 +48,9 @@
  </div>

  <%# Barra com 2 segmentos: laranja = elegíveis classificadas · azul = manuais %>
-  <div class="w-full bg-[#0a0a0a] rounded-full h-1.5 flex overflow-hidden mb-2">
-    <div data-validacao-target="barra" class="h-1.5 bg-orange-500 transition-all duration-300" style="width: 0%"></div>
-    <div data-validacao-target="barraManuais" class="h-1.5 bg-blue-500 transition-all duration-300" style="width: 0%"></div>
+  <div class="w-full bg-[#0a0a0a] rounded-full h-2 flex overflow-hidden mb-2">
+    <div data-validacao-target="barra" class="h-2 bg-orange-500 transition-all duration-300" style="width: 0%"></div>
+    <div data-validacao-target="barraManuais" class="h-2 bg-blue-500 transition-all duration-300" style="width: 0%"></div>
  </div>

  <%# Fechar por veículo — filtra a tela por carro, mostra o estado (pronto/
--- a/app/views/consolidacoes/index.html.erb
+++ b/app/views/consolidacoes/index.html.erb
@@ -71,28 +71,37 @@
 </div>

 <%# ── Filtros ──────────────────────────────────────────── %>
+<%# Filtros em flex-wrap, NÃO em grade de 6 colunas fixas.
+    Motivo: os breakpoints do Tailwind (md:, lg:…) enxergam a JANELA, mas o
+    conteúdo perde 256px para a sidebar (`main.md:ml-64`). A mesma janela de
+    1280px tem duas larguras conforme o menu esteja aberto ou recolhido, então
+    `md:grid-cols-6` espremia os campos a ~150px e o texto do botão "Filtrar"
+    vazava para fora do fundo. Com flex-wrap + largura mínima, cada campo mantém
+    tamanho legível e a linha quebra sozinha conforme o espaço REAL. %>
 <%= form_with url: consolidacoes_path, method: :get,
-    class: 'bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-4 mb-6 grid grid-cols-1 md:grid-cols-6 gap-3' do |f| %>
+    class: 'bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-4 mb-6 flex flex-wrap items-center gap-3' do |f| %>
  <%= f.text_field :nome, value: params[:nome], placeholder: 'Buscar por nome…',
-      class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5 focus:border-orange-500 focus:outline-none' %>
+      class: 'flex-1 basis-48 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5 focus:border-orange-500 focus:outline-none' %>

  <%= f.select :status,
      options_for_select([['Todos os status', ''], ['Rascunho', 'rascunho'], ['Finalizada', 'finalizada']], params[:status]),
-      {}, class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
+      {}, class: 'flex-1 basis-40 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>

  <%= f.select :pagamento,
      options_for_select([['Pagamento (todos)', ''], ['Pagas', 'pago'], ['Parciais', 'parcial'], ['Pendentes', 'pendente']], params[:pagamento]),
-      {}, class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
+      {}, class: 'flex-1 basis-44 min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>

  <%= f.date_field :inicio, value: params[:inicio],
-      class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
+      class: 'flex-1 basis-36 max-w-[13rem] min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>

  <%= f.date_field :fim, value: params[:fim],
-      class: 'bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>
+      class: 'flex-1 basis-36 max-w-[13rem] min-w-0 bg-[#0a0a0a] border border-[#2a2a2a] text-white rounded-lg px-3 py-2.5' %>

-  <div class="flex gap-2">
-    <%= f.submit 'Filtrar', class: 'flex-1 bg-orange-500 hover:bg-orange-600 text-black font-bold rounded-lg cursor-pointer' %>
-    <%= link_to 'Limpar', consolidacoes_path, class: 'px-4 py-2.5 text-gray-400 hover:text-white border border-[#2a2a2a] rounded-lg' %>
+  <%# shrink-0 + whitespace-nowrap: os botões nunca são espremidos a ponto de
+      cortar o texto — se faltar espaço, a linha quebra e eles descem inteiros. %>
+  <div class="flex gap-2 shrink-0">
+    <%= f.submit 'Filtrar', class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold rounded-lg cursor-pointer px-5 py-2.5 whitespace-nowrap' %>
+    <%= link_to 'Limpar', consolidacoes_path, class: 'px-4 py-2.5 text-gray-400 hover:text-white border border-[#2a2a2a] rounded-lg whitespace-nowrap' %>
  </div>
 <% end %>

--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -117,15 +117,21 @@
    </form>
  </div>

-  <%# CARDS GRANDES — KPIs %>
-  <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
+  <%# CARDS GRANDES — KPIs
+      auto-fit + minmax em vez de `xl:grid-cols-5`: o breakpoint xl olha a JANELA
+      (1280px), mas com a sidebar aberta sobram ~960px de conteúdo — 5 colunas de
+      ~176px, e "R$ 82.692,00" em text-4xl era cortado pelo overflow-hidden do
+      card. Com auto-fit o número de colunas cai sozinho quando o menu está
+      aberto e sobe quando ele é recolhido, sem depender de breakpoint. %>
+  <div class="grid grid-cols-[repeat(auto-fit,minmax(13rem,1fr))] gap-4">

-    <%# Card 1: Valor estimado %>
-    <div class="sm:col-span-2 xl:col-span-1 bg-[#f97316] rounded-2xl p-6 relative overflow-hidden">
+    <%# Card 1: Valor estimado — sempre 2 faixas: é o maior número da tela %>
+    <div class="sm:col-span-2 bg-[#f97316] rounded-2xl p-6 relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-orange-400/20 to-transparent"></div>
      <div class="relative">
        <p class="text-orange-100 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :dinheiro, cor: nil, espaco: false %> Valor Estimado</p>
-        <p class="text-4xl font-black text-white mb-1">
+        <%# break-words: se ainda faltar espaço, quebra a linha em vez de cortar %>
+        <p class="text-3xl lg:text-4xl font-black text-white mb-1 break-words">
          <%= moeda(@valor_estimado) %>
        </p>
        <p class="text-orange-200 text-sm">
@@ -178,7 +184,7 @@
  </div>

  <%# KPIs FINANCEIROS (consolidações finalizadas, já com filtro de operação) %>
-  <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+  <div class="grid grid-cols-[repeat(auto-fit,minmax(13rem,1fr))] gap-4">
    <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
      <p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :dinheiro, espaco: false %> Custo total</p>
      <p class="text-3xl font-black text-white"><%= moeda(@fin_custo_total) %></p>
@@ -445,7 +451,7 @@
  <% if @por_operacao.any? %>
    <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
      <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :operacao, espaco: false %> Entregas por Local</h2>
-      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+      <div class="grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3">
        <% total_op = @por_operacao.values.sum.to_f %>
        <% @por_operacao.each do |local, qtd| %>
          <div class="bg-[#0a0a0a] rounded-xl p-4 border border-white/5 text-center">