adding formatting for 200% magnification on standard screen (#835)

* adding formatting for 200% magnification on standard screen

* eslint+format

* added some padding to the right header area so the reset progress/getting started buttons dont touch at 150%

* converted from dpi to rem and added no wrap to the reset progress button

* lint

* changed media query to rem, magnification now working on laptop screen

* eslint changing from fill avaliable

* reverting uneccesary change

* added chris' changes

frontend/src/components/ChatBox/ChatBox.css

@@ -15,7 +15,6 @@
 	width: 100%;
 	padding: 0.5rem 2rem 1.5rem;
 	padding: 2rem;
-	font-size: 0.75rem;
 }
 
 .chat-box .footer label {
@@ -67,3 +66,18 @@
 .chat-box .footer .control-buttons > :focus-visible {
 	outline-offset: 0.1rem;
 }
+
+@media only screen and (width <= 70.5rem) {
+	.chat-box .footer {
+		gap: 0.5rem;
+		padding: 1rem;
+	}
+
+	.chat-box .footer .control-buttons {
+		gap: 0.5rem;
+	}
+
+	.chat-box .footer .messages textarea {
+		padding: 0.5rem;
+	}
+}

frontend/src/components/ChatBox/ChatBoxFeed.css

@@ -4,7 +4,6 @@
 	gap: 0.75rem;
 	justify-content: stretch;
 	overflow-y: auto;
-	height: fit-content;
 	padding: 0.5rem 2rem;
 	scrollbar-width: thin;
 }

frontend/src/components/MainComponent/MainFooter.css

@@ -40,3 +40,19 @@
 	display: inline-block;
 	padding: 0 0.75rem;
 }
+
+@media only screen and (width <= 70.5rem) {
+	.main-footer {
+		height: 2rem;
+	}
+
+	.main-footer a svg {
+		height: 1.75rem;
+	}
+
+	.main-footer a svg,
+	.main-footer .links,
+	.main-footer .links a:not(:last-child)::after {
+		padding: 0 0.5rem;
+	}
+}

frontend/src/components/MainComponent/MainHeader.css

@@ -4,7 +4,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: 6.25rem;
+	height: 5rem;
 	padding: 0 2rem;
 	background-color: var(--header-background-colour);
 }
@@ -20,17 +20,20 @@
 .main-header-left {
 	display: flex;
 	align-items: center;
-	width: 100%;
-	height: 100%;
+	height: 80%;
 }
 
 .main-header-left > .title-logo {
-	height: 80%;
+	height: 100%;
+}
+
+.main-header-left .title-logo-small {
+	display: none;
 }
 
 .main-header-middle {
 	display: flex;
-	gap: 1.5rem;
+	gap: 1rem;
 	align-items: center;
 }
 
@@ -41,9 +44,81 @@
 
 .main-header-right {
 	display: flex;
-	gap: 1.5rem;
+	gap: 1rem;
 	justify-content: flex-end;
 	align-items: center;
-	width: 100%;
+	width: fit-content;
 	height: 100%;
+	padding-left: 0.5rem;
+}
+
+@media only screen and (width <= 77rem) {
+	.themed-button > img {
+		display: none;
+	}
+}
+
+@media only screen and (width <= 70.5rem) {
+	.main-header {
+		gap: 0.5rem;
+		height: 3.5rem;
+		padding: 0.25rem 0.5rem;
+	}
+
+	.main-header .main-header-middle {
+		gap: 0.5rem;
+	}
+
+	.main-header .main-header-middle .main-header-level {
+		font-size: 1.5rem;
+	}
+
+	.main-header .themed-button.level-button {
+		height: 2.5rem;
+		padding: 0.5rem;
+	}
+
+	.main-header .main-header-right {
+		gap: 0.5rem;
+	}
+
+	button.level-mission-info-banner {
+		padding: 0 0.5rem;
+		border-width: 0.5rem 0.25rem;
+	}
+
+	span.level-title-area {
+		min-width: unset;
+		font-size: 1.25rem;
+		white-space: nowrap;
+	}
+
+	.main-header .header-button {
+		padding: 0.5rem;
+		white-space: normal;
+	}
+}
+
+@media only screen and (width <= 50.5rem) {
+	.main-header .header-button {
+		padding: 0.25rem;
+	}
+
+	.main-header {
+		gap: 0.25rem;
+	}
+
+	.main-header .title-logo {
+		display: none;
+	}
+
+	.main-header .main-header-left {
+		width: 10%;
+	}
+
+	.main-header .title-logo-small {
+		display: block;
+		width: 4rem;
+		padding: 0.2rem;
+	}
 }

frontend/src/components/MainComponent/MainHeader.tsx

@@ -1,6 +1,7 @@
 import GettingStarted from '@src/assets/icons/GettingStarted.svg';
 import HandbookIcon from '@src/assets/icons/Handbook.svg';
 import ResetProgress from '@src/assets/icons/ResetProgressIcon.svg';
+import SpyLogicLogoSmall from '@src/assets/images/SmolFace_sm.png';
 import SpyLogicLogo from '@src/assets/images/SpyLogicLogo.png';
 import SpyLogicLogoAffirmative from '@src/assets/images/SpyLogicLogo_Affirmative.png';
 import LevelSelectionBox from '@src/components/LevelSelectionBox/LevelSelectionBox';
@@ -34,6 +35,11 @@ function MainHeader({
 					src={isLevelComplete ? SpyLogicLogoAffirmative : SpyLogicLogo}
 					alt="Spy Logic"
 				/>
+				<img
+					className="title-logo-small"
+					src={SpyLogicLogoSmall}
+					alt="Spy Logic"
+				/>
 				<h1 className="visually-hidden">Spy Logic</h1>
 			</span>
 			<span className="main-header-middle">