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({
-
+
+ {statusLabel ? (
+
+ {statusLabel}
+
+ ) : null}
+
+
- {statusLabel ? (
-
- {statusLabel}
-
- ) : null}
-
- {configViewMode === 'form' && (
-
- {FormComponent ? (
-
- ) : (
-
- No form available for this evaluator. Use JSON view to
- configure.
-
- )}
-
- )}
+
+ {configViewMode === 'form' && (
+
+ {FormComponent ? (
+
+ ) : (
+
+ No form available for this evaluator. Use JSON view to
+ configure.
+
+ )}
+
+ )}
- {configViewMode === 'json' && (
-
- )}
+ {configViewMode === 'json' && (
+
+ )}
+
);
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 (
+ }
+ 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..51eb43ec 100644
--- a/ui/src/pages/_app.tsx
+++ b/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) {
-
+
diff --git a/ui/src/theme.ts b/ui/src/theme.ts
new file mode 100644
index 00000000..1e4c10c2
--- /dev/null
+++ b/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,
+ }),
+ },
+});