Fix for batteries overflow when they get small.

victronenergy · Feb 19, 2024 · 3d0126e · 3d0126e
1 parent 1e40218
commit 3d0126e
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
@@ -60,6 +60,19 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }:
     setPages(Math.ceil(overviewBatteries.length / batteriesPerPage))
   }, [boxSize, overviewBatteries])
 
+  // TODO: Temp fix for #358. The whole battery system needs to be refactored, too much logic in components.
+  const calculateRingWidth = () => {
+    if (pages <= 1) {
+      if (boxSize.width < 400) {
+        return `calc(${100 / batteries.length}% + 75px)`
+      }
+
+      return `calc(${100 / batteries.length}% - 32px)`
+    }
+
+    return boxSize.width / perPage - 32
+  }
+
   if (componentMode === "compact") {
     return (
       <Box
@@ -85,7 +98,7 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }:
                     key={b.id}
                     className={"h-full flex ml-4 mr-4 first:ml-0 last:mr-0"}
                     style={{
-                      width: pages <= 1 ? `calc(${100 / batteries.length}% - 32px)` : boxSize.width / perPage - 32,
+                      width: calculateRingWidth(),
                     }}
                   >
                     <BatterySummary