Merge pull request #1768 from Kobzol/compare-page-layout

Fix/improve layout of compare page

Author: Kobzol

site/frontend/src/pages/compare/compile/table/comparisons-table.vue

@@ -23,8 +23,9 @@ function prettifyRawNumber(number: number): string {
   return number.toLocaleString();
 }
 
+// Modify this when changing the number of columns in the table!
 const columnCount = computed(() => {
-  const base = 7;
+  const base = 8;
   if (props.showRawData) {
     return base + 2;
   }
@@ -214,7 +215,8 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
     align-items: center;
     text-align: right;
 
-    & > div {
+    & > div,
+    & > span {
       width: 70px;
     }
   }

site/frontend/src/pages/compare/metric-selector.vue

@@ -51,6 +51,7 @@ function changeMetric(e: Event) {
 .wrapper {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   margin: 10px 0;
 

site/frontend/templates/pages/compare.html

@@ -4,7 +4,7 @@
 
 <style>
     body {
-        max-width: 1000px;
+        max-width: 1100px;
         margin: 2% auto;
     }