From 85522ae50fd146d8b63dfbd1607554abe7e197db Mon Sep 17 00:00:00 2001
From: Araz Abishov <araz@abishov.com>
Date: Sun, 16 Jul 2023 16:28:16 +0200
Subject: [PATCH] fix(web-vis): reduce the clickable area of 'add' button
 (#102)

Fix the regression introduced by the previous PR where the clickable
area of `add` button was increased to the entire grid tile.
---
 web-vis/www/src/app.js     | 22 +++++++++++++---------
 web-vis/www/src/styles.css |  5 ++++-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/web-vis/www/src/app.js b/web-vis/www/src/app.js
index 8801b52de..169b21eba 100644
--- a/web-vis/www/src/app.js
+++ b/web-vis/www/src/app.js
@@ -57,16 +57,19 @@ class AddVectorButtonComponent extends HTMLElement {
   }
 
   connectedCallback() {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.classList.add("button-add-vector");
+
     const plusIcon = document.createElement("span");
-    plusIcon.classList.add("button-add-vector");
+    plusIcon.classList.add("button-add-vector-icon");
     plusIcon.innerHTML = "+";
 
-    this.classList.add("button-add-vector-container");
-    this.addEventListener("click", (event) => {
-      this.onClick(event);
-    });
+    button.appendChild(plusIcon);
+    button.addEventListener("click", () => this.onClick(this));
 
-    this.appendChild(plusIcon);
+    this.classList.add("button-add-vector-container");
+    this.appendChild(button);
   }
 }
 
@@ -82,14 +85,15 @@ customElements.define("grid-component", GridComponent);
 
 const grid = new GridComponent();
 const addVectorButton = new AddVectorButtonComponent();
-addVectorButton.onClick = (event) => {
+const addVector = (button) => {
   const vectorVis = new VectorVis(VectorFactory.create(64));
   const vectorComponent = new VectorComponent(vectorVis);
 
-  grid.insertBefore(vectorComponent, event.currentTarget);
+  grid.insertBefore(vectorComponent, button);
 };
+addVectorButton.onClick = addVector;
 
 grid.appendChild(addVectorButton);
 document.body.appendChild(grid);
 
-addVectorButton.dispatchEvent(new Event("click"));
+addVector(addVectorButton);
diff --git a/web-vis/www/src/styles.css b/web-vis/www/src/styles.css
index 47f0a25b1..52d88a67b 100644
--- a/web-vis/www/src/styles.css
+++ b/web-vis/www/src/styles.css
@@ -18,10 +18,13 @@ body {
   @apply flex justify-center items-center min-h-[600px];
 }
 
+.button-add-vector-icon {
+  @apply text-gray-500 text-4xl;
+}
+
 .button-add-vector {
   @apply bg-white hover:bg-gray-50 border-gray-300 focus:outline-none rounded-lg p-4;
   @apply min-h-[196px] min-w-[196px] py-2.5 px-5 border flex items-center justify-center;
-  @apply text-gray-500 text-4xl;
 }
 
 .slider-container {