From 7c98482c0b6a23c1f0de613c05c4433cf99ef44f Mon Sep 17 00:00:00 2001
From: Adelin Danaila <danailaadelincatalin@gmail.com>
Date: Fri, 13 Mar 2026 00:09:01 +0200
Subject: [PATCH 1/2] fix(ui): improve edit control ux, no layout shift,
 consistent label spacing

---
 .../edit-control/evaluator-config-section.tsx | 77 ++++++++++---------
 .../edit-control/evaluator-json-view.tsx      | 11 +++
 ui/src/pages/_app.tsx                         |  4 +-
 ui/src/theme.ts                               | 49 ++++++++++++
 4 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 ui/src/theme.ts

diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-config-section.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-config-section.tsx
index 077ea210..6251617e 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-config-section.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-config-section.tsx
@@ -1,5 +1,6 @@
 import {
   Anchor,
+  Box,
   Group,
   Paper,
   ScrollArea,
@@ -17,6 +18,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 = {
@@ -91,45 +93,48 @@ 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 ? (
-              <FormComponent form={evaluatorForm} />
-            ) : (
-              <Text c="dimmed" ta="center" py="xl">
-                No form available for this evaluator. Use JSON view to
-                configure.
-              </Text>
-            )}
-          </ScrollArea>
-        )}
+        <Box style={{ minHeight: height + CONTENT_MIN_HEIGHT_EXTRA }}>
+          {configViewMode === 'form' && (
+            <ScrollArea h={height} type="auto">
+              {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}
-          />
-        )}
+          {configViewMode === 'json' && (
+            <EvaluatorJsonView
+              onValidateConfig={onValidateConfig}
+              onValidationStatusChange={setValidationStatus}
+              height={height}
+              {...jsonViewProps}
+            />
+          )}
+        </Box>
       </Paper>
     </Stack>
   );
diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-json-view.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-json-view.tsx
index cd218098..e9560df6 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/evaluator-json-view.tsx
+++ b/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={{
diff --git a/ui/src/pages/_app.tsx b/ui/src/pages/_app.tsx
index cd5f9830..4defaf2b 100644
--- a/ui/src/pages/_app.tsx
+++ b/ui/src/pages/_app.tsx
@@ -12,6 +12,8 @@ import '@rungalileo/icons/styles.css';
 import '@/styles/globals.css';
 
 import { MantineProvider } from '@mantine/core';
+
+import { appTheme } from '@/theme';
 import { DatesProvider } from '@mantine/dates';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
@@ -125,7 +127,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>
diff --git a/ui/src/theme.ts b/ui/src/theme.ts
new file mode 100644
index 00000000..5c11cb9b
--- /dev/null
+++ b/ui/src/theme.ts
@@ -0,0 +1,49 @@
+import {
+  Autocomplete,
+  createTheme,
+  MultiSelect,
+  NumberInput,
+  Select,
+  TagsInput,
+  Textarea,
+  TextInput,
+} from '@mantine/core';
+
+/** Default vertical gap between label and input for form controls. */
+const LABEL_INPUT_GAP = 8;
+
+const formInputLabelStyles = {
+  label: {
+    marginBottom: LABEL_INPUT_GAP,
+  },
+};
+
+/**
+ * App theme. Defines default styles for form inputs (label spacing) in one place
+ * so all labels have consistent spacing without repeating styles per component.
+ */
+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,
+    }),
+  },
+});

From 7eee222e243fdc16dda2a384b150c21a30cfc4f6 Mon Sep 17 00:00:00 2001
From: Adelin Danaila <danailaadelincatalin@gmail.com>
Date: Fri, 13 Mar 2026 00:13:18 +0200
Subject: [PATCH 2/2] fix: lint

---
 ui/src/pages/_app.tsx | 3 +--
 ui/src/theme.ts       | 5 -----
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/ui/src/pages/_app.tsx b/ui/src/pages/_app.tsx
index 4defaf2b..51eb43ec 100644
--- a/ui/src/pages/_app.tsx
+++ b/ui/src/pages/_app.tsx
@@ -12,8 +12,6 @@ import '@rungalileo/icons/styles.css';
 import '@/styles/globals.css';
 
 import { MantineProvider } from '@mantine/core';
-
-import { appTheme } from '@/theme';
 import { DatesProvider } from '@mantine/dates';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
@@ -26,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;
diff --git a/ui/src/theme.ts b/ui/src/theme.ts
index 5c11cb9b..1e4c10c2 100644
--- a/ui/src/theme.ts
+++ b/ui/src/theme.ts
@@ -9,7 +9,6 @@ import {
   TextInput,
 } from '@mantine/core';
 
-/** Default vertical gap between label and input for form controls. */
 const LABEL_INPUT_GAP = 8;
 
 const formInputLabelStyles = {
@@ -18,10 +17,6 @@ const formInputLabelStyles = {
   },
 };
 
-/**
- * App theme. Defines default styles for form inputs (label spacing) in one place
- * so all labels have consistent spacing without repeating styles per component.
- */
 export const appTheme = createTheme({
   components: {
     TextInput: TextInput.extend({