fix: addditional root, dependency array, and font-sizes

CHANGELOG.md

@@ -12,6 +12,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - All deps at patch target bumped to latest.
 - All deps at minor target bumped to latest.
+- Scaled down the font-size for monthly totals and preditected in mobile.
+
+### Fixed
+- Bug adding additional root element in scss causing error.
+- Bug in useEffect dependency causing page empty state not render for credit-bills.
 
 ---
 

frontend/package-lock.json

@@ -15,12 +15,12 @@
         "bootstrap": "^5.3.8",
         "bootstrap-icons": "^1.13.1",
         "globals": "^17.9.0",
-        "react": "^18.3.1",
+        "react": "^19.2.8",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.2.8",
-        "react-router-dom": "^6.30.4",
+        "react-router-dom": "^7.18.2",
         "sass": "^1.102.0",
         "vite": "^8.2.1",
-        "zustand": "^4.5.7"
+        "zustand": "^5.0.14"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.5",
@@ -820,13 +820,6 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.3",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.3.tgz",
@@ -1613,6 +1606,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3119,6 +3125,7 @@
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -3501,6 +3508,7 @@
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -3923,24 +3931,24 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
       "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
       "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "scheduler": "^0.27.0"
-        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^19.2.8"
       }
     },
     "node_modules/react-is": {
@@ -3951,31 +3959,41 @@
       "license": "MIT"
     },
     "node_modules/react-router": {
-      "version": "6.30.4",
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.2.tgz",
+      "integrity": "sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.3"
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.30.4",
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.2.tgz",
+      "integrity": "sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.3",
+        "react-router": "7.18.2"
-        "react-router": "6.30.4"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8",
+        "react": ">=18",
-        "react-dom": ">=16.8"
+        "react-dom": ">=18"
       }
     },
     "node_modules/readdirp": {
@@ -4175,11 +4193,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
+      "version": "0.27.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "dependencies": {
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-        "loose-envify": "^1.1.0"
+      "license": "MIT"
-      }
     },
     "node_modules/semver": {
       "version": "6.3.1",
@@ -4189,6 +4206,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -4664,6 +4687,8 @@
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -4902,18 +4927,18 @@
       }
     },
     "node_modules/zustand": {
-      "version": "4.5.7",
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.14.tgz",
+      "integrity": "sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==",
       "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
       "engines": {
-        "node": ">=12.7.0"
+        "node": ">=12.20.0"
       },
       "peerDependencies": {
-        "@types/react": ">=16.8",
+        "@types/react": ">=18.0.0",
         "immer": ">=9.0.6",
-        "react": ">=16.8"
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -4924,6 +4949,9 @@
         },
         "react": {
           "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
         }
       }
     }

frontend/package.json

@@ -17,12 +17,12 @@
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "globals": "^17.9.0",
-    "react": "^18.3.1",
+    "react": "^19.2.8",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.8",
-    "react-router-dom": "^6.30.4",
+    "react-router-dom": "^7.18.2",
     "sass": "^1.102.0",
     "vite": "^8.2.1",
-    "zustand": "^4.5.7"
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.5",

frontend/src/pages/CardBills.jsx

@@ -151,7 +151,7 @@ export default function CardBills() {
   // payment account the user already picked in the still-open pay form.
   useEffect(() => {
     setPaymentAccountId(selectedCard?.paymentAccount?.id ? String(selectedCard.paymentAccount.id) : '');
-  }, [selectedCard?.id, selectedCard.paymentAccount.id]);
+  }, [selectedCard?.id, selectedCard?.paymentAccount?.id]);
 
   const transactionsQuery = useQuery({
     queryKey: ['transactions', selectedCard?.id],

frontend/src/styles/main.scss

@@ -9,10 +9,6 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-#root {
-  view-transition-name: root;
-}
-
 ::view-transition-old(root),
 ::view-transition-new(root) {
   background: #0e1116;
@@ -233,7 +229,7 @@ body {
 }
 @media (max-width: 768px) {
   .stat-figure {
-    font-size: 18px;
+    font-size: 14px;
   }
 }
 .stat-pair {