fix device card layout

src/renderer/src/components/DeviceCard.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
-import CardActions from "@mui/material/CardActions";
 import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
+import ButtonBase from "@mui/material/ButtonBase";
 import { useTheme } from "@mui/material/styles";
 
 // Icons
@@ -19,8 +18,6 @@ import RouterIcon from "@mui/icons-material/Router";
 import TvIcon from "@mui/icons-material/Tv";
 import AcUnitIcon from "@mui/icons-material/AcUnit";
 import DeviceUnknownIcon from "@mui/icons-material/DeviceUnknown";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-
 import { AnyDevice } from "../../../api/types";
 import { DeviceControls } from "./DeviceControls";
 import { findDeviceDefinition, getStatusFieldsForDevice } from "../deviceDefinitions";
@@ -91,7 +88,19 @@ export const DeviceCard: React.FC<DeviceCardProps> = ({ device, status, onSelect
         >
             <CardContent sx={{ flexGrow: 1, p: 2.5 }}>
                 <Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", mb: 2 }}>
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, overflow: "hidden" }}>
+                    <ButtonBase
+                        onClick={() => onSelect(device.deviceId)}
+                        aria-label={device.deviceName || t("Unnamed Device")}
+                        sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 1.5,
+                            overflow: "hidden",
+                            textAlign: "left",
+                            borderRadius: 2,
+                            p: 0.5,
+                        }}
+                    >
                         <Box
                             sx={{
                                 p: 1,
@@ -113,7 +122,7 @@ export const DeviceCard: React.FC<DeviceCardProps> = ({ device, status, onSelect
                                 {device.deviceType}
                             </Typography>
                         </Box>
-                    </Box>
+                    </ButtonBase>
                 </Box>
 
                 {highlightTempHumidity && (temperatureText || humidityText) ? (
@@ -172,17 +181,6 @@ export const DeviceCard: React.FC<DeviceCardProps> = ({ device, status, onSelect
                 </Box>
             </CardContent>
 
-            <CardActions sx={{ p: 2, pt: 0 }}>
-                <Button
-                    fullWidth
-                    variant="outlined"
-                    endIcon={<ArrowForwardIcon />}
-                    onClick={() => onSelect(device.deviceId)}
-                    sx={{ borderRadius: 2 }}
-                >
-                    {t("Details")}
-                </Button>
-            </CardActions>
         </Card>
     );
 };

src/renderer/src/components/DeviceControls.tsx

@@ -42,6 +42,7 @@ interface DeviceControlsProps {
   dense?: boolean;
   showCustomCommands?: boolean;
   showNightLightInstruction?: boolean;
+  showChildLockControls?: boolean;
 }
 
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
@@ -62,6 +63,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
   dense = false,
   showCustomCommands = true,
   showNightLightInstruction = true,
+  showChildLockControls = false,
 }) => {
   const dispatch: AppDispatch = useDispatch();
   const isSending = useSelector((state: RootState) => selectIsCommandSendingForDevice(state, device.deviceId));
@@ -231,6 +233,14 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
   const sliderLabel = (value: number) => `${value}`;
 
   const sectionLabelSx = { fontWeight: 700, color: "text.secondary", mt: dense ? 0.25 : 1 };
+  const renderSectionLabel = (label: React.ReactNode) => {
+    if (dense) return null;
+    return (
+      <Typography variant="subtitle2" sx={sectionLabelSx}>
+        {label}
+      </Typography>
+    );
+  };
   const gridColumns = dense ? 2 : 3;
   const maxControlWidth = dense ? 360 : 520;
   const buttonGridSx = {
@@ -378,9 +388,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
     if (cmds.length === 0 || isHiddenByDefinition) return null;
     return (
       <Stack spacing={dense ? 0.6 : 1.2}>
-        <Typography variant="subtitle2" sx={sectionLabelSx}>
-          Controls
-        </Typography>
+        {renderSectionLabel("Controls")}
         <Stack spacing={dense ? 0.5 : 1}>
           {cmds.map((cmd) => (
             <Box key={cmd.command} sx={{ borderBottom: "1px dashed rgba(255,255,255,0.12)", pb: dense ? 0.5 : 1, mb: dense ? 0.5 : 1 }}>
@@ -407,9 +415,11 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
         {isSending && <LinearProgress sx={{ mb: 1 }} />}
         {deviceError && <Alert severity="error" sx={{ mb: 1 }}>{deviceError}</Alert>}
         <Stack spacing={dense ? 0.6 : 1.2}>
-          <Typography variant="subtitle2" sx={sectionLabelSx}>
-            {t("Virtual Remote")} - {remoteTypeLabel || t("Infrared device")}
-          </Typography>
+          {renderSectionLabel(
+            <>
+              {t("Virtual Remote")} - {remoteTypeLabel || t("Infrared device")}
+            </>
+          )}
 
           {remoteSupportsDefaultCommands && (
             <Box sx={buttonGridSx}>
@@ -624,7 +634,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
       <Stack spacing={dense ? 0.6 : 1.2}>
         {isBot && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Bot</Typography>
+            {renderSectionLabel("Bot")}
             {botModeType !== "unknown" && (
               <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mb: dense ? 0.5 : 1 }}>
                 <Chip label={`${t("Mode")}: ${botModeLabelMap[botModeType]}`} size="small" variant="outlined" />
@@ -666,7 +676,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isPlug && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Plug</Typography>
+            {renderSectionLabel("Plug")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -694,7 +704,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {(isCurtain) && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Curtain / Blind</Typography>
+            {renderSectionLabel("Curtain / Blind")}
             <Box sx={buttonGridSx}>
               <Button size="small" variant="contained" onClick={() => sendCommand("turnOn")} disabled={controlsDisabled} fullWidth>Open</Button>
               <Button size="small" variant="outlined" onClick={() => sendCommand("pause")} disabled={controlsDisabled} fullWidth>Pause</Button>
@@ -721,7 +731,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isLight && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Lighting</Typography>
+            {renderSectionLabel("Lighting")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -841,7 +851,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
             )}
             {isCeilingLight && !dense && (
               <Stack spacing={0.75} sx={{ width: "100%", maxWidth: maxControlWidth }}>
-                <Typography variant="subtitle2" sx={sectionLabelSx}>{t("Night light button settings")}</Typography>
+                {renderSectionLabel(t("Night light button settings"))}
                 <TextField
                   select
                   size="small"
@@ -888,7 +898,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isHumidifier && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Humidifier</Typography>
+            {renderSectionLabel("Humidifier")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -969,7 +979,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
                 </Box>
               </>
             )}
-            {isEvaporativeHumidifier && (
+            {isEvaporativeHumidifier && showChildLockControls && (
               <Box sx={buttonGridSx}>
                 <Button
                   size="small"
@@ -1012,7 +1022,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isFan && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Fan</Typography>
+            {renderSectionLabel("Fan")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -1086,7 +1096,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isVacuum && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Vacuum</Typography>
+            {renderSectionLabel("Vacuum")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"
@@ -1138,7 +1148,7 @@ export const DeviceControls: React.FC<DeviceControlsProps> = ({
 
         {isLock && (
           <>
-            <Typography variant="subtitle2" sx={sectionLabelSx}>Lock</Typography>
+            {renderSectionLabel("Lock")}
             <Box sx={buttonGridSx}>
               <Button
                 size="small"

src/renderer/src/components/DeviceDetailScreen.tsx

@@ -103,7 +103,7 @@ export const DeviceDetailScreen: React.FC<DeviceDetailScreenProps> = ({ deviceId
           <Typography variant="h6" gutterBottom fontWeight="bold">
             {t("Controls")}
           </Typography>
-          <DeviceControls device={deviceDetails} status={status} showCustomCommands />
+          <DeviceControls device={deviceDetails} status={status} showCustomCommands showChildLockControls />
         </Paper>
       )}