Make scenes page list view checkbox fill entire cell (#2974)

ui/v2.5/src/components/Scenes/SceneListTable.tsx

@@ -55,24 +55,26 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
     return (
       <tr key={scene.id}>
         <td>
-          <Form.Control
+          <label>
-            type="checkbox"
+            <Form.Control
-            checked={props.selectedIds.has(scene.id)}
+              type="checkbox"
-            onChange={() =>
+              checked={props.selectedIds.has(scene.id)}
-              props.onSelectChange!(
+              onChange={() =>
-                scene.id,
+                props.onSelectChange!(
-                !props.selectedIds.has(scene.id),
+                  scene.id,
-                shiftKey
+                  !props.selectedIds.has(scene.id),
-              )
+                  shiftKey
-            }
+                )
-            onClick={(
+              }
-              event: React.MouseEvent<HTMLInputElement, MouseEvent>
+              onClick={(
-            ) => {
+                event: React.MouseEvent<HTMLInputElement, MouseEvent>
-              // eslint-disable-next-line prefer-destructuring
+              ) => {
-              shiftKey = event.shiftKey;
+                // eslint-disable-next-line prefer-destructuring
-              event.stopPropagation();
+                shiftKey = event.shiftKey;
-            }}
+                event.stopPropagation();
-          />
+              }}
+            />
+          </label>
         </td>
         <td>
           <Link to={sceneLink}>
@@ -114,7 +116,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   };
 
   return (
-    <div className="row table-list justify-content-center">
+    <div className="row scene-table table-list justify-content-center">
       <Table striped bordered>
         <thead>
           <tr>

ui/v2.5/src/components/Scenes/styles.scss

@@ -638,3 +638,23 @@ input[type="range"].blue-slider {
     margin-bottom: 0;
   }
 }
+
+.scene-table {
+  table,
+  tr,
+  td,
+  label,
+  input {
+    height: 100%;
+  }
+
+  td {
+    padding: 0;
+  }
+
+  label {
+    display: block;
+    margin: 0;
+    padding: 0.5rem;
+  }
+}