added fullscreen compatibility

Author: crorisvanjski4

src/App.scss

@@ -26,10 +26,22 @@ body {
 	font-family: "Exo", sans-serif;
 }
 
+html {
+	width: 100vw;
+	height: 100vh;
+}
+
+body,
+#root {
+	width: 100%;
+	height: 100%;
+}
+
 .context {
 	width: 100%;
 	position: absolute;
 	display: flex;
+	height: 100%;
 	z-index: 1;
 }
 

src/App.tsx

@@ -1,9 +1,17 @@
 import "./App.scss";
 import BarContainer from "./components/Dashboard";
 
+function isFullScreen(): boolean {
+	let params = new URLSearchParams(document.location.search);
+	let isFullScreen = params.get("fullscreen") === "true";
+	return isFullScreen;
+}
+
 function App() {
+	const fullScreen = isFullScreen();
+
 	return (
-		<>
+		<div data-fullscreen={fullScreen ? "" : undefined}>
 			<div className="context">
 				<BarContainer count={15} speed={60} />
 			</div>
@@ -22,7 +30,7 @@ function App() {
 					<li></li>
 				</ul>
 			</div>
-		</>
+		</div>
 	);
 }
 

src/assets/scss/Dashboard.module.scss

@@ -5,3 +5,9 @@
 	padding: 3rem;
 	gap: 3rem;
 }
+
+div[data-fullscreen] .dashboard {
+	padding: 1.5rem;
+	gap: 1.5rem;
+	justify-content: space-between;
+}

src/assets/scss/SortBox.module.scss

@@ -24,3 +24,7 @@
 		height: 100%;
 	}
 }
+
+div[data-fullscreen] .sort-box-group {
+	min-width: 78vw;
+}