fix top padding

Author: tsck

packages/code-editor/src/CodeEditor/CodeEditor.tsx

@@ -277,7 +277,7 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
             createPanel: view => {
               const dom = document.createElement('div');
               dom.style.position = 'absolute';
-              dom.style.top = '-8px'; // Accounts for top padding of the editor
+              dom.style.top = '0';
               dom.style.right = '0';
               dom.style.left = '0';
               dom.style.display = 'flex';

packages/code-editor/src/CodeEditor/CodeEditor.types.ts

@@ -91,6 +91,7 @@ export const CodeEditorSelectors = {
   GutterElement: '.cm-gutterElement',
   Gutters: '.cm-gutters',
   HyperLink: '.cm-hyper-link-icon',
+  InnerEditor: '.cm-scroller',
   Line: '.cm-line',
   LineNumbers: '.cm-lineNumbers',
   LineWrapping: '.cm-lineWrapping',

packages/code-editor/src/CodeEditor/hooks/extensions/useThemeExtension.ts

@@ -77,8 +77,6 @@ export function useThemeExtension({
             borderTopLeftRadius: hasPanel ? 0 : `${borderRadius[300]}px`,
             borderTopRightRadius: hasPanel ? 0 : `${borderRadius[300]}px`,
             color: color[theme].text[Variant.Primary][InteractionState.Default],
-            paddingTop: `${spacing[200]}px`,
-            paddingBottom: `${spacing[200]}px`,
           },
 
           [`&${CodeEditorSelectors.Focused}`]: {
@@ -87,6 +85,11 @@ export function useThemeExtension({
     ${color[theme].border[Variant.Secondary][InteractionState.Default]}`,
           },
 
+          [CodeEditorSelectors.InnerEditor]: {
+            paddingTop: `${spacing[200]}px`,
+            paddingBottom: `${spacing[200]}px`,
+          },
+
           [CodeEditorSelectors.Content]: {
             fontFamily: fontFamilies.code,
             fontSize: `${fontSize}px`,