att

Desligamento/wcm/widget/wddesligamentoranking/src/main/webapp/resources/css/wddesligamentoranking.css

@@ -20,6 +20,7 @@
 .wdr-header {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: 12px;
     justify-content: space-between;
     margin-bottom: 16px;
@@ -73,6 +74,7 @@
     font-weight: 600;
     padding: 4px 10px;
     transition: background 0.15s, color 0.15s;
+    white-space: nowrap;
 }
 
 .wdr-period-btn--active {
@@ -85,7 +87,8 @@
 .wdr-kpis {
     display: grid;
     gap: 10px;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    /* auto-fill responde à largura do container, não do viewport */
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     margin-bottom: 16px;
 }
 
@@ -307,17 +310,13 @@
 .wdr-badge--canceled  { background: #fee2e2; color: #991b1b; }
 
 /* ── Responsive ───────────────────────────────────────────────── */
+/* .wdr-kpis usa auto-fill — quebra sozinho pelo container */
+/* .wdr-header já tem flex-wrap: wrap */
 @media (max-width: 768px) {
-    .wdr-kpis { grid-template-columns: repeat(2, 1fr); }
     .wdr-bar-wrap { display: none; }
     .wdr-breakdown { display: none; }
 }
 
-@media (max-width: 480px) {
-    .wdr-kpis { grid-template-columns: 1fr; }
-    .wdr-header { flex-wrap: wrap; }
-}
-
 /* ── Pagination ───────────────────────────────────────────────── */
 .wdr-pagination { margin-top: 4px; }