Hide unnecessary scrollbar areas appearing to right of input and output panels

CHANGELOG.md

@@ -21,12 +21,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Change port number to fix 'no consent token' error (#326)
 - Long file names truncated rather than scrolling in left hand file pane (#316)
-- Delete project action on project index page (#330)
-- Refactored project list loading to allow loading states to be shown (#330)
+- Tab scrollbars only appear when necessary (#331)
 
 ### Fixed
 - Make sure button text is always centered (#328)
+- Delete project action on project index page (#330)
+- Refactored project list loading to allow loading states to be shown (#330)
 - Touch area of icon-only buttons (#330)
+- Removed unneeded scrollbars on the editor and output panels (#331)
 
 ## [0.10.0] - 2023-01-06
 

src/components/Editor/Project/Project.scss

@@ -55,7 +55,7 @@
     display: flex;
     flex-flow: column;
     flex: 5;
-    overflow-y: scroll;
+    overflow-y: hidden;
     box-sizing: border-box;
 
     .react-tabs__tab-panel--selected {
@@ -66,7 +66,7 @@
   .proj-runner-container {
     display: flex;
     flex: 5;
-    overflow-y: scroll;
+    overflow-y: hidden;
 
     .react-tabs__tab-panel--selected {
       overflow-y: auto;

src/components/Editor/Runners/PythonRunner/PythonRunner.scss

@@ -9,7 +9,8 @@
 }
 
 .pythonrunner-console {
-  margin: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2);
+  margin: 0;
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;

src/tabs.scss

@@ -11,6 +11,7 @@ $spacing-four: calc($spacing-eight / 2);
     flex-flow: column;
     overflow: hidden;
     position: relative;
+    border-radius: 10px;
 
     &__tab-inner {
       @extend .btn;
@@ -95,7 +96,7 @@ $spacing-four: calc($spacing-eight / 2);
 
     &__tab-list {
       display: flex;
-      overflow-x: scroll;
+      overflow-x: auto;
       overflow-y: hidden;
       margin: 0;
     }