Improve output panels with error messages (#1505)

Closes
RaspberryPiFoundation/digital-editor-issues#1512

### Changes
- In smaller project container (`.project-wrapper` container in
Project.scss):
  - Visual output panel and text output panel are split in 1:1. 
  - min height of text panel set to 3rem. 
  
<img width="450" alt="Screenshot 2026-06-22 at 15 57 17"
src="https://github.com/user-attachments/assets/930538b6-7e3c-43f8-9074-2bd78ac712e8"
/>

- In larger container (min-width: 720px):
  - Visual output panel and text output panel are split in 3:2. 
  - min height of text panel increased to 4rem. 
  
<img width="600" alt="Screenshot 2026-06-22 at 15 58 07"
src="https://github.com/user-attachments/assets/dc207c3f-4381-4aef-8de9-9bb4227c81a2"
/>

Author: cocomarine

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;

src/assets/stylesheets/PythonRunner.scss

@@ -97,11 +97,26 @@
   overflow: hidden;
 
   &--text {
-    flex: 3;
+    flex: 1;
+
+    .react-tabs__tab-panel--selected {
+      min-block-size: var(--space-6);
+    }
+
+    @container (min-width: 720px) {
+      flex: 2;
+      .react-tabs__tab-panel--selected {
+        min-block-size: var(--space-8);
+      }
+    }
   }
 
   &--visual {
-    flex: 7;
+    flex: 1;
+
+    @container (min-width: 720px) {
+      flex: 3;
+    }
 
     .--light & {
       border-block-end: 5px solid $rpf-grey-100;