From eb4080f16ef1fffbea84872d7d5641a787caa58c Mon Sep 17 00:00:00 2001
From: sgfost <46429375+sgfost@users.noreply.github.com>
Date: Wed, 11 Dec 2024 20:08:46 -0700
Subject: [PATCH] feat: adjust metrics page layout

---
 frontend/src/components/MetricsSelector.vue |  3 +++
 frontend/src/components/MetricsView.vue     | 14 +++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MetricsSelector.vue b/frontend/src/components/MetricsSelector.vue
index 1c6ead990..6567e0ed7 100644
--- a/frontend/src/components/MetricsSelector.vue
+++ b/frontend/src/components/MetricsSelector.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="card">
+    <div class="card-body bg-light py-2 text-gray">
+      <b> Select a metric to view </b>
+    </div>
     <ul class="list-group list-group-flush">
       <!-- Members -->
       <li class="list-group-item">
diff --git a/frontend/src/components/MetricsView.vue b/frontend/src/components/MetricsView.vue
index 4abc7e869..dbc94a389 100644
--- a/frontend/src/components/MetricsView.vue
+++ b/frontend/src/components/MetricsView.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class="row">
-    <div class="col-sm-12 col-md-3" style="padding-top: 2.5rem">
+  <div class="row my-5">
+    <div class="col">
+      <div class="card">
+        <UserMapView :metrics-data="metricsData" />
+      </div>
+    </div>
+  </div>
+  <div class="row my-5">
+    <div class="col-sm-12 col-md-3">
       <MetricsSelector v-model="selectedChart" />
     </div>
     <div class="col-sm-12 col-md-9">
@@ -32,9 +39,6 @@
       </div>
     </div>
   </div>
-  <div>
-    <UserMapView :metrics-data="metricsData" />
-  </div>
 </template>
 
 <script setup lang="ts">