some minor styling changes

microsoft · Dec 22, 2023 · eb25533 · eb25533
1 parent dabc943
commit eb25533
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -54,14 +54,18 @@ function App() {
     return (
         <>
             <HeaderBar />
-            <div className="appContainer">
-                <DebugInput />
+            <div className="app-container">
+                <div className="debug-container">
+                    <DebugInput />
+                </div>
+                <MakeCodeFrame pageSourceUrl={createIFrameUrl()}
+                    onFrameOpen={onIframeLoaded}
+                    onFrameClose={onIframeClosed}
+                />
             </div>
+
             <Notifications />
-            <MakeCodeFrame pageSourceUrl={createIFrameUrl()}
-                onFrameOpen={onIframeLoaded}
-                onFrameClose={onIframeClosed}
-            />
+
         </>
     );
 }

diff --git a/teachertool/src/components/makecodeFrame.tsx b/teachertool/src/components/makecodeFrame.tsx
@@ -164,7 +164,7 @@ export const MakeCodeFrame: React.FC<MakeCodeFrameProps> =
             {openingProject && <ProgressBar className="makecode-frame-loader-bar" value={loadPercent! / 100} />}
             <div className="makecode-frame-loader-text">{lf("Loading...")}</div>
         </div>
-        <iframe className="makecode-frame" src={pageSourceUrl} title={"title"} ref={frameRef} style={{width: "70vw", height: "70vh"}}></iframe>
+        <iframe className="makecode-frame" src={pageSourceUrl} title={"title"} ref={frameRef}></iframe>
     </div>
     /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */
 }
diff --git a/teachertool/src/teacherTool.css b/teachertool/src/teacherTool.css
@@ -80,7 +80,10 @@ code {
     cursor: default;
 }
 
-/* HEADER BAR */
+/*******************************/
+/***** HEADER BAR  *****/
+/*******************************/
+
 .header {
     background-color: var(--tertiary-color);
 
@@ -337,13 +340,16 @@ code {
     background-color: var(--secondary-color);
 }
 
-.appContainer {
+/*******************************/
+/***** DEBUG INPUT STYLING  *****/
+/*******************************/
+
+.debug-container {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    width: 100%;
-    height: 100%;
     padding: 1rem;
+    height: 45vh;
 }
 
 .single-share-link-input-container {
@@ -371,6 +377,16 @@ code {
     width: 100%;
 }
 
+/*******************************/
+/***** IFRAME STYLING  *****/
+/*******************************/
+
+.makecode-frame {
+    width: 55vw;
+    height: 50vh;
+    margin: 0 2.5rem;
+}
+
 /*******************************/
 /***** SMALL DESKTOP VIEW  *****/
 /*******************************/