From 6eaa1ac36ba5852253314c476702f3fc7a41802c Mon Sep 17 00:00:00 2001
From: AAloshine-scottlogic
 <125262433+AAloshine-scottlogic@users.noreply.github.com>
Date: Tue, 13 Feb 2024 16:36:05 +0000
Subject: [PATCH] adding formatting for 200% magnification on standard screen

---
 frontend/src/components/ChatBox/ChatBox.css   | 14 ++++++-
 .../src/components/ChatBox/ChatBoxFeed.css    |  1 -
 .../components/MainComponent/MainFooter.css   | 15 +++++++
 .../components/MainComponent/MainHeader.css   | 41 +++++++++++++++++++
 4 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
index 7b6c0c845..c9132ed33 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/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,16 @@
 .chat-box .footer .control-buttons > :focus-visible {
 	outline-offset: 0.1rem;
 }
+
+@media only screen and (min-resolution: 150dpi) {
+	.chat-box .footer {
+		padding: 1rem;
+		gap: 0.5rem;
+	}
+	.chat-box .footer .control-buttons {
+		gap: 0.5rem;
+	}
+	.chat-box .footer .messages textarea {
+		padding: 0.5rem;
+	}
+}
diff --git a/frontend/src/components/ChatBox/ChatBoxFeed.css b/frontend/src/components/ChatBox/ChatBoxFeed.css
index 729027c59..bbb371725 100644
--- a/frontend/src/components/ChatBox/ChatBoxFeed.css
+++ b/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;
 }
diff --git a/frontend/src/components/MainComponent/MainFooter.css b/frontend/src/components/MainComponent/MainFooter.css
index 775f8db3c..a79f167fe 100644
--- a/frontend/src/components/MainComponent/MainFooter.css
+++ b/frontend/src/components/MainComponent/MainFooter.css
@@ -40,3 +40,18 @@
 	display: inline-block;
 	padding: 0 0.75rem;
 }
+
+@media only screen and (min-resolution: 150dpi) {
+	.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;
+	}
+}
diff --git a/frontend/src/components/MainComponent/MainHeader.css b/frontend/src/components/MainComponent/MainHeader.css
index 1a764c0b6..e9c9cecd6 100644
--- a/frontend/src/components/MainComponent/MainHeader.css
+++ b/frontend/src/components/MainComponent/MainHeader.css
@@ -47,3 +47,44 @@
 	width: 100%;
 	height: 100%;
 }
+
+@media only screen and (min-resolution: 150dpi) {
+	.main-header-left > .title-logo {
+		height: 80%;
+	}
+	.main-header {
+		height: 3.5rem;
+		padding: 0 0.5rem;
+		gap: 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 {
+		font-size: 1.25rem;
+		white-space: nowrap;
+		min-width: unset;
+	}
+	.main-header .header-button {
+		padding: 0.5rem;
+		white-space: normal;
+	}
+
+	.themed-button > img {
+		display: none;
+	}
+}