Skip to content

Fix: Markdown editor min-height alignment#26430

Merged
rijkvanzanten merged 5 commits intodirectus:mainfrom
DamnItAzriel:fix-md-editor-height
Jan 7, 2026
Merged

Fix: Markdown editor min-height alignment#26430
rijkvanzanten merged 5 commits intodirectus:mainfrom
DamnItAzriel:fix-md-editor-height

Conversation

@DamnItAzriel
Copy link
Contributor

Scope

What's changed:

  • Align the Markdown editor’s internal scroll area with the enforced minimum height of the input container.
  • Replace hardcoded height assumptions with existing design tokens (--input-height-*) to keep layout consistent
  • Prevent the editor from visually collapsing inside a taller container when a minimum height is applied.

Potential Risks / Drawbacks

  • If the toolbar height or input-height-rich-text changes in the future, the corresponding variable will need to be updated to maintain alignment.

Tested Scenarios

  • Markdown editor with different directus supported appearances (default/ minimal/ color match) with light/ dark themes
  • Markdown editor with short content (no visual gap)
  • Markdown editor with long content (editor grows naturally, no internal scrollbar)
  • Switching between Edit and Preview
  • Disabled and non-editable states
  • Different viewport sizes

Review Notes / Questions

  • CodeMirror does not automatically fill unused parent height when a minimum height is enforced on the container.
  • JS-based solution using setSize() was explored but rejected, as it introduces internal scrolling and changes existing editor behavior.
  • This PR addresses the issue by adjusting the container’s layout, which is where the regression originated.

Checklist

  • Added or updated tests (not required – styling/layout fix only)
  • Documentation PR created here (not required)
  • OpenAPI package PR created here (not required)

Fixes #26422

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes a visual glitch in the Markdown editor where the internal scroll area was not properly aligned with the enforced minimum height of the input container, causing an unwanted gap.

Key changes:

  • Refactored CSS height variables from --input-height-tall and --input-height-max to a more semantic naming scheme (--input-height-default, --input-height-large, --input-height-xlarge)
  • Implemented a calculation-based approach in the Markdown editor to properly align the CodeMirror scroll area with the container's minimum height by accounting for the toolbar height
  • Updated all component references throughout the codebase to use the new variable names consistently

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated no comments.

Show a summary per file
File Description
app/src/styles/_variables.scss Renamed and restructured input height CSS variables to use more semantic names (default/large/xlarge)
app/src/interfaces/input-rich-text-md/input-rich-text-md.vue Fixed markdown editor layout by introducing calculated min-height for CodeMirror scroll area that accounts for toolbar height
app/src/styles/lib/_codemirror.scss Updated global CodeMirror scroll min-height to use new --input-height-default variable
app/src/views/private/components/folder-picker.vue Updated max-height calculation to use new variable name
app/src/views/private/components/file-preview.vue Updated preview container height to use new variable name
app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue Updated max-height to use new --input-height-xlarge variable
app/src/interfaces/input-rich-text-html/input-rich-text-html.vue Updated image/media preview height to use new variable name
app/src/interfaces/file-image/file-image.vue Updated image preview and placeholder heights to use new variable name
app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue Updated max-height to use new --input-height-xlarge variable
app/src/components/v-upload.vue Updated dropzone min-height to use new variable name
app/src/components/v-textarea.vue Updated textarea height to use new variable name
app/src/components/v-template-input.vue Updated multiline input height to use new variable name
app/src/components/v-skeleton-loader.vue Updated skeleton loader height to use new variable name
app/src/components/v-form/components/form-field-raw-editor.vue Updated CodeMirror max-height to use new --input-height-xlarge variable
.changeset/soft-tires-yawn.md Added changeset documenting the markdown editor layout fix

@rijkvanzanten rijkvanzanten merged commit 1e1f0d3 into directus:main Jan 7, 2026
65 checks passed
@github-actions github-actions bot added this to the Next Release milestone Jan 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI glitches Markdown Editor

4 participants