event better mobile

templates/dashboard.html

@@ -4,42 +4,71 @@
 <style>
     /* Specific Dashboard Mobile Fixes */
     @media (max-width: 768px) {
+        /* Grid Layout for Mobile: Strict 2 columns */
         .activity-grid {
-            grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
+            display: grid !important;
+            grid-template-columns: 1fr 1fr !important;
+            gap: 1rem !important;
+            justify-content: stretch;
+            width: 100%;
         }
+        
+        /* Reset child width constraints from flex logic */
+        .activity-grid > div {
+            width: auto !important;
+            min-width: 0 !important; 
+            max-width: none !important; 
+        }
+
+        /* Fix container widths */
+        .main-content {
+            text-align: center;
+            min-width: 0 !important; /* Override inline style */
+        }
+        .main-content h2 {
+            margin-left: auto;
+            margin-right: auto;
+        }
+        
+        /* Layout Reordering: Sidebar (Active Timer) first */
+        .dashboard-container {
+            flex-direction: column;
+        }
+        .sidebar-container {
+            order: -1; /* Visualize first */
+            flex: 0 0 auto !important;
+            width: 100% !important;
+            position: static !important; /* Reset sticky/fixed */
+            margin-bottom: 2rem;
+            min-width: 0 !important; /* Override inline style */
+        }
+        
         .active-section {
-            /* Active timer card styles for mobile */
+            /* Reset fixed styles from previous iteration if any */
-            position: fixed;
+            position: static !important;
-            bottom: 70px; /* Above nav bar */
-            left: 10px; right: 10px;
-            z-index: 900;
             margin: 0 !important;
-            padding: 1rem !important;
+            box-shadow: none !important;
-            border-radius: 12px;
+            border: 1px solid var(--border-dim) !important;
-            box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
-            border: 1px solid var(--primary-color);
-        }
-        /* Create space for the fixed active card so list isn't hidden */
-        body.is-tracking .container {
-            padding-bottom: 350px !important; 
         }
+
         /* Mobile specific timer adjustments */
         .timer-display { font-size: 2.5rem !important; margin: 0.5rem 0 1rem 0 !important; }
     }
 </style>
 
 <script>
-    // Helper to toggle body class for spacing
+    // Helper to toggle body class for spacing (Keeping logic but simplifying CSS impact)
     function setTrackingState(isTracking) {
         if(isTracking) document.body.classList.add('is-tracking');
         else document.body.classList.remove('is-tracking');
     }
 </script>
 
-<div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
+<!-- Added class dashboard-container for flex control -->
+<div class="dashboard-container" style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
     
     <!-- Left Column: Activity Grid (Main Content) -->
-    <div style="flex: 1; min-width: 300px; max-width: 100%;">
+    <div class="main-content" style="flex: 1; min-width: 300px; max-width: 100%;">
         <h2 style="margin-bottom: 1.5rem;">Start Tracking</h2>
         
         <div class="activity-grid">
@@ -64,13 +93,15 @@
             {% endfor %}
             
             <!-- Add New Button -->
-            <div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
+            <div style="position: relative;">
-                <span>+ New Activity</span>
+                <div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
+                    <span>+ New Activity</span>
+                </div>
             </div>
         </div>
         
         <!-- Create Activity Form -->
-        <div id="newActivityForm" class="card" style="display:none; margin-top: 2rem;">
+        <div id="newActivityForm" class="card" style="display:none; margin-top: 2rem; text-align: left;">
             <h3>Create New Activity Category</h3>
             <form action="{{ url_for('add_activity') }}" method="POST" onsubmit="prepareTasksList()">
                 <label>Name</label>

templates/layout.html

@@ -68,7 +68,7 @@
             padding: 0 1.5rem; 
             min-height: 80vh; /* Ensure content area has height */
             position: relative;
-            z-index: 1;
+            /* z-index removed to allow fixed children (modals) to obey global z-index */
         }
 
         /* Clean Notion-style Cards */
@@ -355,6 +355,8 @@
                 margin: 0;
                 max-height: 85vh;
                 animation: slideUp 0.3s ease-out;
+                /* Extra padding at bottom to avoid overlap with bottom nav / home bar */
+                padding-bottom: 5rem;
             }
             @keyframes slideUp {
                 from { transform: translateY(100%); }
@@ -404,7 +406,7 @@
         {% with messages = get_flashed_messages() %}
             {% if messages %}
                 {% for message in messages %}
-                    <div style="background: white; border: 1px solid var(--border-dim); color: var(--text-primary); padding: 12px; border-radius: 4px; margin-bottom: 20px; font-size: 0.9rem;">{{ message }}</div>
+                    <div style="background: white; border: 1px solid var(--border-dim); color: var(--text-primary); padding: 12px; border-radius: 12px; margin-bottom: 20px; font-size: 0.9rem;">{{ message }}</div>
                 {% endfor %}
             {% endif %}
         {% endwith %}