From 8b3f743fa901a8e09c47a4216b421a9b679f7a68 Mon Sep 17 00:00:00 2001
From: Malex14 <39774812+Malex14@users.noreply.github.com>
Date: Sat, 16 Nov 2024 23:50:05 +0100
Subject: [PATCH] fixed css responsiveness issues, fixed icon positions,
 reenabled the commented out `@media` css rules, removed remains from when the
 css-file was scss

Signed-off-by: Malex14 <39774812+Malex14@users.noreply.github.com>
---
 css/style.css                | 36 +++++++++++++++++++++++-------------
 templates/settings-admin.php |  2 +-
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/css/style.css b/css/style.css
index dc6e7eb5..b3603e7d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,7 +9,6 @@
 .monitoring-wrapper {
 	display: -webkit-flex;
 	display: flex;
-	position: left;
 	max-width: 50%;
 	min-width: 50%;
 }
@@ -53,11 +52,6 @@
 	border-radius: var(--border-radius-large);
 }
 
-.infobox.cpuSection,
-.infobox.memorySection {
-    padding: 16px 0 0 0;
-}
-
 .diskchart-container {
 	width: 100px;
 	margin-right: 25px;
@@ -80,14 +74,24 @@
 	background-color: var(--color-primary-element);
 }
 
-@media only screen and (max-width: $breakpoint-mobile) {
+@media (width <= 1280px) {
 	.infobox {
 		display: block;
+		word-break: break-word;
+	}
+
+	.text-center-mobile {
 		text-align: center;
 	}
+
 	.diskchart-container {
 		margin: 0 auto;
 	}
+
+	.monitoring-wrapper {
+		min-width: 100%;
+		max-width: 100%;
+	}
 }
 
 .diskinfo-container {
@@ -102,7 +106,7 @@
 
 .infoicon {
 	width: 28px;
-	float: left;
+	vertical-align: middle;
 	padding: 5px;
 	filter: var(--background-invert-if-dark);
 }
@@ -211,7 +215,7 @@
 	min-width: 100%;
 }
 
-/*
+
 @media only screen and (max-width: 1200px) {
 	.col-xl-6 {
 		flex-basis: 50%;
@@ -234,7 +238,7 @@
 	}
 }
 
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (max-width: 768px) {
 	.col-m-6 {
 		flex-basis: 50%;
 		max-width: 50%;
@@ -247,7 +251,7 @@
 		min-width: 100%;
 	}
 }
-*/
+
 
 .monitoring-url-params {
 	margin-top: 3px;
@@ -256,8 +260,14 @@
 
 .monitoring-url-param {
 	display: flex;
-	align-items: center;
-	height: 24px;
+	align-items: start;
+	margin-bottom: 3px;
+}
+
+.monitoring-url-param input {
+	margin-top: 4px;
+	min-height: initial;
+	height: initial;
 }
 
 .active-users-wrapper {
diff --git a/templates/settings-admin.php b/templates/settings-admin.php
index eb5049ad..cbd5df21 100644
--- a/templates/settings-admin.php
+++ b/templates/settings-admin.php
@@ -136,7 +136,7 @@ function FormatMegabytes(int $byte): string {
 			</div>
 			<?php foreach ($disks as $disk): ?>
 				<div class="col col-4 col-xl-6 col-m-12">
-					<div class="infobox">
+					<div class="infobox text-center-mobile">
 						<div class="diskchart-container">
 							<canvas id="DiskChart" class="DiskChart" style="width:100%; height:200px" width="600"
 									height="200"></canvas>