diff --git a/app/public/index.html b/app/public/index.html
index 1c3c34e..46ea61f 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -204,7 +204,7 @@
Weather Alerts
-
+
diff --git a/app/public/style.css b/app/public/style.css
index facffb8..082e2f9 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -541,6 +541,14 @@ a:hover { text-decoration: underline; }
margin-bottom: 0.6rem;
}
+.section-actions {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.6rem;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+}
+
.section-label { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--ink-light); text-transform: uppercase; }
.section-note { font-size: 0.6rem; color: var(--ink-light); font-style: italic; }
@@ -585,6 +593,7 @@ a:hover { text-decoration: underline; }
display: flex;
align-items: center;
gap: 0.75rem;
+ flex-wrap: wrap;
padding: 0.6rem 0.75rem;
background: var(--paper-darker);
border-top: 1px solid var(--border);
@@ -636,6 +645,7 @@ a:hover { text-decoration: underline; }
white-space: nowrap;
min-width: 80px;
text-align: right;
+ margin-left: auto;
}
/* Radar legend */
@@ -809,19 +819,89 @@ select:focus-visible {
.masthead { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.masthead h1 { font-size: 1.6rem; }
.tagline { display: none; }
- .tabs { grid-column: 1 / -1; overflow-x: auto; }
- .tab { min-width: 88px; }
+ .tabs {
+ grid-column: 1 / -1;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ scroll-snap-type: x proximity;
+ }
+ .tab {
+ min-width: 80px;
+ padding: 0.35rem 0.65rem;
+ scroll-snap-align: start;
+ }
+
+ .search-row {
+ display: grid;
+ grid-template-columns: 1fr auto auto;
+ gap: 0.4rem;
+ }
+ .search-row input {
+ grid-column: 1 / -1;
+ border-right: 1px solid var(--border);
+ }
+ .search-row button {
+ border: 1px solid var(--border);
+ }
+ #search-btn {
+ min-width: 108px;
+ }
+ #locate-btn,
+ #units-btn {
+ border-left: 1px solid var(--border) !important;
+ min-width: 56px;
+ padding: 0.6rem 0.65rem !important;
+ }
+
.stats-bar { grid-template-columns: repeat(3, 1fr); }
.astro-grid,
.aq-grid { grid-template-columns: 1fr; }
.current-grid { grid-template-columns: 1fr; }
.temp-big { font-size: 4rem; }
- .day-row { grid-template-columns: 80px 36px 1fr 70px; }
+ .day-row {
+ grid-template-columns: 74px 32px 1fr auto;
+ gap: 0.55rem;
+ padding: 0.75rem 0.7rem;
+ }
+ .day-desc {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .day-temps {
+ font-size: 0.78rem;
+ }
.day-meta { display: none; }
.radar-map { height: 240px; }
.legend-bar { width: 50px; }
.loc-actions { align-items: flex-start; margin-top: 0.5rem; }
.loc-header { flex-direction: column; align-items: flex-start; }
+
+ .section-head {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 0.35rem;
+ }
+ .section-actions {
+ justify-content: flex-start;
+ }
+
+ .radar-controls {
+ gap: 0.55rem;
+ padding: 0.55rem;
+ }
+ .radar-timeline {
+ order: 3;
+ width: 100%;
+ flex-basis: 100%;
+ }
+ .radar-ts {
+ order: 2;
+ margin-left: 0;
+ min-width: 0;
+ text-align: left;
+ }
+
.settings-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.settings-value { text-align: left; }
.map-overview { height: 280px; }