Refactored width: number; height: number to generic interface ISize.

src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx

@@ -18,6 +18,7 @@ import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { BOX_TYPES } from "../../../utils/constants/generic"
 import { BATTERY } from "../../../utils/constants/devices/batteries"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   componentMode?: ComponentMode
@@ -26,7 +27,7 @@ interface Props {
 
 const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { batteries } = useBattery()
-  const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
+  const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
   useVisibilityNotifier({ widgetName: BOX_TYPES.BATTERIES, visible: !!(batteries && batteries.length) })
 

src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx

@@ -1,11 +1,18 @@
-import React from "react"
 import AlternatorIcon from "../../../images/icons/alternator.svg"
 import { useAlternator } from "@victronenergy/mfd-modules"
 import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
+import { ISize } from "@m2Types/generic/size"
+
+interface Props {
+  alternator: number
+  showInstance: boolean
+  componentMode?: ComponentMode
+  compactBoxSize?: ISize
+}
 
 const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance, compactBoxSize }: Props) => {
   const { current, voltage } = useAlternator(alternator)
@@ -35,11 +42,4 @@ const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance,
   )
 }
 
-interface Props {
-  alternator: number
-  showInstance: boolean
-  componentMode?: ComponentMode
-  compactBoxSize?: { width: number; height: number }
-}
-
 export default EnergyAlternator

src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx

@@ -1,15 +1,16 @@
+import { translate } from "react-i18nify"import { translate } from "react-i18nify"
 import { DcLoadsState } from "@victronenergy/mfd-modules"
 import DCIcon from "../../../images/icons/dc.svg"
-import { translate } from "react-i18nify"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   dcLoads: DcLoadsState
   componentMode?: ComponentMode
-  compactBoxSize?: { width: number; height: number }
+  compactBoxSize?: ISize
 }
 
 const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props) => {

src/app/Marine2/components/boxes/EnergySolar/EnergySolar.tsx

@@ -6,6 +6,7 @@ import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
+import { ISize } from "@m2Types/generic/size"
 
 const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: Props) => {
   const { current, power } = pvCharger
@@ -36,7 +37,7 @@ const EnergySolar = ({ componentMode = "compact", pvCharger, compactBoxSize }: P
 interface Props {
   pvCharger: PvChargerState
   componentMode?: ComponentMode
-  compactBoxSize?: { width: number; height: number }
+  compactBoxSize?: ISize
 }
 
 export default EnergySolar

src/app/Marine2/components/boxes/EnergyWind/EnergyWind.tsx

@@ -7,6 +7,14 @@ import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
+import { ISize } from "@m2Types/generic/size"
+
+interface Props {
+  windGenerator: number
+  showInstance: boolean
+  componentMode?: ComponentMode
+  compactBoxSize?: ISize
+}
 
 const EnergyWind = ({ componentMode = "compact", windGenerator, showInstance, compactBoxSize }: Props) => {
   const { current, voltage } = useWindGenerator(windGenerator)
@@ -37,11 +45,4 @@ const EnergyWind = ({ componentMode = "compact", windGenerator, showInstance, co
   )
 }
 
-interface Props {
-  windGenerator: number
-  showInstance: boolean
-  componentMode?: ComponentMode
-  compactBoxSize?: { width: number; height: number }
-}
-
 export default observer(EnergyWind)

src/app/Marine2/components/boxes/EnvironmentOverview/EnvironmentOverview.tsx

@@ -12,6 +12,7 @@ import { PageSelectorProps } from "../../ui/PageSelector"
 import { translate } from "react-i18nify"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { BOX_TYPES } from "../../../utils/constants/generic"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   componentMode?: ComponentMode
@@ -25,7 +26,7 @@ export const VisibleComponentsContext = createContext({
 const EnvironmentOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { temperatures } = useTemperatures()
   const [visibleElements, setVisibleElements] = useState({})
-  const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
+  const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
   const passVisibility = useCallback((id: number, visible: boolean) => {
     setVisibleElements((prev) => ({ ...prev, [id]: visible }))

src/app/Marine2/components/boxes/EnvironmentOverview/HumidityData.tsx

@@ -8,11 +8,12 @@ import { useContext, useEffect, useCallback } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { AdditionalInformation } from "../GeneratorFp/AdditionalInformation/AdditionalInformation"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   dataId: number
   componentMode?: ComponentMode
-  boxSize: { width: number; height: number }
+  boxSize: ISize
 }
 
 const HumidityData = ({ dataId, componentMode, boxSize }: Props) => {

src/app/Marine2/components/boxes/EnvironmentOverview/PressureData.tsx

@@ -7,11 +7,12 @@ import { translate } from "react-i18nify"
 import { useContext, useEffect, useCallback } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   dataId: number
   componentMode?: ComponentMode
-  boxSize: { width: number; height: number }
+  boxSize: ISize
 }
 
 const PressureData = ({ dataId, componentMode, boxSize }: Props) => {

src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx

@@ -7,11 +7,12 @@ import { translate } from "react-i18nify"
 import { useCallback, useContext, useEffect } from "react"
 import { VisibleComponentsContext } from "./EnvironmentOverview"
 import { ComponentMode } from "@m2Types/generic/component-mode"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   dataId: number
   componentMode?: ComponentMode
-  boxSize: { width: number; height: number }
+  boxSize: ISize
 }
 
 const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => {

src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx

@@ -8,7 +8,6 @@ import { applyStyles, StylesType } from "../../../../utils/media"
 import useSize from "@react-hook/size"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { compactStyles, horizontalStyles, verticalStyles } from "./Styles"
-
 import { formatLevelFor } from "../../../../utils/formatters/devices/tanks/format-level-for"
 import { FluidIcon } from "./FluidIcon/FluidIcon"
 import { ValueWithPercentage } from "./ValueWithPercentage/ValueWithPercentage"
@@ -18,13 +17,12 @@ import { FLUID_TRANSLATIONS } from "../../../../utils/constants/devices/tanks"
 
 interface Props {
   tankInstanceId: number
-  levelWidth?: number
   componentMode?: ComponentMode
   orientation?: ScreenOrientation
   parentSize?: ISize
 }
 
-const Tank = ({ tankInstanceId, componentMode, levelWidth, orientation = "vertical", parentSize }: Props) => {
+const Tank = ({ tankInstanceId, componentMode, orientation = "vertical", parentSize }: Props) => {
   let { capacity, fluidType, level, remaining, customName, unit } = useTank(tankInstanceId)
   const fluidTypeNum = +fluidType
   const wrapperRef = useRef<HTMLDivElement>(null)

src/app/Marine2/components/boxes/Tanks/Tanks.tsx

@@ -8,13 +8,13 @@ import Tank from "./Tank/Tank"
 import { AppViews } from "../../../modules/AppViews"
 import { translate } from "react-i18nify"
 import { useVisibilityNotifier } from "../../../modules"
-import ResizeObserver from "resize-observer-polyfill"
 import useSize from "@react-hook/size"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import classNames from "classnames"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { ScreenOrientation } from "@m2Types/generic/screen-orientation"
 import { BOX_TYPES } from "../../../utils/constants/generic"
+import { ISize } from "@m2Types/generic/size"
 
 interface Props {
   componentMode?: ComponentMode
@@ -25,8 +25,7 @@ const Tanks = ({ componentMode = "full", className }: Props) => {
   const { tanks } = useTanks()
   const filteredTanks = (tanks || []).filter((tank) => !!tank || tank === 0)
 
-  const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
-  const [levelWidth, setLevelWidth] = useState(0)
+  const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
   useVisibilityNotifier({ widgetName: BOX_TYPES.TANKS, visible: !!filteredTanks.length })
 
@@ -41,50 +40,13 @@ const Tanks = ({ componentMode = "full", className }: Props) => {
   useEffect(() => {
     if (!windowSize.width || !windowSize.height) return
 
-    if (windowSize.width > 3 * windowSize.height) {
-      setOrientation("horizontal")
-    } else {
-      setOrientation("vertical")
-    }
-  }, [windowSize])
+    const orientation = windowSize.width > 3 * windowSize.height
+      ? "horizontal"
+      : "vertical"
 
-  useEffect(() => {
-    if (!gridRef.current) return
+    setOrientation(orientation)
 
-    const observer = new ResizeObserver(getColumnsWidth)
-    observer.observe(gridRef.current)
-    return () => {
-      observer.disconnect()
-    }
-  }, [gridRef])
-
-  useEffect(() => {
-    if (!tankRef.current) return
-
-    const observer = new ResizeObserver(getColumnsWidth)
-    observer.observe(tankRef.current)
-    return () => {
-      observer.disconnect()
-    }
-  }, [tankRef])
-
-  // set the maximum width of the name and level of all the tanks
-  const getColumnsWidth = () => {
-    // wait for styles to be applied
-    setTimeout(() => {
-      const levels = document.querySelectorAll(".tank-level")
-      let max = 0
-      levels.forEach((level) => {
-        if (level.clientWidth > max) {
-          max = level.clientWidth
-        }
-      })
-
-      if (max > 0) {
-        setLevelWidth(max)
-      }
-    }, 0)
-  }
+  }, [windowSize])
 
   if (componentMode === "compact") {
     return (
@@ -104,7 +66,6 @@ const Tanks = ({ componentMode = "full", className }: Props) => {
               key={tank}
               tankInstanceId={Number(tank)}
               parentSize={boxSize}
-              levelWidth={levelWidth}
             />
           </div>
         ))}
@@ -131,7 +92,6 @@ const Tanks = ({ componentMode = "full", className }: Props) => {
                   componentMode="full"
                   orientation={orientation}
                   parentSize={{ width, height }}
-                  levelWidth={levelWidth}
                 />
               )
             })}
@@ -157,7 +117,6 @@ const Tanks = ({ componentMode = "full", className }: Props) => {
                   componentMode="full"
                   orientation={orientation}
                   parentSize={{ width, height }}
-                  levelWidth={levelWidth}
                 />
               ))}
             </div>

src/app/Marine2/components/ui/Box/Box.tsx

@@ -9,6 +9,7 @@ import FadedText from "../FadedText"
 import { Modal } from "../Modal"
 import { ScreenOrientation } from "@m2Types/generic/screen-orientation"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
+import { ISize } from "@m2Types/generic/size"
 
 export interface BoxProps {
   children: JSX.Element[] | JSX.Element | string
@@ -20,7 +21,7 @@ export interface BoxProps {
   headerActions?: JSX.Element
   withPagination?: boolean
   paginationOrientation?: ScreenOrientation
-  getBoxSizeCallback?: (size: { width: number; height: number }) => void
+  getBoxSizeCallback?: (size: ISize) => void
   setRef?: RefObject<HTMLDivElement>
 }
 

src/app/Marine2/components/ui/Observers/SizeChangeObserver.tsx

@@ -2,11 +2,23 @@ import { CSSProperties, useEffect, useRef, useState } from "react"
 import { observer } from "mobx-react"
 import useSize from "@react-hook/size"
 import { ScreenOrientation } from "@m2Types/generic/screen-orientation"
+import { ISize } from "@m2Types/generic/size"
+
+interface Props {
+  children: (string | JSX.Element)[] | JSX.Element | string
+  onSizeChange: () => void
+  orientation: ScreenOrientation
+  className?: string
+  style?: CSSProperties
+}
 
 const SizeChangeObserver = ({ children, onSizeChange, orientation, className = "", style }: Props) => {
+
   const containerRef = useRef<HTMLDivElement>(null)
+
   const [width, height] = useSize(containerRef)
-  const [initialSize, setInitialSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
+  const [initialSize, setInitialSize] = useState<ISize>({ width: 0, height: 0 })
+
   useEffect(() => {
     if (initialSize.width === 0 && initialSize.height === 0) {
       setInitialSize({ width, height })
@@ -26,12 +38,4 @@ const SizeChangeObserver = ({ children, onSizeChange, orientation, className = "
   )
 }
 
-interface Props {
-  children: (string | JSX.Element)[] | JSX.Element | string
-  onSizeChange: () => void
-  orientation: ScreenOrientation
-  className?: string
-  style?: CSSProperties
-}
-
 export default observer(SizeChangeObserver)

src/app/Marine2/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames"
-
 import { applyStyles, BreakpointStylesType } from "../../../utils/media"
 import { colorFor } from "../../../utils/formatters/generic"
+import { ISize } from "@m2Types/generic/size"
 
 const styles: BreakpointStylesType = {
   default: {
@@ -18,6 +18,13 @@ const styles: BreakpointStylesType = {
   },
 }
 
+interface Props {
+  percentage: number
+  children?: JSX.Element
+  boxSize: ISize
+  batteryTitle?: string
+}
+
 const ProgressCircle = ({ percentage, children, boxSize, batteryTitle }: Props) => {
   const activeStyles = applyStyles(boxSize, styles)
   const hasPercentage = percentage !== null
@@ -68,11 +75,4 @@ const ProgressCircle = ({ percentage, children, boxSize, batteryTitle }: Props)
   )
 }
 
-interface Props {
-  percentage: number
-  children?: JSX.Element
-  boxSize: { width: number; height: number }
-  batteryTitle?: string
-}
-
 export default ProgressCircle