feat(dashboard): tweak status page styling

dashboard/src/lib/shard.svelte

@@ -46,8 +46,7 @@
 
 <style>
 	.wrapper {
-		height: 55px;
+		position: relative;
-		width: 55px;
 		display: inline-block;
 	}
 	.shard:hover {
@@ -63,10 +62,8 @@
 		text-align: center;
 		justify-content: center;
 		z-index: 1;
-		height: 50px;
+		height: 3em;
-		width: 50px;
+		width: 3em;
-		margin-right: 5px;
-		margin-bottom: 5px;
 		border-radius: 2px;
 		-webkit-touch-callout: none; /* iOS Safari */
 		  -webkit-user-select: none; /* Safari */
@@ -79,10 +76,11 @@
 	.more-info {
 		/* display: none; */
 		position: absolute;
-		margin-top: 3em;
+		top: 100%;
+		right: -50%;
 		will-change: transform;
 		min-height: 150px;
-		width: 200px;
+		width: 12em;
 		z-index: 2;
 		border-radius: 5px;
 		background-color: #333;

dashboard/src/pages/status.svelte

@@ -154,30 +154,51 @@
             </Col>
         </Row>
     {/if}
-    {#each Object.keys(clusters) as key}
+    <Row>
-        <Row>
+        <Col class="mx-auto" xs={12} lg={11} xl={10}>
-            <Col class="mx-auto" xs={12} lg={11} xl={10}>
+        <div class="cluster-grid">
-                <div class="cluster-card">
+        {#each Object.keys(clusters) as key}
-                    <span class="cluster-text">Cluster {key} &nbsp</span>
+            <div class="cluster-card">
-                    {#each clusters[key] as shard}
+                <span class="cluster-text">Cluster {key} &nbsp</span>
-                    <ShardItem shard={shard} bind:hover={hover} />
+            </div>
-                    {/each}
+            <div class="cluster-shards">
-                </div>
+                {#each clusters[key] as shard}
-            </Col>
+                <ShardItem shard={shard} bind:hover={hover} />
-        </Row>
+                {/each}
-    {/each}
+            </div>
+        {/each}
+        </div>
+        </Col>
+    </Row>
 </Container>
 
 <style>
-    .cluster-card {
+    .cluster-shards {
         display: flex;
         align-items: center;
+        gap: 5px;
         flex-wrap: wrap;
-        margin-bottom: 2.5px;
+        margin-bottom: 0.5em;
     }
 
-    .cluster-text {
+    .cluster-grid {
-        min-width: 110px;
+        display: grid;
-        text-align: right;
+        grid-template-columns: 100%;
+        gap: 0.5em;
+    }
+
+    @media (min-width: 576px) {
+        .cluster-card {
+            text-align: right;
+            margin-bottom: 0.5em;
+        }
+
+        .cluster-text {
+            line-height: 3em;
+        }
+
+        .cluster-grid {
+            grid-template-columns: max-content 1fr;
+        }
     }
 </style>