diff --git a/templates/index.html b/templates/index.html index 6eba3d0..f77d9e1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -77,26 +77,42 @@ .mqtt-offline { background: rgba(218, 54, 51, 0.1); color: var(--danger); border-color: var(--danger); animation: pulse-red 2s infinite; } @keyframes pulse-red { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } - /* Tabella LastHeard */ + /* Container della tabella con scroll fluido */ .table-container { - background: var(--card-bg); - border-radius: 6px; - border: 1px solid var(--border-color); - overflow-x: auto; /* <-- IL FIX: Permette lo scroll orizzontale */ - overflow-y: auto; - max-height: 400px; - margin: 0 20px 40px 20px; - box-shadow: none; + background: var(--card-bg); + border-radius: 8px; + border: 1px solid var(--border-color); + overflow-x: auto; + overflow-y: auto; + max-height: 500px; /* Un po' più alto per vedere più log */ + margin: 0 20px 40px 20px; + + /* FIX PRO: Scroll fluido su iPhone/Android */ + -webkit-overflow-scrolling: touch; } - table { - width: 100%; - border-collapse: collapse; - text-align: left; - font-size: 0.85rem; - font-family: 'JetBrains Mono', monospace; - white-space: nowrap; /* <-- Mantiene il testo su una riga per evitare accavallamenti su mobile */ + + /* Ottimizzazione per schermi piccoli (Smartphone) */ + @media (max-width: 600px) { + .table-container { + margin: 0 10px 20px 10px; /* Riduciamo i margini laterali per dare più spazio ai dati */ + border-radius: 4px; /* Angoli leggermente più secchi */ + } + + th, td { + padding: 10px 12px; /* Compattiamo leggermente solo su mobile per non far scorrere troppo */ + font-size: 0.75rem; /* Testo leggermente più piccolo per far stare più info */ + } } + /* Testata fissa (Sticky) */ + thead th { + position: sticky; + top: 0; + z-index: 10; + background: #1c2128; /* Un colore solido per non far vedere le righe sotto mentre scorri */ + border-bottom: 2px solid var(--primary); + } + /* Spaziatura celle e righe tabella */ th, td { padding: 12px 16px; /* Aumenta lo spazio interno: 12px sopra/sotto, 16px ai lati */