From e0563d7b9bdf3c4c62aed3ace34b6113cfbcac32 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Sat, 20 May 2023 21:38:52 -0400
Subject: [PATCH] Add dummy div to plate cells

This exists solely to have the hitbox
for the cells be rectangular while the
appearance of the cells is circular.
---
 src/components/plate.css       | 10 ++++++++--
 src/components/source_plate.rs |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/plate.css b/src/components/plate.css
index 0d6c976..91f446d 100644
--- a/src/components/plate.css
+++ b/src/components/plate.css
@@ -1,18 +1,24 @@
 table, tr, td {
 	box-sizing: border-box;
 	user-select: none; /* Prevents dragging issue */
+	border-spacing: 0px;
 }
 td.plate_cell {
 	width: 30px;
 	height: 30px;
 	background: none;
+}
+
+div.plate_cell_inner {
+	width: 90%;
+	height: 90%;
 	border-radius: 50%;
 	border: 2px solid black;
 }
-td.plate_cell:hover {
+td.plate_cell:hover div.plate_cell_inner {
 	background: black !important;
 }
 
-td.current_select {
+td.current_select div.plate_cell_inner {
 	background: lightblue !important;
 }
diff --git a/src/components/source_plate.rs b/src/components/source_plate.rs
index eed8e89..920a60c 100644
--- a/src/components/source_plate.rs
+++ b/src/components/source_plate.rs
@@ -76,6 +76,9 @@ fn SourcePlateCell(cx: Scope<PlateCellProps>, i: u8, j: u8, color: Option<String
             onmouseup: move |_| {
                 selection_state.write().m_stat = false
             },
+            div {
+                class: "plate_cell_inner"
+            }
         }
     })
 }