From 33560012ec9dbeacf43792bf8162aec6c09be96b Mon Sep 17 00:00:00 2001
From: cocomarine <hj.kang@raspberrypi.org>
Date: Mon, 22 Jun 2026 14:39:44 +0100
Subject: [PATCH 1/4] update text and visual output ratio, add min height to
 console panel and add border to error message

---
 src/assets/stylesheets/ErrorMessage.scss | 2 +-
 src/assets/stylesheets/PythonRunner.scss | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss
index 5f5b5a6b5..c0889fb9e 100644
--- a/src/assets/stylesheets/ErrorMessage.scss
+++ b/src/assets/stylesheets/ErrorMessage.scss
@@ -4,7 +4,7 @@
 .error-message {
   color: var(--rpf-red-900);
   background-color: var(--rpf-red-100);
-  border-block-start: 1px solid var(--editor-color-outline);
+  border-block: 1px solid var(--editor-color-outline);
   padding: var(--space-1);
   overflow-y: auto;
   scrollbar-width: thin;
diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index 87a25e53e..40d9a86bd 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/src/assets/stylesheets/PythonRunner.scss
@@ -97,11 +97,15 @@
   overflow: hidden;
 
   &--text {
-    flex: 3;
+    flex: 4;
+
+    .react-tabs__tab-panel--selected {
+      min-block-size: var(--space-8);
+    }
   }
 
   &--visual {
-    flex: 7;
+    flex: 6;
 
     .--light & {
       border-block-end: 5px solid $rpf-grey-100;

From 7c3e9dbe86139d5f99841eb534ee082fece4b648 Mon Sep 17 00:00:00 2001
From: cocomarine <hj.kang@raspberrypi.org>
Date: Mon, 22 Jun 2026 14:43:34 +0100
Subject: [PATCH 2/4] use flex 2 and 3

---
 src/assets/stylesheets/PythonRunner.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index 40d9a86bd..7931eefb7 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/src/assets/stylesheets/PythonRunner.scss
@@ -97,7 +97,7 @@
   overflow: hidden;
 
   &--text {
-    flex: 4;
+    flex: 2;
 
     .react-tabs__tab-panel--selected {
       min-block-size: var(--space-8);
@@ -105,7 +105,7 @@
   }
 
   &--visual {
-    flex: 6;
+    flex: 3;
 
     .--light & {
       border-block-end: 5px solid $rpf-grey-100;

From ad99179a97ecfe7be4b17d1640c532518335b3a6 Mon Sep 17 00:00:00 2001
From: cocomarine <hj.kang@raspberrypi.org>
Date: Mon, 22 Jun 2026 15:26:17 +0100
Subject: [PATCH 3/4] adjust ratio and min height in smaller screen

---
 src/assets/stylesheets/PythonRunner.scss | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index 7931eefb7..b0d670372 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/src/assets/stylesheets/PythonRunner.scss
@@ -97,15 +97,24 @@
   overflow: hidden;
 
   &--text {
-    flex: 2;
-
+    flex: 1;
     .react-tabs__tab-panel--selected {
-      min-block-size: var(--space-8);
+      min-block-size: var(--space-4);
+    }
+    @container (min-width: 720px) {
+      flex: 2;
+      .react-tabs__tab-panel--selected {
+        min-block-size: var(--space-8);
+      }
     }
   }
 
   &--visual {
-    flex: 3;
+    flex: 1;
+
+    @container (min-width: 720px) {
+      flex: 3;
+    }
 
     .--light & {
       border-block-end: 5px solid $rpf-grey-100;

From e1a16a90ad09f9a4671e8ed59a2d2f6b14a4a5ad Mon Sep 17 00:00:00 2001
From: cocomarine <hj.kang@raspberrypi.org>
Date: Mon, 22 Jun 2026 15:49:07 +0100
Subject: [PATCH 4/4] adjust min height

---
 src/assets/stylesheets/PythonRunner.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index b0d670372..5ec38191d 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/src/assets/stylesheets/PythonRunner.scss
@@ -98,9 +98,11 @@
 
   &--text {
     flex: 1;
+
     .react-tabs__tab-panel--selected {
-      min-block-size: var(--space-4);
+      min-block-size: var(--space-6);
     }
+
     @container (min-width: 720px) {
       flex: 2;
       .react-tabs__tab-panel--selected {