Simplified battery UI.

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

@@ -10,14 +10,13 @@ import { Styles } from "./Styles"
 interface Props {
   battery: Battery
   boxSize: ISize
-  classes: string
 }
 
-const BatterySummary = ({ battery, boxSize, classes }: Props) => {
+const BatterySummary = ({ battery, boxSize }: Props) => {
   const activeStyles = applyStyles(boxSize, Styles)
 
   return (
-    <div className={classNames("flex flex-col justify-center items-center w-full h-full gap-4", classes)}>
+    <div className="flex flex-col justify-center items-center w-full h-full max-w-[20rem]">
       <ProgressCircle
         percentage={battery.soc ?? null}
         boxSize={{
@@ -50,7 +49,7 @@ const BatterySummary = ({ battery, boxSize, classes }: Props) => {
           <></>
         )}
       </ProgressCircle>
-      <div className={classNames("truncate mt-2 w-[inherit] text-center", activeStyles.name)}>{battery.name}</div>
+      <div className={classNames("truncate mt-2 text-center", activeStyles.name)}>{battery.name}</div>
     </div>
   )
 }

src/app/Marine2/components/ui/BatterySummary/Styles.ts

@@ -3,25 +3,25 @@ import { BreakpointStylesType } from "../../../utils/media"
 export const Styles: BreakpointStylesType = {
   default: {
     voltage: "hidden",
-    name: "text-base",
+    name: "text-base max-w-[20rem]",
     state: "text-2xs",
   },
   "xs-xs": {
     voltage: "text-sm",
     batteryState: "text-xs",
-    name: "text-base",
+    name: "text-base max-w-[10rem]",
     state: "text-xs",
   },
   "sm-s": {
     voltage: "text-base",
     batteryState: "text-sm",
-    name: "text-base",
+    name: "text-base max-w-[12rem]",
     state: "text-sm",
   },
   "sm-m": {
     voltage: "text-lg",
     batteryState: "text-base",
-    name: "text-lg",
+    name: "text-lg max-w-[20rem]",
     state: "text-base",
   },
 }