From 9d2a300df50e223a831f10c6a12cc071a79ebff0 Mon Sep 17 00:00:00 2001
From: Frederico Castro <frederico.castro@capes.gov.br>
Date: Sat, 13 Dec 2025 05:08:06 -0300
Subject: [PATCH] Quando o usuario busca um onsultor, o sistema agora rola
 automaticamente ate o item destacado, centralizando-o na tela.

---
 frontend/src/components/ConsultorCard.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ConsultorCard.jsx b/frontend/src/components/ConsultorCard.jsx
index 05cbc54..2c3506e 100644
--- a/frontend/src/components/ConsultorCard.jsx
+++ b/frontend/src/components/ConsultorCard.jsx
@@ -1,8 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import './ConsultorCard.css';
 
 const ConsultorCard = ({ consultor, highlight }) => {
   const [expanded, setExpanded] = useState(false);
+  const cardRef = useRef(null);
+
+  useEffect(() => {
+    if (highlight && cardRef.current) {
+      setTimeout(() => {
+        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }, 100);
+    }
+  }, [highlight]);
 
   const getRankClass = (rank) => {
     if (rank === 1) return 'rank-1';
@@ -20,7 +29,7 @@ const ConsultorCard = ({ consultor, highlight }) => {
   const { consultoria } = consultor;
 
   return (
-    <div className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''}`} onClick={() => setExpanded(!expanded)}>
+    <div ref={cardRef} className={`ranking-card ${expanded ? 'expanded' : ''} ${highlight ? 'highlight' : ''}`} onClick={() => setExpanded(!expanded)}>
       <div className="card-main">
         <div className={`rank ${getRankClass(consultor.rank)}`}>#{consultor.rank}</div>