Code interface render incorrectly when used in SEO custom fields

[sofiaringstrom]

Extension

SEO Plugin

Describe the Bug

When a code interface is configured as an additional/custom field, the code editor renders with broken dimensions (collapsed/zero height) when the Custom Fields tab is first opened. I think the issue might be that the code interface (CodeMirror) measure their container dimensions at mount time, but the custom fields are mounting inside a display: none container, calculating its size as 0x0 and never recovers when the tab becomes visible.

I have temporarily fixed this by adding this to my custom css:

.seo-tabs .tab-content[data-state='inactive'] {
    display: block !important;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

To Reproduce

1. Add a field using the code interface to the SEO extension's additional fields configuration
2. Open an item that uses the SEO interface
3. Click the "Custom Fields" tab
4. Observe that the code editor's layout is incorrect. Saving data into the field and refreshing causes the data to not even be visible until you click inside the code editor.

Directus Version

v11.11.0

Hosting Strategy

Self-Hosted (Docker Image)