Fullscreen height

components/AboutCairoVMBanner.tsx

@@ -1,10 +1,14 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
 
 import { RiCloseLine } from '@remixicon/react'
 
+import { AppUiContext } from 'context/appUiContext'
+
 const AboutCairoVMBanner = () => {
   const [isShown, setIsShown] = useState(false)
 
+  const { isFullScreen } = useContext(AppUiContext)
+
   useEffect(() => {
     // Check if the banner was closed previously
     const isBannerClosed = localStorage.getItem('isBannerClosed')
@@ -23,7 +27,11 @@ const AboutCairoVMBanner = () => {
   }
 
   return (
-    <div className="relative bg-gray-50 dark:bg-black-700 pb-6 mt-0 mb-10">
+    <div
+      className={`relative bg-gray-50 dark:bg-black-700 pb-6 mt-0 mb-10 ${
+        isFullScreen ? 'hidden' : ''
+      }`}
+    >
       <button
         className="absolute top-6 right-6 focus:outline-none"
         onClick={handleCloseBanner}

components/Editor/index.tsx

@@ -74,6 +74,8 @@ const Editor = ({ readOnly = false }: Props) => {
   const editorRef = useRef<SCEditorRef>()
   const [showArgumentsHelper, setShowArgumentsHelper] = useState(false)
 
+  const { isFullScreen } = useContext(AppUiContext)
+
   useEffect(() => {
     const query = router.query
 
@@ -241,7 +243,11 @@ const Editor = ({ readOnly = false }: Props) => {
   return (
     <>
       <div className="bg-gray-100 dark:bg-black-700 rounded-lg">
-        <div className="flex flex-col md:flex-row">
+        <div
+          className={`flex flex-col md:flex-row ${
+            isFullScreen ? 'h-[92vh]' : ''
+          }`}
+        >
           <div className="w-full md:w-1/2 flex flex-col">
             <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r">
               <Header
@@ -298,7 +304,7 @@ const Editor = ({ readOnly = false }: Props) => {
           </div>
 
           <div className="w-full md:w-1/2 flex flex-col">
-            <Tracer mainHeight={cairoEditorHeight} />
+            <Tracer />
           </div>
         </div>
 

components/Tracer/index.tsx

@@ -3,6 +3,7 @@ import { useContext, useEffect, useState, useRef, useReducer } from 'react'
 import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 
+import { AppUiContext } from 'context/appUiContext'
 import { CairoVMApiContext, BreakPoints } from 'context/cairoVMApiContext'
 
 import Console from '../Editor/Console'
@@ -44,11 +45,9 @@ enum IConsoleTab {
   DebugInfo = 'output',
 }
 
-interface TracerProps {
-  mainHeight: number
-}
+export const Tracer = () => {
+  const { isFullScreen } = useContext(AppUiContext)
 
-export const Tracer = ({ mainHeight }: TracerProps) => {
   const {
     tracerData,
     breakPoints,
@@ -66,8 +65,6 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
     IConsoleTab.Console,
   )
 
-  const consoleHeight = 150
-
   const [currentFocus, setCurrentFocus] = useReducer(
     (state: any, newIdx: number) => {
       state = {
@@ -162,7 +159,7 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
 
   return (
     <>
-      <div className="flex-grow">
+      <div>
         <div className="border-t md:border-t-0 border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-6 h-14">
           <ExecutionStatus
             onStepIn={stepIn}
@@ -174,8 +171,9 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
           <>
             <div
               ref={tableRef}
-              className="overflow-auto pane pane-light relative bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
-              style={{ height: mainHeight }}
+              className={`overflow-auto pane pane-light relative bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500 ${
+                isFullScreen ? 'h-[500px]' : 'h-[225px]'
+              }`}
             >
               <InstructionsTable
                 memory={tracerData.memory}
@@ -189,8 +187,8 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
           </>
         )}
       </div>
-      <div className="border-gray-200 border-t">
-        <div className="px-4">
+      <div className="border-gray-200 border-t dark:border-black-500 h-40">
+        <div className="px-4 h-12">
           <nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
             <button
               className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
@@ -220,10 +218,7 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
             </button>
           </nav>
         </div>
-        <div
-          className="pane pane-light overflow-auto"
-          style={{ height: consoleHeight }}
-        >
+        <div className="pane pane-light overflow-auto">
           {selectedConsoleTab === IConsoleTab.Console && <Console />}
 
           {selectedConsoleTab === IConsoleTab.DebugInfo && (

components/layouts/Footer.tsx

@@ -1,10 +1,20 @@
+import { useContext } from 'react'
+
+import { AppUiContext } from 'context/appUiContext'
+
 import { GITHUB_REPO_URL } from 'util/constants'
 
 import { Container } from 'components/ui/Container'
 
 const Footer = () => {
+  const { isFullScreen } = useContext(AppUiContext)
+
   return (
-    <footer className="border-t border-gray-100 dark:border-black-600 py-4">
+    <footer
+      className={`border-t border-gray-100 dark:border-black-600 py-4 ${
+        isFullScreen ? 'hidden' : ''
+      }`}
+    >
       <Container>
         <div className="flex justify-between text-tiny text-gray-500 items-start">
           <div className="flex flex-col md:flex-row leading-6">

components/layouts/Home.tsx

@@ -1,13 +1,19 @@
+import { useContext } from 'react'
+
 import { GoogleAnalytics } from '@next/third-parties/google'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 
+import { AppUiContext } from 'context/appUiContext'
+
 import { getAbsoluteURL } from 'util/browser'
 
 import Footer from './Footer'
 import Nav from './Nav'
 
 const HomeLayout: NextPage = ({ children }) => {
+  const { isFullScreen } = useContext(AppUiContext)
+
   return (
     <>
       <Head>
@@ -30,7 +36,9 @@ const HomeLayout: NextPage = ({ children }) => {
       <div className="flex flex-col h-screen justify-between">
         <Nav />
 
-        <main className="mb-auto mt-20 pb-10">{children}</main>
+        <main className={`mb-auto ${isFullScreen ? 'mt-6' : 'mt-20 pb-10'}`}>
+          {children}
+        </main>
 
         <Footer />
         <GoogleAnalytics gaId="G-E1BJYMMWDD" />

components/layouts/Nav.tsx

@@ -1,6 +1,10 @@
+import { useContext } from 'react'
+
 import cn from 'classnames'
 import Link from 'next/link'
 
+import { AppUiContext } from 'context/appUiContext'
+
 import { GITHUB_REPO_URL } from 'util/constants'
 
 import KBarButton from 'components/KBar/Button'
@@ -10,8 +14,14 @@ import ToggleFullScreen from 'components/ToggleFullScreen'
 import { Container, Logo } from 'components/ui'
 
 const Nav = () => {
+  const { isFullScreen } = useContext(AppUiContext)
+
   return (
-    <nav className="fixed z-40 top-0 inset-x-0 py-2 bg-white dark:bg-black-800">
+    <nav
+      className={`fixed z-40 top-0 inset-x-0 py-2 bg-white dark:bg-black-800 ${
+        isFullScreen ? 'hidden' : ''
+      }`}
+    >
       <Container>
         <div className="h-10 flex items-center justify-between">
           <Link href="/" passHref legacyBehavior>

pages/index.tsx

@@ -30,7 +30,9 @@ const HomePage = () => {
         <Editor />
       </Container>
 
-      <section className="pt-20 pb-10 text-center">
+      <section
+        className={`pt-20 pb-10 text-center ${isFullScreen ? 'hidden' : ''}`}
+      >
         <ContributeBox />
       </section>
     </>