fix(ui): improve edit control ux, no layout shift, consistent spacing (#122)

Author: adelindanaila

ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-config-section.tsx

@@ -17,6 +17,7 @@ import { EvaluatorJsonView } from './evaluator-json-view';
 import type { ConfigViewMode } from './types';
 
 const DEFAULT_HEIGHT = 450;
+const CONTENT_MIN_HEIGHT_EXTRA = 60;
 type ValidationStatus = 'idle' | 'validating' | 'valid' | 'invalid';
 
 type EvaluatorConfigSectionProps = {
@@ -72,6 +73,8 @@ export function EvaluatorConfigSection({
         ? 'red'
         : 'dimmed';
 
+  const contentHeight = height + CONTENT_MIN_HEIGHT_EXTRA;
+
   return (
     <Stack gap="md">
       <Group justify="space-between" align="center">
@@ -91,45 +94,44 @@ export function EvaluatorConfigSection({
             </Group>
           </Anchor>
         </Group>
-        <SegmentedControl
-          value={configViewMode}
-          onChange={handleConfigViewModeChange}
-          disabled={configViewMode === 'json' && !!jsonError}
-          data={[
-            { value: 'form', label: 'Form' },
-            { value: 'json', label: 'JSON' },
-          ]}
-          size="xs"
-        />
+        <Group gap="xs" align="center">
+          {statusLabel ? (
+            <Text size="xs" c={statusColor}>
+              {statusLabel}
+            </Text>
+          ) : null}
+          <SegmentedControl
+            value={configViewMode}
+            onChange={handleConfigViewModeChange}
+            disabled={configViewMode === 'json' && !!jsonError}
+            data={[
+              { value: 'form', label: 'Form' },
+              { value: 'json', label: 'JSON' },
+            ]}
+            size="xs"
+          />
+        </Group>
       </Group>
-      {statusLabel ? (
-        <Text size="xs" c={statusColor}>
-          {statusLabel}
-        </Text>
-      ) : null}
-
       <Paper withBorder radius="sm" p={16}>
-        {configViewMode === 'form' && (
-          <ScrollArea h={height} type="auto">
-            {FormComponent ? (
+        <ScrollArea h={contentHeight} type="always" offsetScrollbars="y">
+          {configViewMode === 'form' ? (
+            FormComponent ? (
               <FormComponent form={evaluatorForm} />
             ) : (
               <Text c="dimmed" ta="center" py="xl">
                 No form available for this evaluator. Use JSON view to
                 configure.
               </Text>
-            )}
-          </ScrollArea>
-        )}
-
-        {configViewMode === 'json' && (
-          <EvaluatorJsonView
-            onValidateConfig={onValidateConfig}
-            onValidationStatusChange={setValidationStatus}
-            height={height}
-            {...jsonViewProps}
-          />
-        )}
+            )
+          ) : (
+            <EvaluatorJsonView
+              onValidateConfig={onValidateConfig}
+              onValidationStatusChange={setValidationStatus}
+              height={height}
+              {...jsonViewProps}
+            />
+          )}
+        </ScrollArea>
       </Paper>
     </Stack>
   );

ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-json-view.tsx

@@ -3,6 +3,10 @@ import { useDebouncedValue } from '@mantine/hooks';
 import { useEffect, useRef } from 'react';
 
 import { isApiError } from '@/core/api/errors';
+import {
+  labelPropsInline,
+  LabelWithTooltip,
+} from '@/core/components/label-with-tooltip';
 
 import { ApiErrorAlert } from './api-error-alert';
 import type { EvaluatorJsonViewProps } from './types';
@@ -79,6 +83,13 @@ export const EvaluatorJsonView = ({
   return (
     <Box>
       <Textarea
+        label={
+          <LabelWithTooltip
+            label="Configuration (JSON)"
+            tooltip="Raw evaluator configuration in JSON format"
+          />
+        }
+        labelProps={labelPropsInline}
         value={jsonText}
         onChange={(e) => handleJsonChange(e.currentTarget.value)}
         styles={{

ui/src/core/page-components/agent-detail/modals/edit-control/step-name-input.tsx

@@ -99,7 +99,7 @@ export function StepNameInput({ form, steps = [] }: StepNameInputProps) {
 
   return (
     <Box>
-      <Group gap="xs" mb={4} wrap="nowrap">
+      <Group gap="xs" mb={8} wrap="nowrap">
         <Group gap={4}>
           <Text size="sm" fw={500}>
             Step name

ui/src/pages/_app.tsx

@@ -24,6 +24,7 @@ import { LoginModal } from '@/core/components/login-modal';
 import { AuthProvider, useAuth } from '@/core/providers/auth-provider';
 import { QueryProvider } from '@/core/providers/query-provider';
 import type { NextPageWithLayout } from '@/core/types/page';
+import { appTheme } from '@/theme';
 
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
@@ -125,7 +126,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
 
       <ErrorBoundary variant="page">
         <QueryProvider>
-          <MantineProvider defaultColorScheme="auto">
+          <MantineProvider theme={appTheme} defaultColorScheme="auto">
             <Notifications />
             <DatesProvider settings={{ firstDayOfWeek: 0 }}>
               <JupiterThemeProvider>

ui/src/theme.ts

@@ -0,0 +1,44 @@
+import {
+  Autocomplete,
+  createTheme,
+  MultiSelect,
+  NumberInput,
+  Select,
+  TagsInput,
+  Textarea,
+  TextInput,
+} from '@mantine/core';
+
+const LABEL_INPUT_GAP = 8;
+
+const formInputLabelStyles = {
+  label: {
+    marginBottom: LABEL_INPUT_GAP,
+  },
+};
+
+export const appTheme = createTheme({
+  components: {
+    TextInput: TextInput.extend({
+      styles: formInputLabelStyles,
+    }),
+    Textarea: Textarea.extend({
+      styles: formInputLabelStyles,
+    }),
+    Select: Select.extend({
+      styles: formInputLabelStyles,
+    }),
+    MultiSelect: MultiSelect.extend({
+      styles: formInputLabelStyles,
+    }),
+    Autocomplete: Autocomplete.extend({
+      styles: formInputLabelStyles,
+    }),
+    TagsInput: TagsInput.extend({
+      styles: formInputLabelStyles,
+    }),
+    NumberInput: NumberInput.extend({
+      styles: formInputLabelStyles,
+    }),
+  },
+});