css dla komorek

static/css/style.css

@@ -16,6 +16,7 @@ body {
     padding: 10px; 
 }
 
+/* Wskaźniki napięcia */
 .gauge-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -49,32 +50,30 @@ body {
     color: #ffffff;
 }
 
-.time-btn-container {
+/* Selektor czasu - Desktop (jedna linia) */
+.time-selector-wrapper {
     display: flex;
     flex-wrap: nowrap;
-    overflow-x: auto; 
-    -webkit-overflow-scrolling: touch;
-    gap: 8px;
-    padding: 5px 2px 15px 2px;
-    justify-content: flex-start;
-    scrollbar-width: none;  
-}
-
-.time-btn-container::-webkit-scrollbar {
-    display: none;    
+    justify-content: center;
+    gap: 6px;
+    margin-bottom: 20px;
 }
 
 .time-btn {
-    flex: 0 0 auto; 
+    flex: 0 1 auto;
     font-size: 0.75rem !important;
-    padding: 8px 16px !important;
-    white-space: nowrap;
+    height: 32px;
+    min-width: 45px;
+    padding: 2px 10px !important;
     border: 1px solid var(--border-color) !important;
     color: var(--blue-accent) !important;
     background: transparent;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .time-btn.active {
@@ -94,7 +93,7 @@ body {
     margin-bottom: 15px;
 }
 
-/* Lista zdarzeń (logi) */
+/* Karta logów i nagłówek */
 .events-card {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
@@ -115,24 +114,27 @@ body {
     font-size: 0.75rem;
     color: #8b949e;
 }
-
+/* Kontener zdarzenia */
 .event-item {
     display: flex;
     align-items: center;
-    padding: 12px 0;
+    justify-content: space-between; /* Przycisk lupy po prawej na PC */
+    padding: 10px 0;
     border-bottom: 1px solid var(--border-color);
-    flex-wrap: wrap; 
 }
 
-.event-item:last-child {
-    border-bottom: none;
+/* Grupa danych po lewej (Badge + Czas + Opis) */
+.event-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
 }
 
 .event-badge {
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    margin-right: 12px;
     flex-shrink: 0;
 }
 
@@ -140,71 +142,50 @@ body {
     font-family: monospace;
     font-size: 0.85rem;
     color: #8b949e;
-    margin-right: 10px;
+    white-space: nowrap;
 }
 
 .event-desc {
     font-size: 0.85rem;
     color: var(--text-main);
-    flex: 1 1 100%; 
-    margin-top: 4px;
 }
 
-.no-events {
-    color: #8b949e;
-    font-style: italic;
-    text-align: center;
-    padding: 20px;
-}
-
-.event-warning {
-    background-color: rgba(255, 187, 51, 0.1);
-    border: 1px dashed #ffbb33;
-    border-radius: 10px;
-    padding: 15px;
-    margin: 10px 0;
-    text-align: center;
-    color: #ffbb33;
-    font-size: 0.85rem;
-}
-
-footer {
-    padding: 30px 0;
-    opacity: 0.6;
-    text-align: center;
+/* Przycisk lupy - Desktop */
+.zoom-btn-mobile {
+    padding: 5px 12px;
+    background: rgba(88, 166, 255, 0.1);
+    border: 1px solid var(--blue-accent);
+    color: var(--blue-accent);
+    border-radius: 6px;
     font-size: 0.75rem;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-left: 15px;
 }
 
+/* OPTYMALIZACJA DLA TELEFONÓW (iPhone Pro) */
 @media (max-width: 576px) {
-    body {
-        padding: 8px;
-    }
-
-    .voltage-value {
-        font-size: 0.9rem;
-    }
-
-    .gauge-card {
-        padding: 8px 3px;
-    }
-
-    .main-chart-card {
-        height: 40vh;
-        padding: 8px;
-    }
-
-    .events-header {
+    .event-item {
         flex-direction: column;
         align-items: flex-start;
     }
 
-    .time-btn-container {
-        margin: 0 -8px; 
-        padding-left: 8px;
-        padding-right: 8px;
+    .event-content {
+        flex-wrap: wrap; /* Pozwala opisowi spaść pod czas na małym ekranie */
+        gap: 8px;
+        width: 100%;
     }
 
     .event-desc {
-        font-size: 0.8rem;
+        width: 100%;
+        margin-bottom: 8px;
+    }
+
+    .zoom-btn-mobile {
+        width: 100%; /* Na mobile szeroki przycisk na dole */
+        margin-left: 0;
+        padding: 12px;
+        font-size: 0.85rem;
+        text-align: center;
     }
 }

static/js/monitor.js

@@ -293,26 +293,19 @@ function renderEventLog(events, range) {
             const timeRangeStr = `${start.toLocaleTimeString('pl-PL', {hour:'2-digit', minute:'2-digit'})} - ${end.toLocaleTimeString('pl-PL', {hour:'2-digit', minute:'2-digit'})}`;
 
             item.innerHTML = `
-                <div style="display: flex; align-items: center; flex-grow: 1;">
-                    <div class="event-badge" style="
-                        background-color: ${config.color}; 
-                        box-shadow: 0 0 0 2px ${phase.color}; 
-                        margin-left: 2px; 
-                        margin-right: 14px; 
-                        width: 10px; height: 10px;">
-                    </div>
-                    <div class="event-time">
-                        <div>${start.toLocaleDateString('pl-PL', {day:'2-digit', month:'2-digit'})}, ${timeRangeStr}</div>
-                    </div>
+                <div class="event-content">
+                    <div class="event-badge" style="background-color: ${config.color}; box-shadow: 0 0 0 2px ${phase.color};"></div>
+                    <div class="event-time">${start.toLocaleDateString('pl-PL', {day:'2-digit', month:'2-digit'})}, ${timeRangeStr}</div>
                     <div class="event-desc">
                         <span style="color: ${phase.color}; font-weight: bold;">${phase.label}</span>: 
                         <strong>${config.label}</strong> przez ${dur} min.
                     </div>
                 </div>
-                <button onclick="showEventOnChart('${ev.start}')" class="time-btn" style="padding: 4px 8px !important; margin-left: 10px;">
-                    Pokaż 🔍
+                <button onclick="showEventOnChart('${ev.start}')" class="zoom-btn-mobile">
+                    Pokaż na wykresie 🔍
                 </button>
             `;
+
             container.appendChild(item);
         });
     } else {