learning how to align correctly the cells

Author: RafaelGB

src/components/Table.tsx

@@ -421,14 +421,35 @@ export function Table(tableData: TableDataType) {
           className={`${c("td")}`}
           onClick={handleAddNewRow}
         >
-          <span className="svg-icon svg-gray" style={{ marginRight: 4 }}>
-            <PlusIcon />
-          </span>
-          New
+          <div
+            key={`div-add-row-cell-button-internal-table`}
+            className={`${c("table")}`}
+          >
+            <div
+              key={`div-add-row-cell-button-internal-table-tr`}
+              className={`${c("tr")}`}
+              style={{ display: "flex", justifyContent: "center" }}
+            >
+              <div
+                key={`div-add-row-cell-button-internal-table-td-icon`}
+                className={`${c("td")}`}
+              >
+                <span className="svg-icon svg-gray" style={{ marginRight: 8 }}>
+                  <PlusIcon />
+                </span>
+              </div>
+              <div
+                key={`div-add-row-cell-button-internal-table-td-text`}
+                className={`${c("td")}`}
+              >
+                New
+              </div>
+            </div>
+          </div>
         </div>
         <div
           key={`div-add-row-cell-padding-left`}
-          className={`${c("padding-left")}`}
+          className={`${c("td padding-left")}`}
         >
           <Select
             styles={CustomTemplateSelectorStyles}

styles.css

@@ -275,7 +275,7 @@
 .database-plugin__add-row {
   color: var(--text-accent);
   padding: 0.5rem;
-  display: table-row;
+  display: -ms-inline-grid;
   align-items: center;
   font-size: 0.875rem;
   cursor: pointer;
@@ -364,7 +364,6 @@
   border-spacing: 0;
   border-bottom: 1px solid var(--background-modifier-border);
   display: table;
-  height: 1px; /** Hack to prevent collapsing of table cells */
 }
 
 .database-plugin__th:last-child {