From ba9c074dc286addc2e88c11be4f7db3183012f4f Mon Sep 17 00:00:00 2001
From: spiral <spiral@spiral.sh>
Date: Wed, 15 Jun 2022 00:08:47 -0400
Subject: [PATCH] feat(dashboard): somewhat better styling of shard status page

---
 dashboard/src/lib/shard.svelte    |  3 +--
 dashboard/src/pages/status.svelte | 35 +++++++++++++++++++------------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/lib/shard.svelte b/dashboard/src/lib/shard.svelte
index 6acb9f36..c66fc722 100644
--- a/dashboard/src/lib/shard.svelte
+++ b/dashboard/src/lib/shard.svelte
@@ -48,8 +48,7 @@
 	.wrapper {
 		height: 55px;
 		width: 55px;
-		display: block;
-		float: left;
+		display: inline-block;
 	}
 	.shard:hover {
 		cursor: pointer;
diff --git a/dashboard/src/pages/status.svelte b/dashboard/src/pages/status.svelte
index 6a88beb1..3c84c9b9 100644
--- a/dashboard/src/pages/status.svelte
+++ b/dashboard/src/pages/status.svelte
@@ -96,7 +96,7 @@
     
 </script>
 
-<Container fluid>
+<Container>
     <Row>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
             <Card class="mb-4">
@@ -157,18 +157,27 @@
     {#each Object.keys(clusters) as key}
         <Row>
             <Col class="mx-auto" xs={12} lg={11} xl={10}>
-                <Card class="mb-4">
-                    <CardBody>
-                        <CardTitle style="margin-top: 8px; outline: none;">
-                            Cluster {key}
-                        </CardTitle>
-                        <br>
-                        {#each clusters[key] as shard}
-                            <ShardItem shard={shard} bind:hover={hover} />
-                        {/each}
-                    </CardBody>
-                </Card>
+                <div class="cluster-card">
+                    <span class="cluster-text">Cluster {key} &nbsp</span>
+                    {#each clusters[key] as shard}
+                    <ShardItem shard={shard} bind:hover={hover} />
+                    {/each}
+                </div>
             </Col>
         </Row>
     {/each}
-</Container>
\ No newline at end of file
+</Container>
+
+<style>
+    .cluster-card {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        margin-bottom: 2.5px;
+    }
+
+    .cluster-text {
+        min-width: 110px;
+        text-align: right;
+    }
+</style>
\ No newline at end of file