fix(BETA-218): fix hover style for last cell in routes table

dhis2 · Feb 12, 2025 · c301cc7 · c301cc7
1 parent b8a7307
commit c301cc7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/src/components/route-list/RoutesTable.module.css b/src/components/route-list/RoutesTable.module.css
@@ -1,5 +1,5 @@
 .routeActionsCell {
     display: flex;
     gap: 10px;
-    text-wrap: nowrap
-}
+    text-wrap: nowrap;
+}
diff --git a/src/components/route-list/RoutesTable.tsx b/src/components/route-list/RoutesTable.tsx
@@ -94,34 +94,37 @@ const RoutesTable: React.FC<RoutesTableProps> = ({
                                     })}
                                 </ul>
                             </DataTableCell>
-                            <DataTableCell
-                                align="right"
-                                className={styles.routeActionsCell}
-                            >
-                                <Switch
-                                    onChange={({ checked: enabled }) =>
-                                        toggleRoute(route, !enabled)
-                                    }
-                                    checked={!route.disabled}
-                                    label={i18n.t('Enable route')}
-                                />
-                                <Button
-                                    icon={<IconLaunch16 />}
-                                    disabled={route.disabled}
-                                    small
-                                    onClick={() => showTestRouteModal(route)}
-                                >
-                                    {i18n.t('Test route')}
-                                </Button>{' '}
-                                <RouteActions
-                                    showSharingDialog={() =>
-                                        showSharingDialog(route)
-                                    }
-                                    showEditRouteModal={() =>
-                                        showEditRouteModal(route)
-                                    }
-                                    deleteRoute={() => deleteRoute(route.id)}
-                                />
+                            <DataTableCell align="right">
+                                <div className={styles.routeActionsCell}>
+                                    <Switch
+                                        onChange={({ checked: enabled }) =>
+                                            toggleRoute(route, !enabled)
+                                        }
+                                        checked={!route.disabled}
+                                        label={i18n.t('Enable route')}
+                                    />
+                                    <Button
+                                        icon={<IconLaunch16 />}
+                                        disabled={route.disabled}
+                                        small
+                                        onClick={() =>
+                                            showTestRouteModal(route)
+                                        }
+                                    >
+                                        {i18n.t('Test route')}
+                                    </Button>{' '}
+                                    <RouteActions
+                                        showSharingDialog={() =>
+                                            showSharingDialog(route)
+                                        }
+                                        showEditRouteModal={() =>
+                                            showEditRouteModal(route)
+                                        }
+                                        deleteRoute={() =>
+                                            deleteRoute(route.id)
+                                        }
+                                    />
+                                </div>
                             </DataTableCell>
                         </DataTableRow>
                     )