Diagnostics panel: log view only, full width

Drop the version/browser rows; the log pre now fills the layout width
instead of a fixed 80ch that overflowed once the scrollbar appeared.

frontend/src/components/Header.vue

@@ -302,20 +302,7 @@
 
           <section class="settings-section">
             <h2 class="settings-section-title">Diagnostics</h2>
-            <p class="settings-section-desc">
-              Version info and application log for troubleshooting.
-            </p>
-
-            <div class="diag-rows">
-              <div class="diag-row">
-                <span class="diag-label">App version</span>
-                <span class="diag-value">{{ appVersion || "…" }}</span>
-              </div>
-              <div class="diag-row">
-                <span class="diag-label">Browser engine</span>
-                <span class="diag-value">{{ browserEngine }}</span>
-              </div>
-            </div>
+            <p class="settings-section-desc">Application log for troubleshooting.</p>
 
             <div class="diag-log-header">
               <span class="diag-label">Application log</span>
@@ -334,7 +321,7 @@ import { ref, watch, computed, onMounted, onUnmounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { navAttrs } from "../composables/useKeyboardNavigation"
 import logoUrl from "../assets/mediahive.webp"
-import { replaceRoots, pickFolderAndAddRoot, fetchPlayers, getVersion, getLog } from "../api"
+import { replaceRoots, pickFolderAndAddRoot, fetchPlayers, getLog } from "../api"
 import type { PlayerInfo } from "../api"
 import HexKeyboard from "./HexKeyboard.vue"
 import {
@@ -437,10 +424,8 @@ async function refreshPlayers() {
   }
 }
 
-const appVersion = ref("")
 const appLog = ref("")
-const browserEngine = navigator.userAgent
-let diagnosticsFetched = false
+let logFetched = false
 
 async function refreshLog() {
   try {
@@ -451,16 +436,6 @@ async function refreshLog() {
   }
 }
 
-async function refreshDiagnostics() {
-  try {
-    appVersion.value = await getVersion()
-  } catch (e) {
-    console.error("Failed to fetch version:", e)
-    appVersion.value = "unknown"
-  }
-  await refreshLog()
-}
-
 async function removeRoot(rootId: string) {
   const filtered = roots.value.filter((r) => r.root_id !== rootId)
   const newRoots = Object.fromEntries(filtered.map((r) => [r.root_id, r.path]))
@@ -490,9 +465,9 @@ async function addRoot() {
 watch(showSettings, (visible) => {
   if (visible) {
     void refreshPlayers()
-    if (!diagnosticsFetched) {
-      diagnosticsFetched = true
-      void refreshDiagnostics()
+    if (!logFetched) {
+      logFetched = true
+      void refreshLog()
     }
   }
 })
@@ -925,33 +900,11 @@ onUnmounted(() => {
   color: #22c55e;
 }
 
-.diag-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.diag-row {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px 10px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-}
-
 .diag-label {
   font-size: 0.75rem;
   color: var(--text-secondary);
 }
 
-.diag-value {
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  word-break: break-all;
-}
-
 .diag-log-header {
   display: flex;
   align-items: center;
@@ -979,8 +932,7 @@ onUnmounted(() => {
   font-size: 0.75rem;
   white-space: pre-wrap;
   word-break: break-all;
-  width: 80ch;
-  max-width: 100%;
+  width: 100%;
   max-height: 320px;
   overflow-y: auto;
   margin: 0;