diff --git a/webstatuspi/_dashboard/_css.py b/webstatuspi/_dashboard/_css.py
index 2faca8f..8b15d9b 100644
--- a/webstatuspi/_dashboard/_css.py
+++ b/webstatuspi/_dashboard/_css.py
@@ -1185,347 +1185,191 @@
}
/* Responsive graph adjustments */
- @media (max-width: 700px) {
- .graphs-grid {
- grid-template-columns: 1fr;
- padding: var(--box-padding);
- }
-
- .graph-panel-wide {
- grid-column: 1;
+ /* Responsive adjustments */
+ @media (max-width: 768px) {
+ main {
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
+ }
- .graph-container {
- height: 100px;
+ @media (max-width: 600px) {
+ :root {
+ --gutter: 12px;
+ --box-padding: 12px;
+ --gap: 8px;
}
- .graph-panel-wide .graph-container {
- height: 80px;
+ main {
+ padding: var(--gutter);
+ /* Ensure single column on narrow screens but allow full width */
+ grid-template-columns: 1fr;
+ max-width: 100%;
}
- }
-
- .summary-actions {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- }
-
- /* Install button in summary bar */
- .install-button {
- background: none;
- border: 1px solid var(--cyan);
- color: var(--cyan);
- padding: 0.4rem 0.8rem;
- font-size: 0.75rem;
- font-family: 'JetBrains Mono', monospace;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- cursor: pointer;
- transition: all 0.2s ease;
- min-height: 44px;
- min-width: 44px;
- text-shadow: 0 0 8px var(--cyan);
- }
-
- .install-button:hover {
- background: rgba(0, 255, 249, 0.1);
- box-shadow: 0 0 15px var(--cyan);
- }
-
- .install-button:focus-visible {
- outline: 2px solid var(--cyan);
- outline-offset: 2px;
- }
-
- /* Reset button in summary bar */
- .reset-button {
- background: none;
- border: 1px solid var(--text-dim);
- color: var(--text-dim);
- padding: 0.4rem 0.8rem;
- font-size: 0.75rem;
- font-family: 'JetBrains Mono', monospace;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- cursor: pointer;
- transition: all 0.2s ease;
- min-height: 44px;
- min-width: 44px;
- }
-
- .reset-button:hover {
- border-color: var(--orange);
- color: var(--orange);
- box-shadow: 0 0 10px var(--orange);
- }
-
- /* Reset confirmation modal */
- .reset-modal-content {
- background: var(--bg-panel);
- border: 1px solid var(--border);
- border-radius: 0;
- max-width: 500px;
- padding: 0;
- display: flex;
- flex-direction: column;
- max-height: 80vh;
- }
-
- .reset-modal-header {
- padding: 1.25rem 1.5rem;
- border-bottom: 1px solid var(--border);
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- .reset-modal-title {
- font-size: 1rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--orange);
- text-shadow: 0 0 10px var(--orange);
- }
-
- .reset-modal-body {
- padding: 1.5rem;
- flex: 1;
- overflow-y: auto;
- }
-
- .reset-warning {
- background: rgba(255, 0, 64, 0.1);
- border-left: 3px solid var(--red);
- padding: 1rem;
- margin-bottom: 1rem;
- color: var(--red);
- font-size: 0.9rem;
- line-height: 1.5;
- }
-
- .reset-warning::before {
- content: '\u26a0 ';
- font-weight: 700;
- }
-
- .reset-modal-actions {
- padding: 1.25rem 1.5rem;
- border-top: 1px solid var(--border);
- display: flex;
- gap: 1rem;
- justify-content: flex-end;
- }
-
- .reset-button-cancel,
- .reset-button-confirm {
- padding: 0.5rem 1.25rem;
- font-size: 0.8rem;
- font-family: 'JetBrains Mono', monospace;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- border: 1px solid;
- cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .reset-button-cancel {
- background: none;
- border-color: var(--text-dim);
- color: var(--text-dim);
- }
-
- .reset-button-cancel:hover {
- border-color: var(--text);
- color: var(--text);
- }
-
- .reset-button-confirm {
- background: none;
- border-color: var(--red);
- color: var(--red);
- text-shadow: 0 0 8px var(--red);
- }
-
- .reset-button-confirm:hover {
- box-shadow: 0 0 10px var(--red);
- }
- .reset-button-confirm:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- box-shadow: none;
- }
-
- /* Desktop: larger font sizes for better readability */
- @media (min-width: 1024px) {
- .live-indicator {
- font-size: 0.85rem;
+ header {
+ flex-direction: column;
+ gap: 0.75rem;
+ padding-bottom: 12px;
}
.summary-bar {
- font-size: 0.9rem;
+ flex-direction: column;
+ gap: 0.75rem;
+ height: auto;
+ align-items: stretch;
}
- .card-name {
- font-size: 1rem;
+ .summary-counts {
+ justify-content: center;
+ width: 100%;
+ gap: 2rem;
}
- .metric-label {
- font-size: 0.7rem;
+ .summary-actions {
+ width: 100%;
+ justify-content: space-between;
+ flex-wrap: nowrap;
}
- .metric-value {
- font-size: 1.2rem;
+ .install-button,
+ .reset-button {
+ flex: 1;
+ padding: 0.6rem; /* Larger touch target */
}
- .mini-stat-label {
- font-size: 0.65rem;
+ .updated-time {
+ display: none; /* Hide time in summary bar on mobile to save space, it's in header/cards */
}
- .mini-stat-value {
- font-size: 0.85rem;
+ .card-metrics {
+ grid-template-columns: repeat(2, 1fr);
}
- .warning-banner {
- font-size: 0.8rem;
+ .card-metrics .metric-empty {
+ display: none;
}
- .card-footer {
- font-size: 0.75rem;
+ /* Optimize Modal for Mobile */
+ .modal-content {
+ width: 95%;
+ max-height: 92vh;
+ margin: 0;
+ clip-path: none; /* Remove aesthetic clip-path for max space */
+ border-radius: 4px; /* Simple radius instead */
}
- .error-text {
- font-size: 0.8rem;
+ .modal-header {
+ padding: 12px;
}
- .reset-button {
- font-size: 0.85rem;
+ .modal-close {
+ width: 48px; /* Larger touch target */
+ height: 48px;
}
- .modal-content h2 {
- font-size: 1.1rem;
+ .modal-summary {
+ grid-template-columns: repeat(2, 1fr); /* 2 cols */
+ gap: 12px;
}
- .modal-summary .stat-label {
- font-size: 0.75rem;
+ /* Make status full width in summary */
+ .modal-stat:first-child {
+ grid-column: 1 / -1;
+ padding-bottom: 8px;
+ border-bottom: 1px solid var(--border);
+ margin-bottom: 4px;
}
- .modal-summary .stat-value {
- font-size: 1rem;
+ .modal-url-bar {
+ flex-direction: column;
+ gap: 0.75rem;
+ align-items: flex-start;
}
- .history-table th,
- .history-table td {
- font-size: 0.8rem;
+ .modal-url-info, .modal-server-info {
+ flex-wrap: wrap;
}
- .graph-title {
- font-size: 0.85rem;
+ .modal-server-info {
+ width: 100%;
+ justify-content: space-between;
}
- .graph-value {
- font-size: 0.75rem;
+ .modal-server-value {
+ margin-right: 0;
}
- .axis-label {
- font-size: 0.7rem;
+ .stats-row {
+ grid-template-columns: repeat(2, 1fr);
}
- /* Modal percentiles and range */
- .modal-metrics-container {
- font-size: 0.9rem;
+ .history-table th:nth-child(4), /* Latency */
+ .history-table td:nth-child(4),
+ .history-table th:nth-child(5), /* Error */
+ .history-table td:nth-child(5) {
+ display: none; /* Hide more columns on mobile */
}
+ /* Show status code and time only */
+
.modal-metrics-row {
- font-size: 0.9rem;
+ flex-wrap: wrap;
+ gap: 1rem;
}
.modal-metrics-title {
- font-size: 0.8rem;
- }
-
- .modal-metric-label {
- font-size: 0.8rem;
- }
-
- /* Chart/Graph labels (SVG) */
- .chart-label {
- font-size: 11px;
- }
-
- .chart-value-label {
- font-size: 10px;
- }
-
- .chart-tooltip {
- font-size: 0.8rem;
- }
-
- .chart-tooltip-time {
- font-size: 0.75rem;
+ width: 100%;
+ margin-bottom: 0.5rem;
+ color: var(--cyan); /* Highlight titles on mobile */
}
- /* Modal tabs */
+ /* Better touch targets for tabs */
.modal-tab {
- font-size: 0.85rem;
+ flex: 1;
+ padding: 1rem 0.5rem;
}
}
- @media (max-width: 600px) {
- :root {
- --gutter: 12px;
- --box-padding: 12px;
- --gap: 8px;
- }
+ /* Small mobile devices */
+ @media (max-width: 360px) {
+ header h1 { font-size: 1rem; }
+ .logo-bracket { display: none; } /* Simplify logo */
.card-metrics {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .card-metrics .metric-empty {
- display: none;
+ gap: 4px;
}
- .modal-summary {
- grid-template-columns: repeat(2, 1fr);
+ .metric {
+ padding: 8px;
}
- .stats-row {
- grid-template-columns: repeat(2, 1fr);
+ .metric-value {
+ font-size: 1rem;
}
+ }
- .history-table th:nth-child(5),
- .history-table td:nth-child(5) {
- display: none;
- }
- .summary-bar {
- flex-wrap: wrap;
- gap: 0.5rem;
- }
- .summary-actions {
- width: 100%;
- flex-wrap: wrap;
- }
- .install-button,
- .reset-button {
- flex: 1;
+ /* Touch interaction improvements */
+ @media (hover: none) {
+ .card:hover {
+ /* Remove hover transform on touch */
+ transform: none;
+ box-shadow: 0 0 8px rgba(0, 255, 249, 0.1);
+ border-color: var(--border);
}
- .modal-url-bar {
- flex-direction: column;
- gap: 0.5rem;
- align-items: flex-start;
+ .card:hover .card-name {
+ animation: none;
}
- .modal-metrics-row {
- flex-wrap: wrap;
- gap: 0.75rem;
+ /* Active state for touch feedback */
+ .card:active {
+ border-color: var(--cyan);
+ background: rgba(0, 255, 249, 0.05);
}
- .modal-metrics-title {
- width: 100%;
- margin-bottom: 0.25rem;
+ /* Ensure scrollable areas are obvious */
+ .modal-body {
+ -webkit-overflow-scrolling: touch;
}
}
diff --git a/webstatuspi/_dashboard/_html.py b/webstatuspi/_dashboard/_html.py
index 9b0ee2f..7bdf8d9 100644
--- a/webstatuspi/_dashboard/_html.py
+++ b/webstatuspi/_dashboard/_html.py
@@ -20,7 +20,7 @@ def build_html(css: str, js_utils: str, js_charts: str, js_core: str) -> str:
-
+