[EuiCodeBlock] Fix border/margin interaction with EuiText

border was including the margin-bottom on `pre` tags in text, which we don't want reran VRT, no regressions
elastic · Dec 12, 2024 · e75d2fa · e75d2fa
1 parent ae36491
commit e75d2fa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/packages/eui/src/components/code/code_block.styles.ts b/packages/eui/src/components/code/code_block.styles.ts
@@ -28,10 +28,6 @@ export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
       display: block;
       position: relative;
       background: ${codeSyntaxVariables.backgroundColor};
-      ${highContrastModeStyles(euiThemeContext, {
-        preferred: `border: ${euiTheme.border.thin};`,
-      })}
-
       ${codeSyntaxVariables.tokensCss}
     `,
     // Font size
@@ -84,6 +80,10 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
       overflow: auto;
       display: block;
       ${euiScrollBarStyles(euiThemeContext)}
+      ${highContrastModeStyles(euiThemeContext, {
+        // High contrast border must be on the <pre> element to play nicely with EuiText margins
+        preferred: `border: ${euiTheme.border.thin};`,
+      })}
     `,
     padding: {
       ...generatePaddingCss(euiThemeContext, (paddingSize: string) => {

diff --git a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts
@@ -32,10 +32,6 @@ const euiScaleMarkdownFormatText = (
   return `
     .euiMarkdownFormat__codeblockWrapper {
       ${logicalCSS('margin-bottom', fontSize)}
-
-      .euiCodeBlock__pre {
-        ${logicalCSS('margin-bottom', 0)}
-      }
     }
 
     .euiMarkdownFormat__table {