fix: change tab block-size to min-block-size to allow height to grow (#1219)

Closes:
RaspberryPiFoundation/digital-editor-issues#690

## Summary

**Issue related:**
- Change tab `block-size` to `min-block-size` to allow height to grow
- Also change to correct custom property to ensure minimum target size

**Fixing failing tests:**
- The Skulpt runner implementation was hiding tab/elements by setting
block-size (height) to 0. As a result when using `min-block-size` this
was causing cypress visiblity test to fail.
- It was previously passing since cypress considers height 0 as not
visible.
- This implementation has now been changed to set `display: none` to
properly remove the element
- There are 2 other potential changes that could be made here
1. Conditially render the elements instead - as the
[PyodideRunner](https://github.com/RaspberryPiFoundation/editor-ui/blob/main/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx#L440)
does
2. Change the cypress test to check for
[existence](https://docs.cypress.io/api/commands/its#Existence) instead
- I've opted not to change the above to keep this PR smaller

## Demo
![Screenshot 2025-06-17 at 16 32
17](https://github.com/user-attachments/assets/0686064b-c3d5-4a70-b1b6-86e670754dc0)

Author: maxelkins

CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## Fixed
+
+- Styling issue preventing scrolling in the sidebar (#1216)
+- Styling issue on status bar on mobile (#1217)
+- Change tab `block-size` to `min-block-size` to allow for height increase when text wraps (#1219)
+- Changed `SkulptRunner.jsx` implementation of hiding elements to use `display: none` rather than `block-size: 0` (#1219)
+
 ## [0.30.1] - 2025-06-09
 
 ### Added
@@ -19,8 +26,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - Styling issue on sidebar on mobile (#1194)
-- Styling issue preventing scrolling in the sidebar (#1216)
-- Styling issue on status bar on mobile (#1217)
 
 ## [0.30.0] - 2025-04-15
 

src/assets/stylesheets/Tabs.scss

@@ -19,7 +19,7 @@
       margin: 0;
       inset-block-start: 0;
       inset-block-end: 0;
-      block-size: $space-3;
+      min-block-size: var(--min-target-size);
       box-sizing: border-box;
       display: flex;
       align-items: center;

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -485,7 +485,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
           {showVisualOutputPanel && (
             <div
               className={outputPanelClasses("visual")}
-              style={{ blockSize: showVisualOutput ? "auto" : 0 }}
+              style={{ display: showVisualOutput ? undefined : "none" }}
             >
               <Tabs forceRenderTabPanel={true}>
                 <div
@@ -549,7 +549,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
         >
           <div className="react-tabs__tab-container">
             <TabList>
-              <Tab key={0} style={{ blockSize: showVisualOutput ? "auto" : 0 }}>
+              <Tab
+                key={0}
+                style={{ display: showVisualOutput ? undefined : "none" }}
+              >
                 <span className="react-tabs__tab-text">
                   {t("output.visualOutput")}
                 </span>