From 5994e165c6d2f48b3ea261a7efae70790b1ac77d Mon Sep 17 00:00:00 2001
From: Daniel Legt <contact@danlegt.com>
Date: Fri, 6 Mar 2026 11:11:08 +0200
Subject: [PATCH] Updates

---
 src/templates/index.html | 56 ++++++++++++++++++++++++----------------
 static/css/layout.css    | 22 ++++++++++++++++
 static/js/ui-controls.js | 19 ++++++++++++++
 3 files changed, 75 insertions(+), 22 deletions(-)
diff --git a/src/templates/index.html b/src/templates/index.html
index 18c76dc..420b020 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -17,16 +17,7 @@
 <body data-page="config">
     <div class="mobile-control-strip">
         <div class="taskbar-shell">
-            <div class="taskbar-program-list">
-                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="theme-tool-window" aria-label="Open theme picker">
-                    <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_109-1.png" alt="">
-                    <span>ThemePicker.exe</span>
-                </button>
-                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="mode-tool-window" aria-label="Open display mode settings">
-                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
-                    <span>DisplayMode.exe</span>
-                </button>
-            </div>
+            <div class="taskbar-program-list" data-role="taskbar-program-list"></div>
         </div>
     </div>
 
@@ -186,7 +177,22 @@
             </section>
         </div>
 
-        <section id="theme-tool-window" class="window ui-tool-window hidden" role="dialog" aria-modal="false" aria-labelledby="theme-tool-title">
+        <section
+            id="theme-tool-window"
+            class="window ui-tool-window hidden"
+            role="dialog"
+            aria-modal="false"
+            aria-labelledby="theme-tool-title"
+            data-ui-window
+            data-window-title="ThemePicker.exe"
+            data-window-rights="all"
+            data-window-order="10"
+            data-window-default-left="16"
+            data-window-default-top="88"
+            data-window-default-width="390"
+            data-window-default-height="250"
+            data-window-icons='{"win98":"/static/img/Windows Icons - PNG/main.cpl_14_109-1.png","modern":"/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png","none":"/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png","default":"/static/img/Windows Icons - PNG/main.cpl_14_109-1.png"}'
+        >
             <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
                 <span id="theme-tool-title">ThemePicker.exe</span>
                 <div class="title-bar-controls">
@@ -212,7 +218,22 @@
             </div>
         </section>
 
-        <section id="mode-tool-window" class="window ui-tool-window hidden" role="dialog" aria-modal="false" aria-labelledby="mode-tool-title">
+        <section
+            id="mode-tool-window"
+            class="window ui-tool-window hidden"
+            role="dialog"
+            aria-modal="false"
+            aria-labelledby="mode-tool-title"
+            data-ui-window
+            data-window-title="DisplayMode.exe"
+            data-window-rights="all"
+            data-window-order="20"
+            data-window-default-left="424"
+            data-window-default-top="88"
+            data-window-default-width="340"
+            data-window-default-height="190"
+            data-window-icons='{"win98":"/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png","modern":"/static/img/Windows Icons - PNG/desk.cpl_14_100-0.png","none":"/static/img/Windows Icons - PNG/timedate.cpl_14_200-6.png","default":"/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png"}'
+        >
             <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
                 <span id="mode-tool-title">DisplayMode.exe</span>
                 <div class="title-bar-controls">
@@ -231,16 +252,7 @@
 
     <footer class="taskbar desktop-taskbar" aria-label="Desktop taskbar">
         <div class="taskbar-shell">
-            <div class="taskbar-program-list">
-                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="theme-tool-window" aria-label="Open theme picker">
-                    <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_109-1.png" alt="">
-                    <span>ThemePicker.exe</span>
-                </button>
-                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="mode-tool-window" aria-label="Open display mode settings">
-                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
-                    <span>DisplayMode.exe</span>
-                </button>
-            </div>
+            <div class="taskbar-program-list" data-role="taskbar-program-list"></div>
         </div>
     </footer>
 
diff --git a/static/css/layout.css b/static/css/layout.css
index c6850b9..39743fa 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -616,6 +616,28 @@ body.is-dragging-window .ui-tool-title-bar {
     }
 }
 
+@media (max-width: 899px) {
+    .ui-tool-window {
+        top: 2.85rem !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100vw !important;
+        height: calc(100dvh - 2.85rem) !important;
+        min-width: 0;
+        min-height: 0;
+        max-width: 100vw;
+        max-height: calc(100dvh - 2.85rem);
+        resize: none;
+        overflow: auto;
+        transform: none !important;
+    }
+
+    .ui-tool-title-bar {
+        cursor: default;
+    }
+}
+
 @media (min-width: 2560px), (min-resolution: 2dppx) {
     :root {
         --ui-scale: 1.24;
diff --git a/static/js/ui-controls.js b/static/js/ui-controls.js
index 0c7ba2d..58bc524 100644
--- a/static/js/ui-controls.js
+++ b/static/js/ui-controls.js
@@ -12,6 +12,10 @@
     let floatingWindowZ = 80;
     let windowLayouts = {};
 
+    function isMobileViewport() {
+        return window.matchMedia('(max-width: 899px)').matches;
+    }
+
     function applyTheme(theme) {
         const normalized = theme || DEFAULT_THEME;
         document.documentElement.setAttribute('data-ui-theme', normalized);
@@ -164,6 +168,12 @@
         if (!id) {
             return;
         }
+        if (isMobileViewport()) {
+            windowEl.style.right = 'auto';
+            windowEl.style.bottom = 'auto';
+            windowEl.style.transform = 'none';
+            return;
+        }
         const defaults = DEFAULT_WINDOW_LAYOUTS[id];
         const saved = windowLayouts[id];
         const normalized = normalizeLayout(saved, defaults);
@@ -208,6 +218,9 @@
                 if (!windowEl || windowEl.classList.contains('hidden')) {
                     return;
                 }
+                if (isMobileViewport()) {
+                    return;
+                }
 
                 bringWindowToFront(windowEl);
                 const rect = windowEl.getBoundingClientRect();
@@ -269,6 +282,9 @@
                 if (windowEl.classList.contains('hidden')) {
                     return;
                 }
+                if (isMobileViewport()) {
+                    return;
+                }
                 persistWindowLayout(windowEl);
             });
         });
@@ -285,6 +301,9 @@
         });
 
         window.addEventListener('resize', () => {
+            if (isMobileViewport()) {
+                return;
+            }
             document.querySelectorAll('.ui-tool-window').forEach((windowEl) => {
                 const id = windowEl.id;
                 if (!id) {
