Merge branch '208-new-text-is-misaligned-beta'

Author: RafaelGB

src/components/Table.tsx

@@ -421,14 +421,34 @@ 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")}`}
+            >
+              <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,6 @@
 .database-plugin__add-row {
   color: var(--text-accent);
   padding: 0.5rem;
-  display: table-row;
   align-items: center;
   font-size: 0.875rem;
   cursor: pointer;
@@ -292,6 +291,7 @@
   color: var(--text-muted);
   flex-direction: row;
   align-items: center;
+  display: inline-grid;
 }
 
 .database-plugin__th {