From 4c756beb0eceaaf0b75918a1f3621e9a256639bc Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 18 May 2024 06:40:54 -0600
Subject: [PATCH] Set max width on the problems area in status bar and use
 unique keys so they do not duplicate

---
 web/src/components/Statusbar.tsx | 10 +++++-----
 web/src/hooks/use-stats.ts       |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 9fb45ba42..d0c142b32 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -116,7 +116,7 @@ export default function Statusbar() {
           );
         })}
       </div>
-      <div className="flex h-full items-center gap-2">
+      <div className="flex h-full items-center gap-2 max-w-[50%] overflow-x-auto no-scrollbar">
         {Object.entries(messages).length === 0 ? (
           <div className="flex items-center gap-2 text-sm">
             <FaCheck className="size-3 text-green-500" />
@@ -125,11 +125,11 @@ export default function Statusbar() {
         ) : (
           Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="flex h-full items-center gap-2">
-              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+              {messageArray.map(({ text, color, link }: StatusMessage) => {
                 const message = (
                   <div
-                    key={id}
-                    className={`flex items-center gap-2 text-sm ${link ? "cursor-pointer hover:underline" : ""}`}
+                    key={text}
+                    className={`flex items-center gap-2 text-sm whitespace-nowrap ${link ? "cursor-pointer hover:underline" : ""}`}
                   >
                     <IoIosWarning
                       className={`size-5 ${color || "text-danger"}`}
@@ -140,7 +140,7 @@ export default function Statusbar() {
 
                 if (link) {
                   return (
-                    <Link key={id} to={link}>
+                    <Link key={text} to={link}>
                       {message}
                     </Link>
                   );
diff --git a/web/src/hooks/use-stats.ts b/web/src/hooks/use-stats.ts
index bafc9e538..91494efb4 100644
--- a/web/src/hooks/use-stats.ts
+++ b/web/src/hooks/use-stats.ts
@@ -51,7 +51,7 @@ export default function useStats(stats: FrigateStats | undefined) {
         return;
       }
 
-      if (config.cameras[name].enabled && cam["camera_fps"] == 0) {
+      if (config.cameras[name].enabled && (cam["camera_fps"] == 0 || true)) {
         problems.push({
           text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`,
           color: "text-danger",