adding formatting for 200% magnification on standard screen

ScottLogic · Feb 13, 2024 · 6eaa1ac · 6eaa1ac
1 parent a63c0ac
commit 6eaa1ac
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+	}
+}