feat(base): tighten formula editor spacing and pill styling

apps/client/src/features/base/components/formula/formula-editor.tsx

@@ -93,13 +93,13 @@ export function FormulaEditor({
           )}
         </Group>
 
-        <Stack gap={8} px="md" py="sm">
+        <Stack gap={6} px={14} pt={10} pb={8}>
           <FormulaInput
             value={source}
             onChange={setSource}
             hasError={parseState.state === "error"}
           />
-          <Group justify="space-between" gap={8} mih={18}>
+          <Group justify="space-between" gap={8} mih={16}>
             {parseState.state === "error" ? (
               <Group gap={6} c="red.7">
                 <IconAlertTriangle size={12} />
@@ -125,7 +125,7 @@ export function FormulaEditor({
 
         <Divider />
 
-        <Stack gap={10} px="md" py="sm">
+        <Stack gap={8} px={14} pt={10} pb={10}>
           <PropertyChipRow
             properties={properties.filter((p) => p.id !== editingPropertyId)}
             onInsert={(name) => insertAtEnd(`prop("${name}")`)}
@@ -134,7 +134,7 @@ export function FormulaEditor({
 
         <Divider />
 
-        <Stack gap={8} px="md" py="sm">
+        <Stack gap={6} px={14} pt={10} pb={10}>
           <Text size="xs" fw={600} c="gray.7">
             Functions
           </Text>

apps/client/src/features/base/components/formula/function-palette.tsx

@@ -31,11 +31,18 @@ export function FunctionPalette({
       onChange={setOpen}
       variant="contained"
       radius="md"
+      chevronSize={14}
       styles={{
-        item: { borderColor: "var(--mantine-color-gray-3)" },
-        control: { padding: "9px 12px" },
-        label: { fontSize: 13, fontWeight: 500, textTransform: "capitalize" },
-        content: { padding: "8px 10px 12px" },
+        item: { borderColor: "var(--mantine-color-gray-2)" },
+        control: { padding: "7px 12px", minHeight: 0 },
+        label: {
+          padding: 0,
+          fontSize: 13,
+          fontWeight: 600,
+          textTransform: "capitalize",
+        },
+        content: { padding: "6px 10px 10px" },
+        panel: { background: "var(--mantine-color-gray-0)" },
       }}
     >
       {CATEGORIES.map((cat) => {
@@ -59,8 +66,8 @@ export function FunctionPalette({
                       style={{
                         display: "inline-flex",
                         alignItems: "center",
-                        gap: 3,
-                        padding: "3px 9px",
+                        gap: 4,
+                        padding: "4px 10px",
                         borderRadius: 5,
                         fontFamily:
                           "ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace",