Refactor DrawerRow into a shared component and update TemperatureBox drawer style

Extracts the DrawerRow component from SolisBox to the base Box component for reuse. Updates TemperatureBox to use DrawerRow, replacing its table-based layout with a flexbox-based design for consistent spacing and styling across the dashboard.

Author: eetu

frontend/src/components/Box.tsx

@@ -165,3 +165,24 @@ const BoxFooter: React.FC<BoxFooterProps> = ({ collapsed }) => {
     </div>
   );
 };
+
+export const DrawerRow: React.FC<{
+  label: React.ReactNode;
+  value: React.ReactNode;
+}> = ({ label, value }) => {
+  const theme = useTheme();
+  return (
+    <div
+      css={{
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <span css={{ color: theme.colors.text.muted }}>{label}</span>
+      <span>{value}</span>
+    </div>
+  );
+};

frontend/src/components/SolisBox.tsx

@@ -4,7 +4,7 @@ import useSWR from "swr";
 
 import { api, fetcher } from "../api";
 import { SolisData } from "../types/solis";
-import Box from "./Box";
+import Box, { DrawerRow } from "./Box";
 import Icon from "./Icon";
 
 type SolisBoxProps = {
@@ -120,17 +120,4 @@ const SolisBox: React.FC<SolisBoxProps> = ({ className }) => {
   );
 };
 
-const DrawerRow: React.FC<{ label: string; value: string }> = ({
-  label,
-  value,
-}) => {
-  const theme = useTheme();
-  return (
-    <div css={{ display: "flex", justifyContent: "space-between", gap: "1em" }}>
-      <span css={{ color: theme.colors.text.muted }}>{label}</span>
-      <span>{value}</span>
-    </div>
-  );
-};
-
 export default memo(SolisBox);

frontend/src/components/TemperatureBox.tsx

@@ -5,7 +5,7 @@ import { memo } from "react";
 import useSensorTrend from "../hooks/useSensorTrend";
 import { mq } from "../mq";
 import { Sensor } from "../types/hue";
-import Box from "./Box";
+import Box, { DrawerRow } from "./Box";
 import Icon from "./Icon";
 import TrendIndicator from "./TrendIndicator";
 
@@ -57,8 +57,12 @@ const TemperatureBox: React.FC<TemperatureBoxProps> = ({
       drawer={
         <div
           css={{
-            display: "table",
-            fontSize: "16px",
+            backgroundColor: theme.colors.background.light,
+            padding: "5px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5em",
+            fontSize: "14px",
           }}
         >
           {sensors.map((r) => {
@@ -67,36 +71,43 @@ const TemperatureBox: React.FC<TemperatureBoxProps> = ({
               <div
                 key={r.id}
                 css={{
-                  display: "table-row",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 5,
                   backgroundColor: theme.colors.background.light,
-                  "& span": {
-                    display: "table-cell",
-                    padding: "5px",
-                    opacity: r.enabled && r.connected ? 1 : 0.25,
-                    width: "100%",
-                  },
                 }}
               >
-                <span>{r.name}</span>
-                {isSensorBatteryLow ? (
-                  <Icon
-                    size={18}
-                    css={{
-                      color: theme.colors.error,
-                      transform: "rotate(90deg)",
-                    }}
-                  >{`battery_${getBatteryStr(r.battery)}`}</Icon>
-                ) : (
-                  <span>&nbsp;</span>
-                )}
-                <span>
-                  {r.temperature !== undefined
-                    ? `${Math.round(r.temperature)}°`
-                    : ""}
-                </span>
+                <DrawerRow
+                  label={
+                    <div
+                      css={{
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 5,
+                      }}
+                    >
+                      {r.name}
+                      {isSensorBatteryLow && (
+                        <Icon
+                          size={18}
+                          css={{
+                            color: theme.colors.error,
+                          }}
+                        >{`battery_${getBatteryStr(r.battery)}`}</Icon>
+                      )}
+                    </div>
+                  }
+                  value={
+                    <>
+                      <span>
+                        {r.temperature !== undefined
+                          ? `${Math.round(r.temperature)}°`
+                          : ""}
+                      </span>
+                    </>
+                  }
+                />
               </div>
             );
           })}