Fix minor style issues on log related views (#564)

* feat(web): use monospace font and preserve whitespace for logs

- Change `white-space: nowrap` to `pre` to keep original formatting.
- Apply `font-family: monospace` for better readability of log contents.

* fixed minor style bug on log view

* Prevent YAML lines are wrapped unintentionally when it's long
* Font setting was different in log list and log body
* Copy button was invisible due to the scroll related css wasn't applied and expanded

Author: kyasbal

web/src/app/common.scss

@@ -16,6 +16,8 @@
 
 $resizer-thickness: 5px;
 
+$font-code: "Google Sans Code", monospace;
+
 @mixin adjust-mat-icon-size($size) {
   width: $size;
   height: $size;

web/src/app/log/components/log-content.component.scss

@@ -50,31 +50,21 @@
       }
     }
   }
-
-  .log-body-container-wrap {
-    grid: "logbody";
-  }
 }
 
-.log-body-container-scrollable {
+.log-body-container {
+  grid: "logbody";
+  margin: 0 10px;
   overflow: auto;
 
-  code.hljs {
-    padding: 0;
-    white-space: pre;
-  }
-
   code {
-    font-family: "Google Sans Code", monospace;
-    font-size: 10px;
-  }
-
-  .log-body-container {
-    margin: 0 10px;
+    white-space: pre;
+    font-family: common.$font-code;
   }
 }
 
 .empty-message {
+  grid: "logbody";
   font-weight: 600;
   color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 700);
   text-align: center;

web/src/app/log/components/log-view-log-line.component.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../zzz-generated" as gen;
+@use "../../common.scss" as common;
 
 :host {
   display: block;
@@ -53,7 +54,8 @@ tr {
     width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
-    white-space: nowrap;
+    white-space: pre;
+    font-family: common.$font-code;
   }
 
   .type-indicator {