5 files changed, 22 insertions, 10 deletions

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 174b1205..e6227672 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -46,6 +46,7 @@ export default observer(function EditorArea({
     >
       <EditorTheme
         showLineNumbers={editorStore.showLineNumbers}
+        showActiveLine={!editorStore.hasSelection}
         ref={editorParentRef}
       />
       <EditorAreaDecorations parent={parent} scroller={scroller} />
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index bcd324e5..199a8e1d 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -21,7 +21,7 @@ function EditorLoading(): JSX.Element {
   );
 
   return (
-    <Box mx={2}>
+    <Box mx={2} width="100%">
       {skeletonSizes.map((length, i) => (
         /* eslint-disable-next-line react/no-array-index-key --
           Random placeholders have no identity.
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index c74e732f..d13f644c 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -255,6 +255,10 @@ export default class EditorStore {
     log.debug('Show line numbers', this.showLineNumbers);
   }
 
+  get hasSelection(): boolean {
+    return this.state.selection.ranges.some(({ from, to }) => from !== to);
+  }
+
   formatText(): boolean {
     this.client.formatText();
     return true;
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index db051d0e..3ec977da 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -10,8 +10,12 @@ function svgURL(svg: string): string {
 
 export default styled('div', {
   name: 'EditorTheme',
-  shouldForwardProp: (propName) => propName !== 'showLineNumbers',
-})<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
+  shouldForwardProp: (propName) =>
+    propName !== 'showLineNumbers' && propName !== 'showActiveLine',
+})<{
+  showLineNumbers: boolean;
+  showActiveLine: boolean;
+}>(({ theme, showLineNumbers, showActiveLine }) => {
   const editorFontStyle = {
     ...theme.typography.editor,
     fontWeight: theme.typography.fontWeightEditorNormal,
@@ -39,7 +43,9 @@ export default styled('div', {
       padding: 0,
     },
     '.cm-activeLine': {
-      background: theme.palette.highlight.activeLine,
+      background: showActiveLine
+        ? theme.palette.highlight.activeLine
+        : 'transparent',
     },
     '.cm-activeLineGutter': {
       background: 'transparent',
@@ -367,6 +373,7 @@ export default styled('div', {
     '.cm-tooltip.cm-tooltip-autocomplete': {
       ...editorFontStyle,
       background: theme.palette.background.paper,
+      border: 'none',
       borderRadius: theme.shape.borderRadius,
       overflow: 'hidden',
       ...(theme.palette.mode === 'dark' && {
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 550b3b30..09a72d54 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -247,20 +247,20 @@ const darkTheme = createResponsiveTheme({
     divider: alpha('#abb2bf', 0.24),
     outer: {
       background: '#21252b',
-      border: '#181a1f',
+      border: '#333841',
     },
     highlight: {
       number: '#6188a6',
       parameter: '#c8ae9d',
-      comment: '#5c6370',
-      activeLine: '#21252b',
-      selection: '#3e4453',
+      comment: '#7f848e',
+      activeLine: '#2c313c',
+      selection: '#404859',
       lineNumber: '#5c6370',
       foldPlaceholder: alpha('#ebebff', 0.12),
       activeLintRange: alpha('#fbc346', 0.28),
       occurences: {
-        read: alpha('#ebebff', 0.24),
-        write: alpha('#ebebff', 0.24),
+        read: alpha('#ebebff', 0.14),
+        write: alpha('#ebebff', 0.14),
       },
       search: {
         match: '#33eaff',