feat: UI made responsive for mobile screen (#5)

* [feat] UI made responsive for mobile screen

* [fix] : Inverting min-width implemenation for mobile; In mobile, event Loop in focus when code starts to run

* [fix] File renamed to match convention

src/App.styled.ts

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 export const Layout = styled.div`
 	flex: 1;
@@ -8,6 +8,12 @@ export const Layout = styled.div`
 	grid-template-rows: repeat(36, 1fr);
 	grid-gap: 20px;
 	padding: 20px;
+
+	@media (max-width: 768px) {
+		grid-template-columns: 1fr;
+		grid-template-rows: auto;
+		grid-gap: 10px;
+	}
 `;
 
 const BaseLayoutElement = styled.div(
@@ -34,42 +40,89 @@ export const Info = styled.div`
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 1;
+	}
 `;
 
 export const Editor = styled(BaseLayoutElement)`
 	padding: 0;
 	grid-column: 1 / 2;
 	grid-row: 5 / 31;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 2;
+    height: 50vh;
+	}
 `;
 
 export const WebApi = styled(List)`
 	grid-column: 1 / 2;
 	grid-row: 31 / 37;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 3;
+    height: 10vh;
+	}
 `;
 
 export const CallStack = styled(List)`
 	grid-column: 2 / 3;
 	grid-row: 1 / 19;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 4;
+    height: 10vh;
+	}
 `;
 
 export const Console = styled(List)`
 	grid-column: 2 / 3;
 	grid-row: 19 / 37;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 5;
+    height: 10vh;
+	}
 `;
 
 export const RenderCallbacks = styled(List)`
 	grid-column: 3 / 4;
 	grid-row: 1 / 7;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 6;
+    height: 10vh;
+	}
 `;
 
 export const Tasks = styled(List)`
 	grid-column: 3 / 4;
 	grid-row: 7 / 13;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 7;
+    height: 10vh;
+	}
 `;
 
 export const Microtasks = styled(List)`
 	grid-column: 3 / 4;
 	grid-row: 13 / 19;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 8;
+    height: 10vh;
+	}
 `;
 
 export const EventLoop = styled(BaseLayoutElement)`
@@ -82,6 +135,12 @@ export const EventLoop = styled(BaseLayoutElement)`
 	overflow: auto;
 	gap: 10px;
 	position: relative;
+
+	@media (max-width: 768px) {
+		grid-column: 1;
+		grid-row: 9;
+    height: 40vh;
+	}
 `;
 
 export const EventLoopBody = styled.div`

src/App.tsx

@@ -1,13 +1,13 @@
-import EventLoop from './components/EventLoop/EventLoop.tsx';
-import Editor from './components/Editor/Editor.tsx';
-import TasksQueue from './components/TasksQueue/TasksQueue.tsx';
-import Console from './components/Console/Console.tsx';
+import * as Styled from './App.styled.ts';
 import CallStack from './components/Callstack/Callstack.tsx';
+import Console from './components/Console/Console.tsx';
+import Editor from './components/Editor/Editor.tsx';
+import EventLoop from './components/EventLoop/EventLoop.tsx';
 import MicroTasksQueue from './components/MicroTasksQueue/MicroTasksQueue.tsx';
 import RequestAnimationFrameQueue from './components/RenderCallbacksQueue/RequestAnimationFrameQueue.tsx';
+import TasksQueue from './components/TasksQueue/TasksQueue.tsx';
 import WebApiQueue from './components/WebApiQueue/WebApiQueue.tsx';
 import StylesProvider from './providers/StylesProvider.tsx';
-import * as Styled from './App.styled.ts';
 
 function App() {
 	return (
@@ -54,7 +54,7 @@ function App() {
 					<MicroTasksQueue />
 				</Styled.Microtasks>
 				<Styled.EventLoop>
-					<p>Event Loop</p>
+					<p id="eventLoop">Event Loop</p>
 					<Styled.EventLoopBody>
 						<EventLoop />
 					</Styled.EventLoopBody>

src/components/Editor/Editor.tsx

@@ -1,27 +1,28 @@
-import AceEditor from 'react-ace';
-import { useEffect, useRef, useState } from 'react';
+import PauseIcon from '@mui/icons-material/Pause';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Slider,
+} from '@mui/material';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-solarized_dark';
-import { codeExamples } from './Editor.data.tsx';
-import { parse } from '../../utils/parse.ts';
+import { useEffect, useRef, useState } from 'react';
+import AceEditor from 'react-ace';
 import {
-	useEditor,
-	useEventLists,
-	useEventLoopAnimation,
-	useSpeedFactor,
+  useEditor,
+  useEventLists,
+  useEventLoopAnimation,
+  useSpeedFactor,
 } from '../../store/store.ts';
-import {
-	FormControl,
-	InputLabel,
-	MenuItem,
-	Select,
-	SelectChangeEvent,
-	Slider,
-} from '@mui/material';
+import { isMobile } from '../../utils/isMobile.ts';
+import { parse } from '../../utils/parse.ts';
+import { codeExamples } from './Editor.data.tsx';
 import * as Styled from './Editor.styled.ts';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import StopIcon from '@mui/icons-material/Stop';
-import PauseIcon from '@mui/icons-material/Pause';
 
 const codeByTitle = codeExamples.reduce(
 	(acc, { title, code }) => {
@@ -96,6 +97,15 @@ function EditorComponent() {
 		}
 	}, []);
 
+  useEffect(() => {
+    if(isMobile() && status === "running" && document.getElementById("eventLoop")) {
+      document.getElementById("eventLoop").scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    }
+  },[status]);
+
 	return (
 		<Styled.SectionWrapper>
 			<Styled.ControlsWrapper>

src/providers/StylesProvider.tsx

@@ -1,5 +1,5 @@
+import { Global, ThemeProvider, css } from '@emotion/react';
 import { createTheme } from '@mui/material';
-import { ThemeProvider, Global, css } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 
 const muiTheme = createTheme({
@@ -105,6 +105,20 @@ const globalStyles = css`
 	ul,
 	ol {
 		padding-left: 15px;
+  }
+  
+  #root {
+      margin: 0;
+      text-align: center;
+      display: flex;
+      height: 100%;
+      width: 100%;
+      min-height: 814px;
+      
+      @media (min-width: 768px) {
+        min-width: 1024px;
+      }
+  }
 
 		& > li:not(:last-child) {
 			margin-bottom: 10px;

src/utils/constants.ts

@@ -0,0 +1,3 @@
+export const SCREEN_WIDTH = {
+  SM: 640
+};

src/utils/isMobile.ts

@@ -0,0 +1,3 @@
+import { SCREEN_WIDTH } from "./constants";
+
+export const isMobile = () => window.innerWidth < SCREEN_WIDTH.SM;