fix: fix console log level alignment and mobile layout issue (#7988)

* fix: fix console log level alignment and mobile layout issue

* Update ConsoleDisplayer.vue

Author: lingyun14beta

dashboard/src/components/shared/ConsoleDisplayer.vue

@@ -362,6 +362,7 @@ export default {
   border-radius: 8px;
   height: 100%;
   overflow-y: auto;
+  overflow-x: auto;
   padding: 16px;
 }
 
@@ -379,7 +380,7 @@ export default {
 
 :deep(.console-log-line--structured) {
   display: grid;
-  grid-template-columns: max-content 10ch minmax(0, 1fr);
+  grid-template-columns: max-content max-content minmax(0, 1fr);
   column-gap: 8px;
   align-items: start;
   white-space: normal;
@@ -400,6 +401,16 @@ export default {
   overflow-wrap: anywhere;
 }
 
+@media (max-width: 768px) {
+  :deep(.console-log-line--structured) {
+    grid-template-columns: 1fr;
+  }
+  :deep(.console-log-prefix:empty),
+  :deep(.console-log-level:empty) {
+    display: none;
+  }
+}
+
 :deep(.fade-in) {
   animation: fadeIn 0.3s;
 }