feat: polish UI some more

Author: serhalp

app/components/CacheAnalysis.vue

@@ -67,6 +67,14 @@ const { servedBy, cacheStatus } = getCacheAnalysis(props.cacheHeaders);
 </template>
 
 <style scoped>
+.container {
+  font-size: 0.9em;
+}
+
+hr {
+  margin-top: 0.5em;
+}
+
 .cache-heading h4 {
   padding: 0;
   /* I'm sorry */

app/components/RawCacheHeaders.vue

@@ -19,18 +19,22 @@ onUpdated(highlightJson);
 </template>
 
 <style scoped>
-/* FIXME(serhalp) This is leaky. I'm doing this:
- * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins.
- * But this component shouldn't "know" about its parent's layout needs.
- */
 pre {
+  /* The default is too airy */
+  padding-bottom: 0;
+  margin-bottom: 0;
+  /* FIXME(serhalp) This is leaky. I'm doing this:
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins.
+   * But this component shouldn't "know" about its parent's layout needs.
+   */
   margin-top: auto;
+  margin-right: auto;
 }
 
 code {
-  font-size: 0.7em;
+  font-size: 0.6em;
 
-  max-width: 40vw;
+  max-width: 30vw;
   overflow-x: scroll;
 }
 </style>