better mobile desktop sync

templates/dashboard.html

@@ -20,10 +20,12 @@
             max-width: none !important; 
         }
 
-        /* Fix container widths */
+        /* Fix container widths to be full width */
         .main-content {
             text-align: center;
-            min-width: 0 !important; /* Override inline style */
+            width: 100% !important; /* Force full width */
+            flex: none !important; /* Disable flex scaling from desktop */
+            min-width: 0 !important;
         }
         .main-content h2 {
             margin-left: auto;
@@ -33,6 +35,7 @@
         /* Layout Reordering: Sidebar (Active Timer) first */
         .dashboard-container {
             flex-direction: column;
+            align-items: stretch !important; /* Force children to stretch full width */
         }
         .sidebar-container {
             order: -1; /* Visualize first */
@@ -259,6 +262,12 @@
         .then(res => res.json())
         .then(data => {
             if(data.status === 'success') {
+                // UPDATE LOCAL HASH TO PREVENT SYNC RELOAD
+                if (data.entry_id) {
+                    localEntryHash = data.entry_id;
+                    console.log("Local state updated intentionally. Reload prevented.");
+                }
+
                 // 2. Start Local Timer UI
                 startTime = new Date(data.start_time).getTime();
                 clearInterval(timerInterval);
@@ -365,4 +374,54 @@
         </form>
     </div>
 </div>
+
+<!-- Live Sync Script -->
+<script>
+    // Generate initial state hashes based on what Jinja rendered
+    const initialEntryHash = "{{ current_entry._id if current_entry else 'none' }}";
+    // Create comma-separated string of IDs. Since IDs are 24 chars, sorting shouldn't matter for Jinja vs Python if order preserved, 
+    // but app.py sorts. Let's trust they match initially or accept one quick reload on first poll if order differs.
+    // Actually, dashboard displays in list order. Python sorted them for hash.
+    // Let's rely on the Python endpoint's logic. We just need to know if we need to reload.
+    // To avoid immediate reload, we can fetch the initial hash via API or just accept one reload.
+    // Better: let's store the raw IDs from jinja.
+    
+    let localEntryHash = initialEntryHash;
+    
+    // Construct local task hash manually to match Python's sorted logic
+    let taskIds = [
+        {% for t in tasks %}
+            "{{ t._id }}",
+        {% endfor %}
+    ];
+    taskIds.sort();
+    let localTasksHash = taskIds.join(',');
+
+    // Polling function
+    setInterval(() => {
+        // Don't poll if page is hidden to save battery/data
+        if (document.hidden) return;
+
+        // Don't poll or reload if the Start Modal is open (User is interacting)
+        if (document.getElementById('startModal').classList.contains('show')) return;
+
+        fetch('/api/sync_check')
+            .then(response => {
+                if(response.status === 401) window.location.reload(); // Auth lost
+                return response.json();
+            })
+            .then(data => {
+                const serverEntryHash = data.entry_hash;
+                const serverTasksHash = data.tasks_hash;
+
+                // Compare
+                if (serverEntryHash !== localEntryHash || serverTasksHash !== localTasksHash) {
+                    console.log("State changed remotely. Syncing...");
+                    // Reload to reflect changes (Timer started/stopped on other device, or task completed)
+                    window.location.reload();
+                }
+            })
+            .catch(err => console.error("Sync check failed", err));
+    }, 2000); // 2 seconds
+</script>
 {% endblock %}