Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-fullscreen-editor-styles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@inkeep/agents-manage-ui": patch
---

Fix fullscreen editor dialog styling and improve ExpandableField layout
5 changes: 1 addition & 4 deletions agents-manage-ui/src/components/editors/editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,7 @@ const EditorDialog: FC<EditorDialogProps> = ({ open, onOpenChange, children, lab
return (
<Dialog open={open} onOpenChange={onOpenChange}>
{children}
<DialogContent
size="fullscreen"
className="!max-w-none h-screen w-screen max-h-screen p-0 gap-0 border-0 rounded-none"
>
<DialogContent size="fullscreen" className="duration-0">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💭 Consider: Fullscreen variant base style constraints

Issue: The size="fullscreen" variant in dialog.tsx only adds w-screen h-screen, but doesn't override the base styles (max-w-[calc(100%-2rem)], max-h-[calc(100dvh-1.5rem)], rounded-lg, border, p-6, gap-4).

Why: The previous code used !max-w-none (with Tailwind's important modifier) to force-override these constraints. Without it, max-width takes precedence over width in CSS, so the dialog may not be truly fullscreen.

Fix: If you've visually confirmed this works as intended, this can be dismissed. Otherwise, consider either:

  1. Adding the overrides to the fullscreen variant in dialog.tsx:
    fullscreen: 'w-screen h-screen max-w-none max-h-screen p-0 gap-0 border-0 rounded-none'
  2. Or keeping the critical overrides here in the className

Refs:

<DialogTitle className="sr-only">{label}</DialogTitle>
<DialogDescription className="sr-only">{`${label} Editor`}</DialogDescription>
<div className="flex flex-col w-full px-8 pb-8 pt-12 mx-auto max-w-7xl min-w-0 gap-2">
Expand Down
8 changes: 4 additions & 4 deletions agents-manage-ui/src/components/form/expandable-field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ export function ExpandableField({

return (
<Editor.Dialog open={open} onOpenChange={onOpenChange} label={label}>
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="gap-2 h-full flex flex-col">
<div className="flex items-center justify-between overflow-x-auto">
<Label
id={id}
className={cn(hasError && 'text-destructive', 'gap-1')}
className={cn('gap-1 shrink-0', hasError && 'text-destructive')}
onClick={focusEditor}
>
{label}
Expand All @@ -51,7 +51,7 @@ export function ExpandableField({
{!open && <Editor.DialogTrigger />}
</div>
</div>
<div className={cn('relative space-y-2', open && 'grow')}>{children}</div>
<div className="grow">{children}</div>
</div>
</Editor.Dialog>
);
Expand Down
Loading