Merge pull request #203 from aternosorg/fix-firefox-column-issue

Fix firefox column issue

Author: tomjpeg

web/public/css/mclogs.css

@@ -74,6 +74,7 @@
     --max-width-content: min(100%, calc(var(--max-width)) - var(--page-padding) * 2);
     --radius: 12px;
     --scrollbar-height: 8px;
+    --browser: unset;
     scroll-behavior: smooth;
 }
 
@@ -154,6 +155,10 @@ body.setting-no-wrap .log-inner .level {
     white-space: pre;
 }
 
+body.setting-no-wrap .log-inner .collapsed-lines-count {
+    justify-content: flex-start;
+}
+
 a {
     color: inherit;
     text-decoration: none;
@@ -997,6 +1002,53 @@ main {
     color: var(--text);
 }
 
+/* Firefox fallback: use table layout instead of grid */
+@supports (-moz-appearance: none) {
+    :root {
+        --browser: 'firefox';
+    }
+    .log-inner {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+    }
+
+    .log-inner .entry,
+    .log-inner .collapsed-lines {
+        display: table-row;
+    }
+
+    .log-inner .line-number-container,
+    .log-inner .collapsed-lines > div:first-child {
+        display: table-cell;
+        width: 3.6rem;
+    }
+
+    @media (max-width: 600px) {
+        .log-inner .line-number-container {
+            width: 2.7rem;
+        }
+    }
+
+    .log-inner .line-content,
+    .log-inner .collapsed-lines-count {
+        display: table-cell;
+    }
+
+    .log-inner .collapsed-lines-count {
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    body.setting-no-wrap .log {
+        overflow-x: auto;
+    }
+
+    body.setting-no-wrap .log-inner {
+        table-layout: auto;
+    }
+}
+
 .collapsed-lines {
     display: contents;
     cursor: pointer;

web/public/js/log.js

@@ -89,7 +89,7 @@ function collapseAllErrors() {
 }
 
 function uncollapseAllErrors() {
-    document.querySelectorAll('.entry-no-error').forEach(line => line.style.display = "contents");
+    document.querySelectorAll('.entry-no-error').forEach(line => line.style.removeProperty("display"));
     document.querySelectorAll('.collapsed-lines').forEach(collapsed => collapsed.remove());
 }
 
@@ -101,7 +101,7 @@ function handleCollapsedClick(e) {
         position = positionElement.getBoundingClientRect().top - window.scrollY;
     }
     for (let i = parseInt(collapsed.dataset.start); i <= parseInt(collapsed.dataset.end); i++) {
-        document.getElementById(`L${i}`).parentElement.parentElement.style.display = "contents";
+        document.getElementById(`L${i}`).parentElement.parentElement.style.removeProperty("display");
     }
     if (positionElement) {
         window.scrollTo({
@@ -157,27 +157,16 @@ if (typeof BroadcastChannel !== "undefined") {
     settingsChannel.onmessage = (e) => {
         if (e.data.type === "settings-updated") {
             for (const checkbox of settingCheckboxes) {
-                let bodyClass = checkbox.dataset.bodyClass;
-                if (e.data.settings[checkbox.dataset.key]) {
-                    document.body.classList.add(bodyClass);
-                    checkbox.checked = true;
-                } else {
-                    document.body.classList.remove(bodyClass);
-                    checkbox.checked = false;
-                }
+                checkbox.checked = !!e.data.settings[checkbox.dataset.key];
+                applySetting(checkbox);
             }
         }
     };
 }
 
 function handleSettingChange(e) {
     let checkbox = e.target;
-    let bodyClass = checkbox.dataset.bodyClass;
-    if (checkbox.checked) {
-        document.body.classList.add(bodyClass);
-    } else {
-        document.body.classList.remove(bodyClass);
-    }
+    applySetting(checkbox);
     saveSettings();
     if (settingsChannel) {
         settingsChannel.postMessage({
@@ -187,6 +176,20 @@ function handleSettingChange(e) {
     }
 }
 
+function applySetting(checkbox) {
+    let bodyClass = checkbox.dataset.bodyClass;
+    if (checkbox.checked) {
+        document.body.classList.add(bodyClass);
+    } else {
+        document.body.classList.remove(bodyClass);
+    }
+    switch (checkbox.dataset.key) {
+        case "floatingScrollbar":
+            initFloatingScrollbar();
+            break;
+    }
+}
+
 function getCurrentSettings() {
     const data = {};
     for (const checkbox of settingCheckboxes) {
@@ -249,8 +252,18 @@ async function handleDeleteButtonClick() {
 }
 
 /* floating scroll bar */
+const browser = getComputedStyle(document.body)
+    .getPropertyValue("--browser")
+    .replaceAll(/['"]/g, '')
+    .trim()
+    .toLowerCase();
 const floatingScrollbar = document.querySelector(".floating-scrollbar");
-const logContainer = document.querySelector(".log-inner");
+let logContainer = null;
+if (browser === "firefox") {
+    logContainer = document.querySelector(".log");
+} else {
+    logContainer = document.querySelector(".log-inner");
+}
 
 if (floatingScrollbar && logContainer) {
     updateFloatingScrollbarWidths();
@@ -275,6 +288,14 @@ function syncScroll(source, target) {
     }
 }
 
+function initFloatingScrollbar() {
+    if (!floatingScrollbar || !logContainer) {
+        return;
+    }
+    updateFloatingScrollbarWidths();
+    syncScroll(logContainer, floatingScrollbar);
+}
+
 function updateFloatingScrollbarWidths() {
     floatingScrollbar.style.setProperty(
         "--floating-scrollbar-width",