diff --git a/app/client/cypress/snapshots/Regression/ClientSide/VisualTests/JSEditorIndent_spec.js/formattedJSONBodyAfterSave.snap.png b/app/client/cypress/snapshots/Regression/ClientSide/VisualTests/JSEditorIndent_spec.js/formattedJSONBodyAfterSave.snap.png index 57987e31c7..cf865f7a8d 100644 Binary files a/app/client/cypress/snapshots/Regression/ClientSide/VisualTests/JSEditorIndent_spec.js/formattedJSONBodyAfterSave.snap.png and b/app/client/cypress/snapshots/Regression/ClientSide/VisualTests/JSEditorIndent_spec.js/formattedJSONBodyAfterSave.snap.png differ diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts index c26b3eec79..6df20f60ac 100644 --- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts +++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts @@ -90,7 +90,7 @@ export const EditorWrapper = styled.div<{ .CodeMirror-focused { outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline) !important; - outline-offset: var(--ads-v2-offset-outline) !important; + outline-offset: -1px !important; z-index: 1 !important; } `} @@ -106,13 +106,14 @@ export const EditorWrapper = styled.div<{ .cm-s-duotone-light.CodeMirror { border-radius: var(--ads-v2-border-radius); /* ${(props) => + props.showFocusVisible && props.isFocused && `outline: ${ props?.removeHoverAndFocusStyle ? "none" : "var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline)" }; - outline-offset: var(--ads-v2-offset-outline); + outline-offset: -1px; clip-path: unset !important; `} */ ${(props) => props.isFocused && `clip-path: unset !important;`} @@ -402,13 +403,17 @@ export const EditorWrapper = styled.div<{ } } - &:focus-visible { - .CodeMirror.cm-s-duotone-light { - outline: var(--ads-v2-border-width-outline) solid - var(--ads-v2-color-outline); - outline-offset: var(--ads-v2-offset-outline); + ${(props) => + props.showFocusVisible && + ` + &:focus-visible { + .CodeMirror.cm-s-duotone-light { + outline: var(--ads-v2-border-width-outline) solid + var(--ads-v2-color-outline); + outline-offset: -1px; + } } - } + `} ${(props) => props.size === EditorSize.COMPACT ||