Now scrolls the active card into view by default. Active means first unlocked card?

src/views/BudgetCardView.jsx

@@ -2,9 +2,16 @@ import BudgetPeriodCard from "./BudgetPeriodCard";
 import './BudgetCardView.scss';
 
 const BudgetCardView = ({budgetPeriods}) => {
+    const activePeriod = budgetPeriods.find(p => !p.locked);
+
     return (
         <div className="budget-card-view-tray">
-            {budgetPeriods.map(p => { return (<BudgetPeriodCard key={p.id} periodData={p} />); })}
+            {budgetPeriods.map(p => {
+                
+                return (
+                    <BudgetPeriodCard key={p.id} periodData={p} isActive={p === activePeriod} />
+                );
+            })}
         </div>
     );
 };

src/views/BudgetPeriodCard.jsx

@@ -1,11 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import BudgetPeriodTransTable from './BudgetPeriodTransTable';
 import Lock from '../resources/Lock.svg';
 import OpenLock from '../resources/OpenLock.svg';
 import './BudgetPeriodCard.scss';
 
-const BudgetPeriodCard = ({periodData}) => {
-    const [bankBalance, setBankBalance] = useState(0),
+const BudgetPeriodCard = ({periodData, isActive}) => {
+    const cardRef = useRef(),
+        [bankBalance, setBankBalance] = useState(0),
         [projectedLeftover, setProjectedLeftover] = useState(0),
         [bills, setBills] = useState(periodData.bills),
         [paidBills, setPaidBills] = useState([]),
@@ -14,6 +15,12 @@ const BudgetPeriodCard = ({periodData}) => {
         [paidIncomes, setPaidIncomes] = useState([]),
         [unpaidIncomes, setUnpaidIncomes] = useState([]);
 
+    useEffect(() => {
+        if(isActive) {
+            cardRef.current.scrollIntoView({inline: "start"});
+            cardRef.current.parentElement.scrollBy(-40, 0);
+        }
+    }, []);
     useEffect(() => { setPaidBills(bills.filter((bill) => bill.paid)); }, [bills]);
     useEffect(() => { setUnpaidBills(bills.filter((bill) => !bill.paid)); }, [bills]);
     useEffect(() => { setPaidIncomes(incomes.filter((income) => income.paid)); }, [incomes]);
@@ -34,7 +41,7 @@ const BudgetPeriodCard = ({periodData}) => {
     }, [bankBalance, unpaidBills, unpaidIncomes]);
 
     return (
-        <div className='budget-period-card'>
+        <div ref={cardRef} className='budget-period-card'>
             <div className='card-header'>
                 <span className={'lock'}>
                     <img src={ periodData.locked ? Lock : OpenLock } alt="lock" />