UI Cleanup & Optimization (#4673)

* Use prewrap so vainfo output appears normalized

* Move copy button to top so user doesn't need to scroll to copy logs

* Show calculating if no value for stream bandwidth

web/src/routes/Logs.jsx

@@ -40,12 +40,13 @@ export default function Logs() {
 
       <ButtonsTabbed viewModes={['frigate', 'go2rtc', 'nginx']} setViewMode={setLogService} />
 
-      <div className='overflow-auto font-mono text-sm text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 whitespace-pre-wrap'>
-        {logs}
-      </div>
       <Button className="" onClick={handleCopyLogs}>
         Copy to Clipboard
       </Button>
+
+      <div className="overflow-auto font-mono text-sm text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 whitespace-pre-wrap">
+        {logs}
+      </div>
     </div>
   );
 }

web/src/routes/Storage.jsx

@@ -97,7 +97,7 @@ export default function Storage() {
                     <Tbody>
                       <Tr>
                         <Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
-                        <Td>{camera['bandwidth']} MB/hr</Td>
+                        <Td>{camera['bandwidth'] ? camera['bandwidth'] : "Calculating..."} MB/hr</Td>
                       </Tr>
                     </Tbody>
                   </Table>

web/src/routes/System.jsx

@@ -114,7 +114,7 @@ export default function System() {
               <ActivityIndicator />
             )}
           </div>
-          <div className="p-2 flex justify-start flex-row-reverse space-x-2">
+          <div className="p-2 flex justify-start flex-row-reverse space-x-2 whitespace-pre-wrap">
             <Button className="ml-2" onClick={() => onCopyVainfo()} type="text">
               Copy
             </Button>