[TILES] chore: small ui improvements (#806)

# Problem
<img width="648" alt="image"
src="https://github.com/user-attachments/assets/9ff7ce7c-c331-4580-a07c-4c0ef6307a83">

# Solution
Autofocus input when creating new columns
<img width="457" alt="image"
src="https://github.com/user-attachments/assets/70f11364-e11a-4fcb-8e87-b4722d821f28">

Autofocus input when editing column names, reduce delete button size
<img width="327" alt="image"
src="https://github.com/user-attachments/assets/53649134-23a8-4201-b915-f3da3758f0c2">

Author: pregnantboy

packages/frontend/src/pages/Tile/components/TableHeader/ColumnHeaderCell.tsx

@@ -176,6 +176,7 @@ function ColumnHeaderCell({
               <Button
                 leftIcon={<Icon as={BiTrash} boxSize={4} />}
                 variant="link"
+                size="xs"
                 py={2}
                 color="interaction.critical.default"
                 _hover={{

packages/frontend/src/pages/Tile/components/TableHeader/EditColumnName.tsx

@@ -32,6 +32,8 @@ export default function EditColumnName({
       {isEditingColumnName ? (
         <>
           <Input
+            autoFocus
+            onFocus={(e) => e.target.select()}
             size="sm"
             value={newColumnName}
             onChange={(e) => setNewColumnName(e.target.value)}
@@ -40,7 +42,6 @@ export default function EditColumnName({
                 onSave()
               }
             }}
-            onBlur={onSave}
           />
           <IconButton
             aria-label="save"

packages/frontend/src/pages/Tile/components/TableHeader/NewColumnHeaderCell.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useCallback, useState } from 'react'
+import { FormEvent, useCallback, useRef, useState } from 'react'
 import { FiPlus } from 'react-icons/fi'
 import {
   Flex,
@@ -33,6 +33,7 @@ export default function NewColumnHeaderCell({
   const { mode } = useTableContext()
   const isViewMode = mode === 'view'
 
+  const inputRef = useRef<HTMLInputElement>(null)
   const { isOpen, onClose, onOpen } = useDisclosure()
   const { createColumns, isCreatingColumns } = useUpdateTable()
   const [newColumnName, setNewColumnName] = useState('')
@@ -63,6 +64,7 @@ export default function NewColumnHeaderCell({
       isOpen={isOpen}
       isLazy={true}
       lazyBehavior="unmount"
+      initialFocusRef={inputRef}
     >
       <PopoverTrigger>
         <Flex
@@ -92,6 +94,7 @@ export default function NewColumnHeaderCell({
         <form onSubmit={onSubmit}>
           <PopoverBody px={4}>
             <Input
+              ref={inputRef}
               placeholder="Column name"
               value={newColumnName}
               onChange={(e) => setNewColumnName(e.target.value)}