fix panel list ui layout

Author: geoffhouse

src/client/src/components/panels/PanelEditTable.jsx

@@ -131,26 +131,37 @@ export default function PanelTable({ showGroups = true }) {
                             }}
                         >
                             <TableRow>
-                                <TableCell sx={{ width: "48px" }}></TableCell>
-                                <TableCell sx={{ width: "48px" }}></TableCell>
+                                <TableCell width="10"></TableCell>
+                                <TableCell width="10"></TableCell>
+                                <TableCell>Title</TableCell>
                                 <TableCell
                                     sx={{
-                                        width: "50%",
+                                        "@media (max-width:1024px)": {
+                                            display: "none",
+                                        },
                                     }}
                                 >
-                                    Title
+                                    Description
                                 </TableCell>
                                 <TableCell
                                     sx={{
-                                        width: "50%",
                                         "@media (max-width:512px)": {
                                             display: "none",
                                         },
                                     }}
                                 >
                                     Module
                                 </TableCell>
-                                <TableCell sx={{ width: "48px" }}></TableCell>
+                                <TableCell
+                                    sx={{
+                                        "@media (max-width:250px)": {
+                                            display: "none",
+                                        },
+                                    }}
+                                >
+                                    Version
+                                </TableCell>
+                                <TableCell></TableCell>
                             </TableRow>
                         </TableHead>
                         <TableBody>

src/client/src/components/panels/PanelEditTableGroupLabel.jsx

@@ -4,15 +4,13 @@ import { TableCell, TableRow } from "@mui/material";
 export default function PanelEditTableGroupLabel({ group, onChange, placeholder, id, passedKey }) {
     return (
         <TableRow
-            hover
             key={passedKey}
             sx={{
-                height: "48px",
-                cursor: "move",
+                height: "62px",
                 backgroundColor: "background.default",
             }}
         >
-            <TableCell colSpan={6}>
+            <TableCell colSpan={7}>
                 <BugTextField
                     sx={{
                         fontSize: "0.875rem",

src/client/src/components/panels/PanelEditTableRow.jsx

@@ -2,29 +2,57 @@ import PanelPowerIcon from "@components/panels/PanelPowerIcon";
 import PanelRowState from "@components/panels/PanelRowState";
 import BugApiSwitch from "@core/BugApiSwitch";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { TableCell, TableRow } from "@mui/material";
+import { Box, TableCell, TableRow } from "@mui/material";
 
 export default function PanelEditTableRow({ id, panel }) {
     return (
-        <TableRow hover key={id} sx={{ height: "65px", cursor: "move", backgroundColor: "background.paper" }}>
+        <TableRow hover key={id} sx={{ height: "65px", backgroundColor: "background.paper" }}>
             <TableCell
                 sx={{
-                    width: "48px",
+                    width: "54px",
                     textAlign: "center",
                 }}
             >
                 <PanelPowerIcon panel={panel} />
             </TableCell>
-            <TableCell sx={{ textAlign: "center" }}>
+            <TableCell sx={{ width: "4rem" }} style={{ textAlign: "center" }}>
                 <BugApiSwitch checked={panel.enabled} disabled />
             </TableCell>
-            <TableCell sx={{ width: "50%" }}>
+            <TableCell>
                 <div>{panel.title}</div>
                 <PanelRowState panel={panel} />
             </TableCell>
-            <TableCell sx={{ width: "50%" }}>{panel._module.longname}</TableCell>
-            <TableCell sx={{ width: "48px" }}>
-                <MoreVertIcon />
+            <TableCell
+                sx={{
+                    "@media (max-width:1024px)": {
+                        display: "none",
+                    },
+                }}
+            >
+                {panel.description}
+            </TableCell>
+            <TableCell
+                sx={{
+                    "@media (max-width:512px)": {
+                        display: "none",
+                    },
+                }}
+            >
+                {panel._module.longname}
+            </TableCell>
+            <TableCell
+                sx={{
+                    "@media (max-width:250px)": {
+                        display: "none",
+                    },
+                }}
+            >
+                <Box sx={{ padding: "0.5rem" }}>{panel._module.version}</Box>
+            </TableCell>
+            <TableCell sx={{ width: "2rem" }}>
+                <Box sx={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    <MoreVertIcon sx={{ opacity: 0.5 }} />
+                </Box>
             </TableCell>
         </TableRow>
     );

src/client/src/components/panels/PanelTableGroupRow.jsx

@@ -4,7 +4,7 @@ export default function PanelTableGroupRow({ title }) {
     return (
         <TableRow
             sx={{
-                height: 48,
+                height: "62px",
             }}
         >
             <TableCell

src/client/src/components/panels/PanelTableRow.jsx

@@ -47,6 +47,7 @@ export default function PanelTableRow({ panel, showGroups }) {
             key={panel.id}
             hover={panel._active}
             sx={{
+                height: "65px",
                 cursor: panel._active ? "pointer" : "auto",
             }}
             onClick={(e) => handleRowClicked(e, panel.id)}