From ef2cb7cab6ab4bd84ee3fb98d4b64a304ac67b3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20L=C3=B3pez?= <marina.lopez.yap@gmail.com>
Date: Mon, 8 Jul 2024 12:28:22 +0200
Subject: [PATCH] chore: enhancement table plugin

---
 apps/table-plugin/src/app/app.component.css  |  1 +
 apps/table-plugin/src/app/app.component.html | 38 ++++++++++----------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/table-plugin/src/app/app.component.css b/apps/table-plugin/src/app/app.component.css
index 72e3f23..367cab6 100644
--- a/apps/table-plugin/src/app/app.component.css
+++ b/apps/table-plugin/src/app/app.component.css
@@ -87,6 +87,7 @@ hr {
   block-size: 22px;
   display: flex;
   justify-content: space-between;
+  margin-block-end: var(--spacing-12);
 
   & .text {
     margin-block-start: 0;
diff --git a/apps/table-plugin/src/app/app.component.html b/apps/table-plugin/src/app/app.component.html
index 55950be..da06b50 100644
--- a/apps/table-plugin/src/app/app.component.html
+++ b/apps/table-plugin/src/app/app.component.html
@@ -29,24 +29,7 @@
       >{{ selectedRow }} rows x {{ selectedColumn }} cols</span
     >
   </div>
-  <div class="table-grid">
-    <span
-      class="cell"
-      *ngFor="let cell of cells; index as i"
-      (mouseenter)="setColRow(i)"
-      (mouseleave)="clearColRow()"
-      (click)="createTable(i)"
-    >
-      <span
-        class="square"
-        [class.active]="
-          selectedCell &&
-          selectedCell.column >= getCellColRow(i).column &&
-          selectedCell.row >= getCellColRow(i).row
-        "
-      ></span>
-    </span>
-  </div>
+
   <div class="checkbox-container">
     <input
       [(ngModel)]="tableOptions.borders"
@@ -88,4 +71,23 @@
     />
     <label for="filledHeaderColumn" class="body-s">Filled header column</label>
   </div>
+
+  <div class="table-grid">
+    <span
+      class="cell"
+      *ngFor="let cell of cells; index as i"
+      (mouseenter)="setColRow(i)"
+      (mouseleave)="clearColRow()"
+      (click)="createTable(i)"
+    >
+      <span
+        class="square"
+        [class.active]="
+          selectedCell &&
+          selectedCell.column >= getCellColRow(i).column &&
+          selectedCell.row >= getCellColRow(i).row
+        "
+      ></span>
+    </span>
+  </div>
 </div>