Merge pull request #1929 from Zentrik/fix-graph-styling

Fix styling of benchmark detail graphs

Author: Kobzol

site/frontend/src/pages/compare/benchmark-detail.scss

@@ -0,0 +1,39 @@
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin: 10px 0;
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  &.graphs {
+    flex-wrap: nowrap;
+  }
+}
+
+.graphs {
+  margin-top: 15px;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  &.center-items {
+    align-items: center;
+  }
+}
+
+.title {
+  &.bold,
+  .bold {
+    font-weight: bold;
+  }
+
+  &.info {
+    margin-bottom: 15px;
+  }
+}

site/frontend/src/pages/compare/compile/table/benchmark-detail-graph.vue

@@ -266,3 +266,7 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+@import "../../benchmark-detail.scss";
+</style>

site/frontend/src/pages/compare/compile/table/benchmark-detail.vue

@@ -250,51 +250,13 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-.columns {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin: 10px 0;
-
-  .grow {
-    flex-grow: 1;
-  }
-
-  &.graphs {
-    flex-wrap: nowrap;
-  }
-}
-
-.graphs {
-  margin-top: 15px;
-}
-
-.rows {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  &.center-items {
-    align-items: center;
-  }
-}
+@import "../../benchmark-detail.scss";
 
 .shortcut {
   margin-top: 15px;
   text-align: left;
 }
 
-.title {
-  &.bold,
-  .bold {
-    font-weight: bold;
-  }
-
-  &.info {
-    margin-bottom: 15px;
-  }
-}
-
 table {
   align-self: flex-start;
   margin-right: 20px;

site/frontend/src/pages/compare/runtime/benchmark-detail-graph.vue

@@ -256,3 +256,7 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+@import "../benchmark-detail.scss";
+</style>