From 462f9871223ce1b425e81c59adbc8916681e7691 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Tue, 17 Oct 2023 17:11:36 -0700
Subject: [PATCH 1/8] Scale tutorial text with editor zoom.

---
 pxteditor/editor.ts                            |  2 ++
 webapp/src/app.tsx                             | 18 ++++++++++++++++++
 webapp/src/blocks.tsx                          | 15 ++++++++++++++-
 .../components/tutorial/TutorialContainer.tsx  |  5 +++--
 webapp/src/monaco.tsx                          | 15 ++++++++++++++-
 webapp/src/sidepanel.tsx                       |  9 +++++++--
 webapp/src/srceditor.tsx                       |  1 +
 7 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/pxteditor/editor.ts b/pxteditor/editor.ts
index 11c5b373d426..32d2815a9e9d 100644
--- a/pxteditor/editor.ts
+++ b/pxteditor/editor.ts
@@ -15,6 +15,7 @@ namespace pxt.editor {
         zoomOut(): void;
         resize(): void;
         setScale(scale: number): void;
+        onScaleChanged: (oldScale: number, newScale: number) => void;
     }
 
     export interface IFile {
@@ -102,6 +103,7 @@ namespace pxt.editor {
         extensionsVisible?: boolean;
         isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks?
         onboarding?: pxt.tour.BubbleStep[];
+        tutorialFontSize?: number;
     }
 
     export interface EditorState {
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 8137525ce49d..04f84fa4a993 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -211,6 +211,7 @@ export class ProjectView
         this.exitTutorial = this.exitTutorial.bind(this);
         this.setEditorOffset = this.setEditorOffset.bind(this);
         this.resetTutorialTemplateCode = this.resetTutorialTemplateCode.bind(this);
+        this.onScaleChanged = this.onScaleChanged.bind(this);
         this.initSimulatorMessageHandlers();
 
         // add user hint IDs and callback to hint manager
@@ -1029,6 +1030,8 @@ export class ProjectView
         }
         this.allEditors = [this.pxtJsonEditor, this.gitjsonEditor, this.blocksEditor, this.serialEditor, this.assetEditor, this.textEditor]
         this.allEditors.forEach(e => e.changeCallback = changeHandler)
+        this.allEditors.forEach(e => e.onScaleChanged = this.onScaleChanged)
+
         this.editor = this.allEditors[this.allEditors.length - 1]
     }
 
@@ -1532,6 +1535,20 @@ export class ProjectView
         }
     }
 
+    zoomIncrement = 0.25; // TODO thsparks : move up.
+    initialFontSize = 1.125; // TODO thsparks : move up. Can this reference the css?
+
+    onScaleChanged(oldScale: number, newScale: number) {
+        if (this.isTutorial && oldScale !== newScale) {
+            const change = newScale > oldScale ? this.zoomIncrement : -this.zoomIncrement;
+            if (!this.state.tutorialFontSize) {
+                this.setState({ tutorialFontSize: this.initialFontSize + change });
+            } else {
+                this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
+            }
+        }
+    }
+
     ///////////////////////////////////////////////////////////
     ////////////           Load header            /////////////
     ///////////////////////////////////////////////////////////
@@ -5110,6 +5127,7 @@ export class ProjectView
                     {flyoutOnly && <tutorial.WorkspaceHeader parent={this} />}
                 </div>}
                 <sidepanel.Sidepanel parent={this} inHome={inHome}
+                    fontSize={this.state.tutorialFontSize}
                     showKeymap={this.state.keymap && simOpts.keymap}
                     showSerialButtons={useSerialEditor}
                     showFileList={showFileList}
diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 7014087ddc72..4571c03997e6 100644
--- a/webapp/src/blocks.tsx
+++ b/webapp/src/blocks.tsx
@@ -31,6 +31,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     compilationResult: pxt.blocks.BlockCompilationResult;
     isFirstBlocklyLoad = true;
     functionsDialog: CreateFunctionDialog = null;
+    onScaleChanged: (oldScale: number, newScale: number) => void;
 
     showCategories: boolean = true;
     breakpointsByBlock: pxt.Map<number>; // Map block id --> breakpoint ID
@@ -48,6 +49,10 @@ export class Editor extends toolboxeditor.ToolboxEditor {
 
     public nsMap: pxt.Map<toolbox.BlockDefinition[]>;
 
+    // Blockly fires a scale event when it loads, but the user hasn't actually changed the scale.
+    // We use this flag to ignore that initial event.
+    private initialScaleSet: boolean = false;
+
     constructor(parent: pxt.editor.IProjectView) {
         super(parent);
 
@@ -581,7 +586,6 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 Blockly.Events.UI,
                 Blockly.Events.SELECTED,
                 Blockly.Events.CLICK,
-                Blockly.Events.VIEWPORT_CHANGE,
                 Blockly.Events.BUBBLE_OPEN
             ];
 
@@ -636,6 +640,15 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                     }
                 }
             }
+            else if (ev.type === Blockly.Events.VIEWPORT_CHANGE) {
+                const viewportChangeEvent = ev as Blockly.Events.ViewportChange;
+                if (this.initialScaleSet && viewportChangeEvent.oldScale !== viewportChangeEvent.scale) {
+                    if (this.onScaleChanged) {
+                        this.onScaleChanged(viewportChangeEvent.oldScale, viewportChangeEvent.scale);
+                    }
+                }
+                this.initialScaleSet = true;
+            }
 
             // reset tutorial hint animation on any blockly event
             if (this.parent.state.tutorialOptions != undefined) {
diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
index da2ca103e56c..4502663948a6 100644
--- a/webapp/src/components/tutorial/TutorialContainer.tsx
+++ b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -21,6 +21,7 @@ interface TutorialContainerProps {
     hasTemplate?: boolean;
     preferredEditor?: string;
     hasBeenResized?: boolean;
+    fontSize?: number;
 
     tutorialOptions?: pxt.tutorial.TutorialOptions; // TODO (shakao) pass in only necessary subset
     tutorialSimSidebar?: boolean;
@@ -35,7 +36,7 @@ const MAX_HEIGHT = 194;
 
 export function TutorialContainer(props: TutorialContainerProps) {
     const { parent, tutorialId, name, steps, hideIteration, hasTemplate,
-        preferredEditor, tutorialOptions, onTutorialStepChange, onTutorialComplete,
+        preferredEditor, tutorialOptions, fontSize, onTutorialStepChange, onTutorialComplete,
         setParentHeight } = props;
     const [ currentStep, setCurrentStep ] = React.useState(props.currentStep || 0);
     const [ stepErrorAttemptCount, setStepErrorAttemptCount ] = React.useState(0);
@@ -250,7 +251,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     return <div className="tutorial-container">
         {!isHorizontal && stepCounter}
-        <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient}>
+        <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient} style={{fontSize: `${fontSize || 1.125}rem`}}>
             <div className={"tutorial-content-bkg"}>
                 {!isHorizontal && <div className="tutorial-step-label">
                     {name && <span className="tutorial-step-title">{name}</span>}
diff --git a/webapp/src/monaco.tsx b/webapp/src/monaco.tsx
index 604f21ecfdc1..da8aa34b294f 100644
--- a/webapp/src/monaco.tsx
+++ b/webapp/src/monaco.tsx
@@ -340,6 +340,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     extraLibs: pxt.Map<monaco.IDisposable>;
     nsMap: pxt.Map<toolbox.BlockDefinition[]>;
     giveFocusOnLoading: boolean = true;
+    onScaleChanged: (oldScale: number, newScale: number) => void;
 
     protected fieldEditors: FieldEditorManager;
     protected feWidget: ViewZoneEditorHost | ModalEditorHost;
@@ -968,9 +969,13 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             this.editor.onDidLayoutChange((e: monaco.editor.EditorLayoutInfo) => {
                 // Update editor font size in settings after a ctrl+scroll zoom
                 let currentFont = this.getEditorFontSize();
-                if (this.parent.settings.editorFontSize != currentFont) {
+                let prevFont = this.parent.settings.editorFontSize;
+                if (prevFont != currentFont) {
                     this.parent.settings.editorFontSize = currentFont;
                     this.forceDiagnosticsUpdate();
+                    if(this.onScaleChanged) {
+                        this.onScaleChanged(prevFont, currentFont);
+                    }
                 }
                 // Update widgets
                 const toolbox = document.getElementById('monacoToolboxDiv');
@@ -1184,6 +1189,10 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         this.parent.settings.editorFontSize = currentFont + 1;
         this.editor.updateOptions({ fontSize: this.parent.settings.editorFontSize });
         this.forceDiagnosticsUpdate();
+
+        if (this.onScaleChanged) {
+            this.onScaleChanged(currentFont, this.parent.settings.editorFontSize);
+        }
     }
 
     zoomOut() {
@@ -1193,6 +1202,10 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         this.parent.settings.editorFontSize = currentFont - 1;
         this.editor.updateOptions({ fontSize: this.parent.settings.editorFontSize });
         this.forceDiagnosticsUpdate();
+
+        if (this.onScaleChanged) {
+            this.onScaleChanged(currentFont, this.parent.settings.editorFontSize);
+        }
     }
 
     private loadReference() {
diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
index b35dff368973..34a9de4999de 100644
--- a/webapp/src/sidepanel.tsx
+++ b/webapp/src/sidepanel.tsx
@@ -31,6 +31,7 @@ interface SidepanelProps extends pxt.editor.ISettingsProps {
     deviceSerialActive?: boolean;
     tutorialOptions?: pxt.tutorial.TutorialOptions;
     tutorialSimSidebar?: boolean;
+    fontSize?: number;
     onTutorialStepChange?: (step: number) => void;
     onTutorialComplete?: () => void;
     setEditorOffset?: () => void;
@@ -148,9 +149,12 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
         const shouldResize = pxt.BrowserUtils.isTabletSize() || this.props.tutorialSimSidebar;
         const editorSidebarHeight = shouldResize ? `${this.state.height}px` : undefined;
 
+        // TODO thsparks : Is this one even necessary?
+        let editorSidebarStyle = this.props.tutorialSimSidebar ? undefined : {height: editorSidebarHeight, fontSize: `${this.props.fontSize}rem`}
+
         return <div id="simulator" className="simulator">
             {!hasSimulator && <div id="boardview" className="headless-sim" role="region" aria-label={lf("Simulator")} tabIndex={-1} />}
-            <div id="editorSidebar" className="editor-sidebar" style={!this.props.tutorialSimSidebar ? { height: editorSidebarHeight } : undefined}>
+            <div id="editorSidebar" className="editor-sidebar" style={editorSidebarStyle}>
                 <div className={simContainerClassName}>
                     <div className={`ui items simPanel ${showHostMultiplayerGameButton ? "multiplayer-preview" : ""}`} ref={this.handleSimPanelRef}>
                         <div id="boardview" className="ui vertical editorFloat" role="region" aria-label={lf("Simulator")} tabIndex={inHome ? -1 : 0} />
@@ -203,7 +207,8 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
                             hasBeenResized={this.state.resized && shouldResize}
                             onTutorialStepChange={onTutorialStepChange}
                             onTutorialComplete={onTutorialComplete}
-                            setParentHeight={newSize => this.setComponentHeight(newSize, false)} />
+                            setParentHeight={newSize => this.setComponentHeight(newSize, false)}
+                            fontSize={this.props.fontSize} />
                     </VerticalResizeContainer>
                 </div>}
         </div>
diff --git a/webapp/src/srceditor.tsx b/webapp/src/srceditor.tsx
index 7227241066f3..da5ef7c41baa 100644
--- a/webapp/src/srceditor.tsx
+++ b/webapp/src/srceditor.tsx
@@ -14,6 +14,7 @@ export class Editor implements pxt.editor.IEditor {
     isVisible = false;
     constructor(public parent: ProjectView) {
     }
+    onScaleChanged: (oldScale: number, newScale: number) => void;
     changeCallback = () => { };
     setVisible(v: boolean) {
         this.isVisible = v;

From 1f56f2f546c765576c55a6add79143eb14d58a80 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 11:21:36 -0700
Subject: [PATCH 2/8] Remove to do, it looks like I do need this setting.

---
 webapp/src/sidepanel.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
index 34a9de4999de..6adbc2ca295b 100644
--- a/webapp/src/sidepanel.tsx
+++ b/webapp/src/sidepanel.tsx
@@ -148,8 +148,6 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
         const outerTutorialContainerClassName = `editor-sidebar tutorial-container-outer${this.props.tutorialSimSidebar ? " topInstructions" : ""}`
         const shouldResize = pxt.BrowserUtils.isTabletSize() || this.props.tutorialSimSidebar;
         const editorSidebarHeight = shouldResize ? `${this.state.height}px` : undefined;
-
-        // TODO thsparks : Is this one even necessary?
         let editorSidebarStyle = this.props.tutorialSimSidebar ? undefined : {height: editorSidebarHeight, fontSize: `${this.props.fontSize}rem`}
 
         return <div id="simulator" className="simulator">

From 8da311f28a07f075e7d976585e1d88711da330b1 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 11:34:29 -0700
Subject: [PATCH 3/8] Move variables

---
 webapp/src/app.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 04f84fa4a993..049c819393c4 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -152,6 +152,9 @@ export class ProjectView
     private rootClasses: string[];
     private pendingImport: pxt.Util.DeferredPromise<void>;
 
+    private tutorialFontIncrement = 0.25;
+    private tutorialInitialFontSize = 1.125; // rem
+
     private highContrastSubscriber: data.DataSubscriber = {
         subscriptions: [],
         onDataChanged: () => {
@@ -1535,14 +1538,11 @@ export class ProjectView
         }
     }
 
-    zoomIncrement = 0.25; // TODO thsparks : move up.
-    initialFontSize = 1.125; // TODO thsparks : move up. Can this reference the css?
-
     onScaleChanged(oldScale: number, newScale: number) {
         if (this.isTutorial && oldScale !== newScale) {
-            const change = newScale > oldScale ? this.zoomIncrement : -this.zoomIncrement;
+            const change = newScale > oldScale ? this.tutorialFontIncrement : -this.tutorialFontIncrement;
             if (!this.state.tutorialFontSize) {
-                this.setState({ tutorialFontSize: this.initialFontSize + change });
+                this.setState({ tutorialFontSize: this.tutorialInitialFontSize + change });
             } else {
                 this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
             }

From c7f0bdc104555c5e03acc225ff3156841b4fea8b Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 12:14:12 -0700
Subject: [PATCH 4/8] Do not shrink text below initial scale

---
 webapp/src/app.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 049c819393c4..6b7646d6cfdf 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -152,6 +152,7 @@ export class ProjectView
     private rootClasses: string[];
     private pendingImport: pxt.Util.DeferredPromise<void>;
 
+    private initialEditorScale: number;
     private tutorialFontIncrement = 0.25;
     private tutorialInitialFontSize = 1.125; // rem
 
@@ -1036,6 +1037,7 @@ export class ProjectView
         this.allEditors.forEach(e => e.onScaleChanged = this.onScaleChanged)
 
         this.editor = this.allEditors[this.allEditors.length - 1]
+        this.initialEditorScale = undefined;
     }
 
     public UNSAFE_componentWillMount() {
@@ -1540,11 +1542,20 @@ export class ProjectView
 
     onScaleChanged(oldScale: number, newScale: number) {
         if (this.isTutorial && oldScale !== newScale) {
-            const change = newScale > oldScale ? this.tutorialFontIncrement : -this.tutorialFontIncrement;
-            if (!this.state.tutorialFontSize) {
-                this.setState({ tutorialFontSize: this.tutorialInitialFontSize + change });
+            if (this.initialEditorScale === undefined) {
+                this.initialEditorScale = oldScale;
+            }
+
+            if (newScale <= this.initialEditorScale) {
+                // Do not shrink the text beyond its initial size.
+                this.setState({tutorialFontSize: this.tutorialInitialFontSize});
             } else {
-                this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
+                const change = newScale > oldScale ? this.tutorialFontIncrement : -this.tutorialFontIncrement;
+                if (!this.state.tutorialFontSize) {
+                    this.setState({ tutorialFontSize: this.tutorialInitialFontSize + change });
+                } else {
+                    this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
+                }
             }
         }
     }

From 30b0a2c75634eabae17200d5111c9a90c01b46b0 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 15:38:42 -0700
Subject: [PATCH 5/8] Match text scale to zoom percent from the editor

---
 pxteditor/editor.ts      |  1 +
 webapp/src/app.tsx       | 13 ++++++-------
 webapp/src/blocks.tsx    |  5 +++++
 webapp/src/monaco.tsx    |  5 +++++
 webapp/src/srceditor.tsx |  1 +
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/pxteditor/editor.ts b/pxteditor/editor.ts
index 32d2815a9e9d..4f763766ab5a 100644
--- a/pxteditor/editor.ts
+++ b/pxteditor/editor.ts
@@ -14,6 +14,7 @@ namespace pxt.editor {
         zoomIn(): void;
         zoomOut(): void;
         resize(): void;
+        getMaxScale(): number;
         setScale(scale: number): void;
         onScaleChanged: (oldScale: number, newScale: number) => void;
     }
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 6b7646d6cfdf..d14ae8dcf7a4 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -153,8 +153,8 @@ export class ProjectView
     private pendingImport: pxt.Util.DeferredPromise<void>;
 
     private initialEditorScale: number;
-    private tutorialFontIncrement = 0.25;
     private tutorialInitialFontSize = 1.125; // rem
+    private tutorialMaxFontSize = 2; // rem
 
     private highContrastSubscriber: data.DataSubscriber = {
         subscriptions: [],
@@ -1550,12 +1550,11 @@ export class ProjectView
                 // Do not shrink the text beyond its initial size.
                 this.setState({tutorialFontSize: this.tutorialInitialFontSize});
             } else {
-                const change = newScale > oldScale ? this.tutorialFontIncrement : -this.tutorialFontIncrement;
-                if (!this.state.tutorialFontSize) {
-                    this.setState({ tutorialFontSize: this.tutorialInitialFontSize + change });
-                } else {
-                    this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
-                }
+                // Increase font size to match the editor's % zoom.
+                const maxEditorScale = this.editor.getMaxScale();
+                const zoomAmt = (newScale - this.initialEditorScale) / (maxEditorScale - this.initialEditorScale);
+                const newTutorialFontSize = this.tutorialInitialFontSize + (this.tutorialMaxFontSize - this.tutorialInitialFontSize) * zoomAmt;
+                this.setState({ tutorialFontSize: newTutorialFontSize });
             }
         }
     }
diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 4571c03997e6..2347f5d6ea88 100644
--- a/webapp/src/blocks.tsx
+++ b/webapp/src/blocks.tsx
@@ -766,6 +766,11 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         this.editor.zoomCenter(-0.8);
     }
 
+    getMaxScale() {
+        if (!this.editor) return undefined;
+        return this.editor.options.zoomOptions.maxScale;
+    }
+
     setScale(scale: number) {
         if (!this.editor) return;
         if (scale != this.editor.scale) {
diff --git a/webapp/src/monaco.tsx b/webapp/src/monaco.tsx
index da8aa34b294f..f1528f894685 100644
--- a/webapp/src/monaco.tsx
+++ b/webapp/src/monaco.tsx
@@ -1208,6 +1208,11 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         }
     }
 
+    getMaxScale() {
+        if (!this.editor) return undefined;
+        return MAX_EDITOR_FONT_SIZE;
+    }
+
     private loadReference() {
         Util.assert(this.editor != undefined); // Guarded
 
diff --git a/webapp/src/srceditor.tsx b/webapp/src/srceditor.tsx
index da5ef7c41baa..4db7e9adb037 100644
--- a/webapp/src/srceditor.tsx
+++ b/webapp/src/srceditor.tsx
@@ -87,6 +87,7 @@ export class Editor implements pxt.editor.IEditor {
 
     zoomIn() { }
     zoomOut() { }
+    getMaxScale() { return 1; }
     setScale(scale: number) { }
 
     closeFlyout() { }

From 1811886aef84f2abcd748791bf090c138a9e93fd Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 18:15:53 -0700
Subject: [PATCH 6/8] Use css property instead of setting style directly.

---
 theme/tutorial-sidebar.less                          |  5 ++---
 webapp/src/app.tsx                                   | 12 +++++++-----
 webapp/src/components/tutorial/TutorialContainer.tsx |  5 ++---
 webapp/src/sidepanel.tsx                             |  7 ++-----
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/theme/tutorial-sidebar.less b/theme/tutorial-sidebar.less
index 13dcf0437963..3d87d1da89c9 100644
--- a/theme/tutorial-sidebar.less
+++ b/theme/tutorial-sidebar.less
@@ -1,5 +1,4 @@
 @defaultTutorialHeight: 18.625rem;
-@tutorialFontSize: 1.125rem;
 @tutorialTitleFontSize: 1.5rem;
 
 @tutorialPrimaryColor: @sidebarPrimaryColor;
@@ -55,7 +54,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     font-family: @segoeUIFont;
-    font-size: @tutorialFontSize;
+    font-size: var(--tutorialFontSize);
 
     span.docs.inlineblock {
         white-space: break-spaces;
@@ -248,7 +247,7 @@
         margin: 0 1rem;
         color: @white;
         background: @tutorialPrimaryColor;
-        font-size: @tutorialFontSize;
+        font-size: var(--tutorialFontSize);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index d14ae8dcf7a4..9bcca07192d7 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -1116,6 +1116,8 @@ export class ProjectView
         // subscribe to user preference changes (for simulator or non-render subscriptions)
         data.subscribe(this.highContrastSubscriber, auth.HIGHCONTRAST);
         data.subscribe(this.cloudStatusSubscriber, `${cloud.HEADER_CLOUDSTATE}:*`);
+
+        document.getElementById("root").style.setProperty("--tutorialFontSize", `${this.tutorialInitialFontSize}rem`);
     }
 
     public componentWillUnmount() {
@@ -1546,15 +1548,16 @@ export class ProjectView
                 this.initialEditorScale = oldScale;
             }
 
-            if (newScale <= this.initialEditorScale) {
+            const root = document.getElementById("root");
+            if (root && newScale <= this.initialEditorScale) {
                 // Do not shrink the text beyond its initial size.
-                this.setState({tutorialFontSize: this.tutorialInitialFontSize});
-            } else {
+                root.style.setProperty("--tutorialFontSize", `${this.tutorialInitialFontSize}rem`);
+            } else if (root) {
                 // Increase font size to match the editor's % zoom.
                 const maxEditorScale = this.editor.getMaxScale();
                 const zoomAmt = (newScale - this.initialEditorScale) / (maxEditorScale - this.initialEditorScale);
                 const newTutorialFontSize = this.tutorialInitialFontSize + (this.tutorialMaxFontSize - this.tutorialInitialFontSize) * zoomAmt;
-                this.setState({ tutorialFontSize: newTutorialFontSize });
+                root.style.setProperty("--tutorialFontSize", `${newTutorialFontSize}rem`);
             }
         }
     }
@@ -5137,7 +5140,6 @@ export class ProjectView
                     {flyoutOnly && <tutorial.WorkspaceHeader parent={this} />}
                 </div>}
                 <sidepanel.Sidepanel parent={this} inHome={inHome}
-                    fontSize={this.state.tutorialFontSize}
                     showKeymap={this.state.keymap && simOpts.keymap}
                     showSerialButtons={useSerialEditor}
                     showFileList={showFileList}
diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
index 4502663948a6..da2ca103e56c 100644
--- a/webapp/src/components/tutorial/TutorialContainer.tsx
+++ b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -21,7 +21,6 @@ interface TutorialContainerProps {
     hasTemplate?: boolean;
     preferredEditor?: string;
     hasBeenResized?: boolean;
-    fontSize?: number;
 
     tutorialOptions?: pxt.tutorial.TutorialOptions; // TODO (shakao) pass in only necessary subset
     tutorialSimSidebar?: boolean;
@@ -36,7 +35,7 @@ const MAX_HEIGHT = 194;
 
 export function TutorialContainer(props: TutorialContainerProps) {
     const { parent, tutorialId, name, steps, hideIteration, hasTemplate,
-        preferredEditor, tutorialOptions, fontSize, onTutorialStepChange, onTutorialComplete,
+        preferredEditor, tutorialOptions, onTutorialStepChange, onTutorialComplete,
         setParentHeight } = props;
     const [ currentStep, setCurrentStep ] = React.useState(props.currentStep || 0);
     const [ stepErrorAttemptCount, setStepErrorAttemptCount ] = React.useState(0);
@@ -251,7 +250,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     return <div className="tutorial-container">
         {!isHorizontal && stepCounter}
-        <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient} style={{fontSize: `${fontSize || 1.125}rem`}}>
+        <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient}>
             <div className={"tutorial-content-bkg"}>
                 {!isHorizontal && <div className="tutorial-step-label">
                     {name && <span className="tutorial-step-title">{name}</span>}
diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
index 6adbc2ca295b..9c91cffa453f 100644
--- a/webapp/src/sidepanel.tsx
+++ b/webapp/src/sidepanel.tsx
@@ -31,7 +31,6 @@ interface SidepanelProps extends pxt.editor.ISettingsProps {
     deviceSerialActive?: boolean;
     tutorialOptions?: pxt.tutorial.TutorialOptions;
     tutorialSimSidebar?: boolean;
-    fontSize?: number;
     onTutorialStepChange?: (step: number) => void;
     onTutorialComplete?: () => void;
     setEditorOffset?: () => void;
@@ -148,11 +147,10 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
         const outerTutorialContainerClassName = `editor-sidebar tutorial-container-outer${this.props.tutorialSimSidebar ? " topInstructions" : ""}`
         const shouldResize = pxt.BrowserUtils.isTabletSize() || this.props.tutorialSimSidebar;
         const editorSidebarHeight = shouldResize ? `${this.state.height}px` : undefined;
-        let editorSidebarStyle = this.props.tutorialSimSidebar ? undefined : {height: editorSidebarHeight, fontSize: `${this.props.fontSize}rem`}
 
         return <div id="simulator" className="simulator">
             {!hasSimulator && <div id="boardview" className="headless-sim" role="region" aria-label={lf("Simulator")} tabIndex={-1} />}
-            <div id="editorSidebar" className="editor-sidebar" style={editorSidebarStyle}>
+            <div id="editorSidebar" className="editor-sidebar" style={this.props.tutorialSimSidebar ? undefined : {height: editorSidebarHeight}}>
                 <div className={simContainerClassName}>
                     <div className={`ui items simPanel ${showHostMultiplayerGameButton ? "multiplayer-preview" : ""}`} ref={this.handleSimPanelRef}>
                         <div id="boardview" className="ui vertical editorFloat" role="region" aria-label={lf("Simulator")} tabIndex={inHome ? -1 : 0} />
@@ -205,8 +203,7 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
                             hasBeenResized={this.state.resized && shouldResize}
                             onTutorialStepChange={onTutorialStepChange}
                             onTutorialComplete={onTutorialComplete}
-                            setParentHeight={newSize => this.setComponentHeight(newSize, false)}
-                            fontSize={this.props.fontSize} />
+                            setParentHeight={newSize => this.setComponentHeight(newSize, false)} />
                     </VerticalResizeContainer>
                 </div>}
         </div>

From 3e60074387103c0677ddd155e25e595870882e47 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 18:18:39 -0700
Subject: [PATCH 7/8] Undo changes to sidepanel

---
 webapp/src/sidepanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
index 9c91cffa453f..b35dff368973 100644
--- a/webapp/src/sidepanel.tsx
+++ b/webapp/src/sidepanel.tsx
@@ -150,7 +150,7 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
 
         return <div id="simulator" className="simulator">
             {!hasSimulator && <div id="boardview" className="headless-sim" role="region" aria-label={lf("Simulator")} tabIndex={-1} />}
-            <div id="editorSidebar" className="editor-sidebar" style={this.props.tutorialSimSidebar ? undefined : {height: editorSidebarHeight}}>
+            <div id="editorSidebar" className="editor-sidebar" style={!this.props.tutorialSimSidebar ? { height: editorSidebarHeight } : undefined}>
                 <div className={simContainerClassName}>
                     <div className={`ui items simPanel ${showHostMultiplayerGameButton ? "multiplayer-preview" : ""}`} ref={this.handleSimPanelRef}>
                         <div id="boardview" className="ui vertical editorFloat" role="region" aria-label={lf("Simulator")} tabIndex={inHome ? -1 : 0} />

From fff1d72e46c8637f20d8b0d84d4597c6905728e7 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Fri, 20 Oct 2023 15:06:57 -0700
Subject: [PATCH 8/8] Consolidate if statement

---
 webapp/src/blocks.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 2347f5d6ea88..d3972072427b 100644
--- a/webapp/src/blocks.tsx
+++ b/webapp/src/blocks.tsx
@@ -642,10 +642,8 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             }
             else if (ev.type === Blockly.Events.VIEWPORT_CHANGE) {
                 const viewportChangeEvent = ev as Blockly.Events.ViewportChange;
-                if (this.initialScaleSet && viewportChangeEvent.oldScale !== viewportChangeEvent.scale) {
-                    if (this.onScaleChanged) {
-                        this.onScaleChanged(viewportChangeEvent.oldScale, viewportChangeEvent.scale);
-                    }
+                if (this.initialScaleSet && viewportChangeEvent.oldScale !== viewportChangeEvent.scale && this.onScaleChanged) {
+                    this.onScaleChanged(viewportChangeEvent.oldScale, viewportChangeEvent.scale);
                 }
                 this.initialScaleSet = true;
             }