Merge pull request #11551 from Budibase/fix/new-column-popover-fixes

Small UX fixes for new column popover

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -6,13 +6,15 @@
     Select,
     Toggle,
     RadioGroup,
+    Icon,
     DatePicker,
     Modal,
     notifications,
     OptionSelectDnD,
     Layout,
+    AbsTooltip,
   } from "@budibase/bbui"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher, getContext, onMount } from "svelte"
   import { cloneDeep } from "lodash/fp"
   import { tables, datasources } from "stores/backend"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
@@ -47,6 +49,7 @@
 
   export let field
 
+  let mounted = false
   let fieldDefinitions = cloneDeep(FIELDS)
   let originalName
   let linkEditDisabled
@@ -413,16 +416,22 @@
     }
     return newError
   }
+
+  onMount(() => {
+    mounted = true
+  })
 </script>
 
 <Layout noPadding gap="S">
-  <Input
+  {#if mounted}
-    bind:value={editableColumn.name}
+    <Input
-    disabled={uneditable ||
+      autofocus
-      (linkEditDisabled && editableColumn.type === LINK_TYPE)}
+      bind:value={editableColumn.name}
-    error={errors?.name}
+      disabled={uneditable ||
-  />
+        (linkEditDisabled && editableColumn.type === LINK_TYPE)}
-
+      error={errors?.name}
+    />
+  {/if}
   <Select
     disabled={!typeEnabled}
     bind:value={editableColumn.type}
@@ -452,12 +461,17 @@
     />
   {:else if editableColumn.type === "longform"}
     <div>
-      <Label
+      <div class="tooltip-alignment">
-        size="M"
+        <Label size="M">Formatting</Label>
-        tooltip="Rich text includes support for images, links, tables, lists and more"
+        <AbsTooltip
-      >
+          position="top"
-        Formatting
+          type="info"
-      </Label>
+          text={"Rich text includes support for images, link"}
+        >
+          <Icon size="XS" name="InfoOutline" />
+        </AbsTooltip>
+      </div>
+
       <Toggle
         bind:value={editableColumn.useRichText}
         text="Enable rich text support (markdown)"
@@ -488,13 +502,18 @@
     </div>
     {#if datasource?.source !== "ORACLE" && datasource?.source !== "SQL_SERVER"}
       <div>
-        <Label
+        <div>
-          tooltip={isCreating
+          <Label>Time zones</Label>
-            ? null
+          <AbsTooltip
-            : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
+            position="top"
-        >
+            type="info"
-          Time zones
+            text={isCreating
-        </Label>
+              ? null
+              : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
+          >
+            <Icon size="XS" name="InfoOutline" />
+          </AbsTooltip>
+        </div>
         <Toggle
           bind:value={editableColumn.ignoreTimezones}
           text="Ignore time zones"
@@ -671,6 +690,12 @@
     align-items: center;
   }
 
+  .tooltip-alignment {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
   .label-length {
     flex-basis: 40%;
   }

packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte

@@ -32,7 +32,7 @@
 <Popover
   bind:open
   {anchor}
-  align="right"
+  align={$renderedColumns.length ? "right" : "left"}
   offset={0}
   popoverTarget={document.getElementById(`add-column-button`)}
   animate={false}