improving add row

Author: RafaelGB

src/components/Table.tsx

@@ -250,14 +250,18 @@ export function Table(tableData: TableDataType) {
   const [rowTemplateState, setRowTemplateState] = React.useState(
     view.diskConfig.yaml.config.current_row_template
   );
-  const rowTemplatesOptions = get_tfiles_from_folder(
-    view.diskConfig.yaml.config.row_templates_folder
-  ).map((tfile) => {
-    return {
-      value: tfile.path,
-      label: tfile.path,
-    };
-  });
+  const rowTemplatesOptions = React.useMemo(
+    () =>
+      get_tfiles_from_folder(
+        view.diskConfig.yaml.config.row_templates_folder
+      ).map((tfile) => {
+        return {
+          value: tfile.path,
+          label: tfile.path,
+        };
+      }),
+    []
+  );
 
   function handleChangeRowTemplate(
     newValue: OnChangeValue<RowTemplateOption, false>,
@@ -432,6 +436,7 @@ export function Table(tableData: TableDataType) {
         <div
           key={`div-add-row-cell-padding-left`}
           className={`${c("td padding-left")}`}
+          style={{ minWidth: "17rem" }}
         >
           <Select
             styles={CustomTemplateSelectorStyles}
@@ -443,10 +448,11 @@ export function Table(tableData: TableDataType) {
             isClearable={true}
             isMulti={false}
             onChange={handleChangeRowTemplate}
-            defaultValue={{ label: "Choose a Template", value: "None" }}
+            placeholder={<div>Without template. Select one to use...</div>}
             menuPortalTarget={document.body}
             menuShouldBlockScroll={true}
             isSearchable
+            menuPlacement="top"
           />
         </div>
         {/* ENDS NEW ROW */}

src/components/styles/RowTemplateStyles.ts

@@ -9,6 +9,14 @@ const CustomTemplateSelectorStyles: StylesConfig<any, true, GroupBase<any>> = {
             width: 'auto',
         }
     },
+    placeholder: (styles) => {
+        return {
+            ...styles,
+            fontSize: '12px',
+            textAlign: 'left',
+            minWidth: '17rem',
+        }
+    }
 }
 
 export default CustomTemplateSelectorStyles;

styles.css

@@ -294,7 +294,7 @@ div.database-plugin__checkbox {
 .database-plugin__add-row .svg-icon:hover {
   background-color: var(--background-secondary);
   color: var(--text-accent-hover);
-  padding: 0.6rem;
+  padding: 0.3rem;
 }
 
 .database-plugin__add-row .database-plugin__td {
@@ -317,7 +317,6 @@ div.database-plugin__checkbox {
 .database-plugin__th:hover {
   background-color: var(--background-secondary);
   color: var(--text-normal);
-  padding: 0.3rem;
 }
 
 .database-plugin__th-content {