reverted the caraosel affect. Didn't like it.

src/App.js

@@ -234,7 +234,7 @@ function App() {
         {!isAuthReady && !error && <p>Authenticating...</p>} 
       </main>
        <footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
-        TTRPG Initiative Tracker v0.1.22 
+        TTRPG Initiative Tracker v0.1.19 
       </footer>
     </div>
   );
@@ -932,7 +932,7 @@ function DisplayView() {
   const [encounterError, setEncounterError] = useState(null);
   const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
   const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false); 
-  const currentTurnRef = useRef(null); 
+  // currentTurnRef removed as we are reverting the scroll-to-view logic for now
 
   useEffect(() => {
     if (!db) {
@@ -994,14 +994,7 @@ function DisplayView() {
     };
   }, [activeDisplayData, isLoadingActiveDisplay]); 
 
-  useEffect(() => {
+  // useEffect for scrollIntoView removed
-    if (currentTurnRef.current) {
-      currentTurnRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center', 
-      });
-    }
-  }, [activeEncounterData?.currentTurnParticipantId, activeEncounterData?.participants]); // Also re-scroll if participants list changes (e.g. focused view)
 
   if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
       return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
@@ -1023,13 +1016,14 @@ function DisplayView() {
 
   const { name, participants, round, currentTurnParticipantId, isStarted } = activeEncounterData;
   
-  let allOrderedActiveParticipants = [];
+  // Reverted to showing all active participants, no focused view logic
+  let participantsToRender = [];
   if (participants) {
     if (isStarted && activeEncounterData.turnOrderIds?.length > 0 ) {
-      allOrderedActiveParticipants = activeEncounterData.turnOrderIds
+      participantsToRender = activeEncounterData.turnOrderIds
           .map(id => participants.find(p => p.id === id)).filter(p => p && p.isActive); 
     } else {
-      allOrderedActiveParticipants = [...participants].filter(p => p.isActive)
+      participantsToRender = [...participants].filter(p => p.isActive)
           .sort((a, b) => {
               if (a.initiative === b.initiative) {
                   const indexA = participants.findIndex(p => p.id === a.id);
@@ -1041,27 +1035,6 @@ function DisplayView() {
     }
   }
 
-  let participantsToRender = allOrderedActiveParticipants;
-  const FOCUSED_VIEW_THRESHOLD = 7; 
-  const ITEMS_AROUND_CURRENT = 3;   // Show 3 before and 3 after current = 7 total in focused view
-  let inFocusedView = false;
-
-  if (isStarted && allOrderedActiveParticipants.length >= FOCUSED_VIEW_THRESHOLD) {
-    inFocusedView = true;
-    const currentIndex = allOrderedActiveParticipants.findIndex(p => p.id === currentTurnParticipantId);
-    if (currentIndex !== -1) {
-      const focusedList = [];
-      for (let i = -ITEMS_AROUND_CURRENT; i <= ITEMS_AROUND_CURRENT; i++) {
-        const listLength = allOrderedActiveParticipants.length;
-        const actualIndex = (currentIndex + i + listLength) % listLength;
-        focusedList.push(allOrderedActiveParticipants[actualIndex]);
-      }
-      participantsToRender = focusedList;
-    } else {
-        participantsToRender = allOrderedActiveParticipants.slice(0, ITEMS_AROUND_CURRENT * 2 + 1);
-    }
-  }
-
 
   const displayStyles = campaignBackgroundUrl ? {
     backgroundImage: `url(${campaignBackgroundUrl})`,
@@ -1079,17 +1052,18 @@ function DisplayView() {
     >
       <div className={campaignBackgroundUrl ? 'bg-slate-900 bg-opacity-75 p-4 md:p-6 rounded-lg' : ''}> 
         <h2 className="text-4xl md:text-5xl font-bold text-center text-amber-400 mb-2">{name}</h2>
-        {isStarted && <p className="text-2xl text-center text-sky-300 mb-2">Round: {round}</p>}
+        {isStarted && <p className="text-2xl text-center text-sky-300 mb-6">Round: {round}</p>} {/* Adjusted margin */}
-        {inFocusedView && <p className="text-sm text-center text-slate-400 mb-4">(Focused View: {participantsToRender.length} of {allOrderedActiveParticipants.length} active)</p>}
+        {/* Focused view indicator removed */}
         {!isStarted && participants?.length > 0 && <p className="text-2xl text-center text-slate-400 mb-6">Awaiting Start</p>}
         {!isStarted && (!participants || participants.length === 0) && <p className="text-2xl text-slate-500 mb-6">No participants.</p>}
         {participantsToRender.length === 0 && isStarted && <p className="text-xl text-slate-400">No active participants.</p>}
         
-        <div className="space-y-4 max-w-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 180px)'}}> {/* Adjusted maxHeight */}
+        {/* Reverted to simpler list container */}
+        <div className="space-y-4 max-w-3xl mx-auto"> 
           {participantsToRender.map(p => (
             <div 
               key={p.id} 
-              ref={p.id === currentTurnParticipantId ? currentTurnRef : null} 
+              // ref removed
               className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}
             >
               <div className="flex justify-between items-center mb-2">