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

maxelkins · web-flow · commit b9481df707e5 · 2025-06-18T15:41:39.000Z
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)
diff --git a/CHANGELOG.md b/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
 
diff --git a/src/assets/stylesheets/Tabs.scss b/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;
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/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>
