frontend/devices: fix spacing in device table

Author: ffreddow

frontend/src/components/device/DeviceTable.tsx

@@ -46,14 +46,14 @@ export function DeviceTable({
                 <thead>
                     <tr class="charger-head">
                         <th onClick={() => onSort("status")}>
-                            <Row className="m-0">
-                                <Col className="align-content-end text-end">
+                            <Row className="m-0 g-0">
+                                <Col className="text-center">
                                     {getIcon("status")}
                                 </Col>
                             </Row>
                         </th>
                         <th onClick={() => onSort("name")}>
-                            <Row className="flex-nowrap m-0">
+                            <Row className="flex-nowrap g-0">
                                 <Col>
                                     {t("charger_name")}
                                 </Col>
@@ -63,7 +63,7 @@ export function DeviceTable({
                             </Row>
                         </th>
                         <th onClick={() => onSort("uid")}>
-                            <Row className="flex-nowrap m-0">
+                            <Row className="flex-nowrap g-0">
                                 <Col>
                                     {t("charger_id")}
                                 </Col>
@@ -74,7 +74,7 @@ export function DeviceTable({
                         </th>
                         <th/>
                         <th onClick={() => onSort("last_state_change")}>
-                            <Row className="flex-nowrap m-0">
+                            <Row className="flex-nowrap g-0">
                                 <Col>
                                     {t("last_state_change")}
                                 </Col>
@@ -84,7 +84,7 @@ export function DeviceTable({
                             </Row>
                         </th>
                         <th onClick={() => onSort("note")}>
-                            <Row className="flex-nowrap m-0">
+                            <Row className="flex-nowrap g-0">
                                 <Col>
                                     {t("note")}
                                 </Col>

frontend/src/components/device/DeviceTableRow.tsx

@@ -71,17 +71,18 @@ export function DeviceTableRow({
                     {t("no_keys")}
                 </p>
             </td>
-            <td class="align-middle text-center">
+            <td class="align-middle">
                 {formatLastStateChange(t, device.last_state_change)}
             </td>
-            <td class="align-middle">
-                <Container fluid>
-                    <Row>
+            <td class="align-middle pe-0">
+                <Container fluid className="p-0">
+                    <Row className="m-0">
                         <Col
                             className="d-flex align-items-center p-0"
                             style={{minWidth: "180px", whiteSpace: "pre-line", overflowWrap: "anywhere"}}
                         >
                             <Container
+                                className="ps-0"
                                 onClick={split.length <= 2 ? undefined : () => setExpand(!expand)}
                                 style={{cursor: split.length <= 1 ? undefined : "pointer"}}
                             >