, Correçoes UX

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