From 8726b92205849eb6f44b5c2eea409826ee5f5c1d Mon Sep 17 00:00:00 2001
From: Roy Lane <rlane@mitre.org>
Date: Mon, 23 Dec 2024 14:54:57 -0500
Subject: [PATCH] metrics: fix tables in mobile view

---
 src/views/About/Metrics.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/views/About/Metrics.vue b/src/views/About/Metrics.vue
index a82a1b32..84542c66 100644
--- a/src/views/About/Metrics.vue
+++ b/src/views/About/Metrics.vue
@@ -710,8 +710,33 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-//Equally space data cells in metrics tables
+
+// Equally space data cells in metrics tables
+// Numbers in metrics tables look better right-aligned.
+
 td {
   width: auto !important;
+  text-align: right !important;
 }
+
+// For the mobile screen sizes, this overrides the settings in cveTableStacked,
+// which was causing tables to be split into multiple tables and the year
+// headings to be hidden.  This keeps the tables intact.  Mobile users will
+// be able to horizontally scroll as normal.
+
+@media only screen and (max-width: $desktop) {
+
+  td {
+    display: table-cell;
+  }
+
+  thead th {
+    display: table-cell;
+  }
+
+  tr {
+    display: table-row !important;
+  }
+}
+
 </style>