css dla komorek

static/css/style.css

@@ -13,9 +13,9 @@ body {
     font-size: 14px;
     margin: 0;
     overflow-x: hidden;
+    padding: 10px; 
 }
 
-/* Siatka wskaźników (gauges) */
 .gauge-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -27,7 +27,7 @@ body {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
-    padding: 10px 5px;
+    padding: 12px 5px;
     text-align: center;
 }
 
@@ -49,29 +49,32 @@ body {
     color: #ffffff;
 }
 
-/* Wybór zakresu czasu - Poprawiona responsywność */
 .time-btn-container {
     display: flex;
-    flex-wrap: wrap; 
-    gap: 6px;
-    padding: 10px 0;
-    justify-content: center;
+    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;    
 }
 
 .time-btn {
+    flex: 0 0 auto; 
     font-size: 0.75rem !important;
-    padding: 6px 12px !important;
+    padding: 8px 16px !important;
     white-space: nowrap;
     border: 1px solid var(--border-color) !important;
     color: var(--blue-accent) !important;
     background: transparent;
-    border-radius: 6px;
+    border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s;
-    min-width: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .time-btn.active {
@@ -86,8 +89,9 @@ body {
     border: 1px solid var(--border-color);
     border-radius: 12px;
     padding: 15px;
-    height: 55vh;
-    min-height: 350px;
+    height: 50vh;
+    min-height: 320px;
+    margin-bottom: 15px;
 }
 
 /* Lista zdarzeń (logi) */
@@ -96,31 +100,28 @@ body {
     border: 1px solid var(--border-color);
     border-radius: 12px;
     padding: 15px;
-    margin-top: 15px;
 }
 
-/* Nagłówek logów - naprawia wchodzenie na siebie tekstu */
 .events-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 15px;
+    gap: 5px;
+    margin-bottom: 12px;
 }
 
 #eventRangeLabel {
     font-size: 0.75rem;
     color: #8b949e;
-    word-break: break-all;
 }
 
 .event-item {
     display: flex;
     align-items: center;
-    padding: 10px 0;
+    padding: 12px 0;
     border-bottom: 1px solid var(--border-color);
-    flex-wrap: wrap; /* Pozwala na łamanie opisu pod czas na bardzo małych ekranach */
+    flex-wrap: wrap; 
 }
 
 .event-item:last-child {
@@ -128,8 +129,8 @@ body {
 }
 
 .event-badge {
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     margin-right: 12px;
     flex-shrink: 0;
@@ -139,44 +140,57 @@ body {
     font-family: monospace;
     font-size: 0.85rem;
     color: #8b949e;
-    margin-right: 15px;
-    /* Usunięto white-space: nowrap, aby czas mógł się łamać */
+    margin-right: 10px;
 }
 
 .event-desc {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     color: var(--text-main);
-    flex: 1 1 auto; /* Pozwala opisowi zajmować dostępną przestrzeń */
+    flex: 1 1 100%; 
+    margin-top: 4px;
 }
 
 .no-events {
     color: #8b949e;
     font-style: italic;
     text-align: center;
-    padding: 10px;
+    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: 20px 0;
-    opacity: 0.7;
+    padding: 30px 0;
+    opacity: 0.6;
     text-align: center;
+    font-size: 0.75rem;
 }
 
 @media (max-width: 576px) {
+    body {
+        padding: 8px;
+    }
+
     .voltage-value {
-        font-size: 0.95rem;
+        font-size: 0.9rem;
+    }
+
+    .gauge-card {
+        padding: 8px 3px;
     }
 
     .main-chart-card {
         height: 40vh;
-        padding: 10px;
-    }
-
-    .time-btn {
-        flex: 1 1 calc(25% - 8px);
-        min-width: 40px;
-        font-size: 0.7rem !important;
-        padding: 8px 2px !important;
+        padding: 8px;
     }
 
     .events-header {
@@ -184,22 +198,13 @@ footer {
         align-items: flex-start;
     }
 
-    .event-item {
-        align-items: flex-start;
-        gap: 6px;
+    .time-btn-container {
+        margin: 0 -8px; 
+        padding-left: 8px;
+        padding-right: 8px;
     }
 
-    .event-badge {
-        margin-top: 4px;
+    .event-desc {
+        font-size: 0.8rem;
     }
 }
-
-.event-warning {
-    background-color: rgba(255, 187, 51, 0.1);
-    border: 1px dashed #ffbb33;
-    border-radius: 8px;
-    padding: 15px;
-    margin: 10px 0;
-    text-align: center;
-    color: #ffbb33;
-}