Change code wrapping to scrollbar (#242)

Co-authored-by: Lois Wells <lois.wells@raspberrypi.org>
Co-authored-by: Steve Gilroy <stephen.gilroy@raspberrypi.org>

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- Switch wrapping in the editor to horizontal scrolling for long lines (#242)
+
 ## [0.7.0]
 
 ### Changed

src/components/Editor/EditorPanel/EditorPanel.scss

@@ -2,23 +2,25 @@
   display: flex;
   flex-flow: column;
   flex: 1;
+  overflow: hidden;
 
   .cm-editor {
     flex: 1;
+    overflow: hidden;
 
     &:focus {
       outline: none;
     }
 
-    .cm-content {
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-      flex: 1;
-      padding-top: var(--spacing-1);
-    }
+    .cm-scroller {
+      overflow: auto;
+      overscroll-behavior-x: none;
 
-    .cm-line {
-      padding-right: var(--spacing-1)
+      .cm-content {
+        flex: 1;
+        padding-top: var(--spacing-1);
+        margin-right: var(--spacing-1);
+      }
     }
   }
 }

src/components/Editor/Project/Project.scss

@@ -52,11 +52,19 @@
     flex-flow: column;
     width: 42%;
     box-sizing: border-box;
+
+    .react-tabs__tab-panel--selected {
+    overflow-y: hidden;
+    }
   }
 
   .proj-runner-container {
     display: flex;
     width: 42%;
+
+    .react-tabs__tab-panel--selected {
+      overflow-y: auto;
+    }
   }
 
   &--wc {

src/components/Editor/editorDarkTheme.js

@@ -4,9 +4,8 @@ import '@rpf/sauce/scss/properties/_font-size.scss';
 import '@rpf/sauce/scss/properties/_line-height.scss';
 
 export const editorDarkTheme = EditorView.theme({
-  ".cm-scroller": {overflow: "auto"},
   ".cm-gutters": {
-    "background-color": "inherit",
+    "background-color": "#2E3038",
     "border": "none"
   },
   ".cm-activeLine": {

src/components/Editor/editorLightTheme.js

@@ -1,7 +1,6 @@
 import { EditorView } from '@codemirror/view';
 
 export const editorLightTheme = EditorView.theme({
-  ".cm-scroller": {overflow: "auto"},
   ".cm-activeLine": {
     "background-color": "inherit",
   },

src/components/EmbeddedViewer/EmbeddedViewer.scss

@@ -12,7 +12,7 @@
 
     .visual-output {
       box-sizing: border-box;
-      overflow: scroll;
+      overflow: auto;
     }
   }
 }

src/components/Menus/FileMenu/FileMenu.scss

@@ -1,7 +1,7 @@
 @import '../../../colours.scss';
 
 .file-menu {
-  overflow-y: scroll;
+  overflow-y: auto;
   width: 16%;
 
   summary {

src/tabs.scss

@@ -34,7 +34,6 @@
       flex: 1;
       display: flex;
       flex-flow: column;
-      overflow-y: scroll;
     }
   }