From 5b763886a1e3a1844ea5875bd5905b2718e398dc Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sat, 25 Jan 2025 19:38:46 +0100
Subject: [PATCH] style: fix canister row display on monitoring

---
 .../lib/components/canister/Canister.svelte   | 38 ++++++++++---------
 .../monitoring/MonitoringArticle.svelte       |  2 +-
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/lib/components/canister/Canister.svelte b/src/frontend/src/lib/components/canister/Canister.svelte
index 4b791568d..27b66ba96 100644
--- a/src/frontend/src/lib/components/canister/Canister.svelte
+++ b/src/frontend/src/lib/components/canister/Canister.svelte
@@ -68,6 +68,8 @@
 {/if}
 
 <style lang="scss">
+	@use '../../styles/mixins/media';
+
 	p {
 		max-width: 300px;
 		color: var(--value-color);
@@ -94,29 +96,31 @@
 	}
 
 	.row {
-		display: flex;
-		gap: var(--padding-2x);
+		font-size: var(--font-size-small);
 
-		p {
-			margin: 0;
-			position: relative;
+		@include media.min-width(large) {
+			display: flex;
+			gap: var(--padding-2x);
 
-			font-size: var(--font-size-small);
+			p {
+				margin: 0;
+				position: relative;
 
-			min-width: var(--padding-8x);
-			--skeleton-text-padding: 0;
+				min-width: var(--padding-8x);
+				--skeleton-text-padding: 0;
 
-			&:not(:last-of-type):after {
-				content: '';
-				border-right: 1px solid currentColor;
+				&:not(:last-of-type):after {
+					content: '';
+					border-right: 1px solid currentColor;
 
-				display: block;
-				height: 75%;
+					display: block;
+					height: 75%;
 
-				position: absolute;
-				top: 0;
-				right: 0;
-				transform: translate(var(--padding), 20%) rotate(15deg);
+					position: absolute;
+					top: 0;
+					right: 0;
+					transform: translate(var(--padding), 20%) rotate(15deg);
+				}
 			}
 		}
 	}
diff --git a/src/frontend/src/lib/components/monitoring/MonitoringArticle.svelte b/src/frontend/src/lib/components/monitoring/MonitoringArticle.svelte
index 94c716ccc..173b98d95 100644
--- a/src/frontend/src/lib/components/monitoring/MonitoringArticle.svelte
+++ b/src/frontend/src/lib/components/monitoring/MonitoringArticle.svelte
@@ -180,7 +180,7 @@
 	}
 
 	.canister {
-		margin: var(--padding-4x) 0 0;
+		margin: var(--padding-2x) 0 0;
 
 		@include media.min-width(large) {
 			margin: 0;