From 678be6170f024518be9ff003c90769a16b64226f Mon Sep 17 00:00:00 2001
From: Frederico Castro <frederico.castro@capes.gov.br>
Date: Wed, 17 Dec 2025 17:22:24 -0300
Subject: [PATCH] =?UTF-8?q?fix(ui):=20corrigir=20exibi=C3=A7=C3=A3o=20de?=
 =?UTF-8?q?=20posi=C3=A7=C3=A3o=20e=20status=20no=20ranking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajustar caixa do rank para crescer automaticamente com números grandes
- Reduzir fonte proporcionalmente para posições com 4-7 dígitos
- Exibir STATUS com valor padrão '-' quando consultoria não existe
- Ajustar responsividade para telas menores
---
 frontend/src/components/ConsultorCard.css | 47 +++++++++++++++++++++--
 frontend/src/components/ConsultorCard.jsx | 26 ++++++-------
 2 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/ConsultorCard.css b/frontend/src/components/ConsultorCard.css
index 532c0cd..9283dcb 100644
--- a/frontend/src/components/ConsultorCard.css
+++ b/frontend/src/components/ConsultorCard.css
@@ -35,7 +35,7 @@
 .card-main {
   position: relative;
   display: grid;
-  grid-template-columns: 32px 70px 1fr auto;
+  grid-template-columns: 32px auto 1fr auto;
   align-items: center;
   gap: 1.35rem;
   padding: 1.25rem 1.6rem;
@@ -106,17 +106,40 @@
 }
 
 .rank {
-  width: 62px;
+  min-width: 62px;
+  width: auto;
   height: 62px;
   display: grid;
   place-items: center;
-  font-size: 1.35rem;
   font-weight: 700;
   color: var(--text);
   border-radius: 14px;
   border: 1px solid var(--stroke);
   background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
   text-shadow: 0 2px 12px rgba(0,0,0,0.35);
+  padding: 0 10px;
+}
+
+.rank-number {
+  font-size: 1.35rem;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.rank-number.rank-digits-4 {
+  font-size: 1.1rem;
+}
+
+.rank-number.rank-digits-5 {
+  font-size: 0.9rem;
+}
+
+.rank-number.rank-digits-6 {
+  font-size: 0.75rem;
+}
+
+.rank-number.rank-digits-7 {
+  font-size: 0.65rem;
 }
 
 .rank-1 {
@@ -443,10 +466,26 @@
 
 @media (max-width: 900px) {
   .card-main {
-    grid-template-columns: 28px 56px 1fr;
+    grid-template-columns: 28px auto 1fr;
     align-items: flex-start;
   }
 
+  .rank {
+    min-width: 56px;
+    height: 56px;
+    padding: 0 8px;
+  }
+
+  .rank-number {
+    font-size: 1.1rem;
+  }
+
+  .rank-number.rank-digits-5,
+  .rank-number.rank-digits-6,
+  .rank-number.rank-digits-7 {
+    font-size: 0.85rem;
+  }
+
   .card-stats {
     width: 100%;
     justify-content: space-between;
diff --git a/frontend/src/components/ConsultorCard.jsx b/frontend/src/components/ConsultorCard.jsx
index 4f1d348..1c931f4 100644
--- a/frontend/src/components/ConsultorCard.jsx
+++ b/frontend/src/components/ConsultorCard.jsx
@@ -233,7 +233,11 @@ const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecio
           />
           <span className="checkmark"></span>
         </div>
-        <div className={`rank ${getRankClass(consultor.posicao || consultor.rank)}`}>#{consultor.posicao || consultor.rank}</div>
+        <div className={`rank ${getRankClass(consultor.posicao || consultor.rank)}`}>
+          <span className={`rank-number rank-digits-${String(consultor.posicao || consultor.rank).length}`}>
+            #{consultor.posicao || consultor.rank}
+          </span>
+        </div>
 
         <div className="card-info">
           <div className="consultant-name">
@@ -262,18 +266,14 @@ const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecio
         </div>
 
         <div className="card-stats">
-          {consultoria && (
-            <>
-              <div className="stat" title={`Codigo: ${consultoria.codigo}`}>
-                <div className="stat-value">{consultoria.codigo?.replace('CONS_', '')}</div>
-                <div className="stat-label">Status</div>
-              </div>
-              <div className="stat" title={`${consultoria.anos_consecutivos || 0} anos consecutivos`}>
-                <div className="stat-value">{consultoria.anos_consecutivos || 0}</div>
-                <div className="stat-label">Anos Consec.</div>
-              </div>
-            </>
-          )}
+          <div className="stat" title={consultoria ? `Codigo: ${consultoria.codigo}` : 'Sem consultoria ativa'}>
+            <div className="stat-value">{consultoria?.codigo?.replace('CONS_', '') || '-'}</div>
+            <div className="stat-label">Status</div>
+          </div>
+          <div className="stat" title={`${consultoria?.anos_consecutivos || 0} anos consecutivos`}>
+            <div className="stat-value">{consultoria?.anos_consecutivos || 0}</div>
+            <div className="stat-label">Anos Consec.</div>
+          </div>
           <div className="stat">
             <div className="score-value">{pontuacaoTotal}</div>
             <div className="stat-label">Score</div>