aio-interface: improve overlay log appearance

Agent-Logs-Url: https://github.com/nextcloud/all-in-one/sessions/d51a2637-5128-4c8a-a18c-a86085d2cb88 aio-interface: do not cache the containers, logs and setup screen as it shows credentials Signed-off-by: Simon L. <szaimen@e.mail.de> fix: address PR review comments - remove inline script (CSP), use default font string Agent-Logs-Url: https://github.com/nextcloud/all-in-one/sessions/62e290a3-94de-4988-aeb8-b577fec135a7 Co-Authored-By: szaimen <42591237+szaimen@users.noreply.github.com>
2026-05-21 10:50:10 +00:00 · 2026-05-19 16:30:33 +02:00
6 changed files with 12 additions and 8 deletions
--- a/php/public/logs.css
+++ b/php/public/logs.css
@@ -10,6 +10,7 @@ pre {
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 #floating-box {
    position: fixed;
@@ -26,7 +27,8 @@ pre {
    gap: 0.5rem;
    font-size: large;
    border: solid thin gray;
-    background-color: #f9f9f9;
+    background-color: var(--color-main-background);
+    color: var(--color-main-text);
    width: 10rem;
    padding: 0.5rem 1rem;
    margin: 0 0 0 1rem;
--- a/php/public/style.css
+++ b/php/public/style.css
@@ -483,8 +483,8 @@ input[type="checkbox"]:disabled:not(:checked) + label {
    visibility: hidden;
    opacity: 0;
    align-self: start;
-    width: 300px;
-    height: 200px;
+    width: min(700px, calc(100vw - 4rem));
+    height: min(400px, calc(100vh - 14rem));
    border-radius: var(--border-radius-large);
    border: solid thin rgb(192, 192, 192);
 }
--- a/php/public/toggle-dark-mode.js
+++ b/php/public/toggle-dark-mode.js
@@ -35,4 +35,6 @@ setThemeToDOM(getSavedTheme());
 document.addEventListener('DOMContentLoaded', () => {
    setThemeIcon(getSavedTheme())
    document.querySelector('button#theme-toggle')?.addEventListener('click', () => toggleTheme());
+    // Re-apply theme when the overlay-log iframe navigates (e.g. after a form submission).
+    document.querySelector('iframe#overlay-log')?.addEventListener('load', () => setThemeToDOM(getSavedTheme()));
 });
--- a/php/src/Controller/DockerController.php
+++ b/php/src/Controller/DockerController.php
@@ -401,7 +401,7 @@ readonly class DockerController {
        <!DOCTYPE html>
        <html lang="en" class="overlay-iframe">
            <head>
-                <link rel="stylesheet" href="../../style.css?v8" media="all" />
+                <link rel="stylesheet" href="../../style.css?v9" media="all" />
                <script type="text/javascript" src="../../scroll-into-view.js"></script>
            </head>
            <body>
--- a/php/templates/layout.twig
+++ b/php/templates/layout.twig
@@ -2,10 +2,10 @@
 <html lang="en">
    <head>
        <title>AIO</title>
-        <link rel="stylesheet" href="style.css?v9" media="all" />
+        <link rel="stylesheet" href="style.css?v10" media="all" />
        <link rel="icon" href="img/favicon.png">
        <script type="text/javascript" src="forms.js?v2"></script>
-        <script type="text/javascript" src="toggle-dark-mode.js?v1"></script>
+        <script type="text/javascript" src="toggle-dark-mode.js?v2"></script>
        <script type="text/javascript" src="click-handlers.js?v2"></script>
    </head>

--- a/php/templates/log.twig
+++ b/php/templates/log.twig
@@ -2,8 +2,8 @@
    <head>
        <title>AIO</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <link rel="stylesheet" href="style.css">
-        <link rel="stylesheet" href="logs.css">
+        <link rel="stylesheet" href="style.css?v1">
+        <link rel="stylesheet" href="logs.css?v1">
        <link rel="icon" href="img/favicon.png">
        <script src="log-load.js?v1"></script>
    </head>