diff --git a/assets/css/table.css b/assets/css/table.css index 74e67ec..0c09b05 100644 --- a/assets/css/table.css +++ b/assets/css/table.css @@ -164,6 +164,7 @@ margin-bottom: 0; scrollbar-width: none; -ms-overflow-style: none; + padding-left: 4px; /* breathing room at left edge */ padding-right: 4px; /* breathing room at right edge */ } .profile-scroll::-webkit-scrollbar { display: none; } @@ -205,6 +206,25 @@ .profile-scroll-wrap.fade-left::before { opacity: 1; } .profile-scroll-wrap.fade-right::after { opacity: 1; } +.profile-scroll-chevron { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 3; + pointer-events: none; + color: #8a6a3a; + font-size: 18px; + line-height: 1; + opacity: 0; + transition: opacity 0.2s ease; + user-select: none; +} +.profile-scroll-chevron.left { left: 4px; } +.profile-scroll-chevron.right { right: 4px; } + +.profile-scroll-wrap.fade-left .profile-scroll-chevron.left { opacity: 1; } +.profile-scroll-wrap.fade-right .profile-scroll-chevron.right { opacity: 1; } + /* Vertical rule separating general-use profiles from technical ones */ .profile-divider { display: inline-block; @@ -1036,7 +1056,13 @@ /* ── Profile bar — single scroll row on all screen sizes ─────────── No wrapping needed; scroll strip handles layout. Dividers stay. */ .filter-profiles { - padding: 4px 10px 0; + padding: 4px 0 0; + } + + .profile-tabs { + width: 100%; + margin-left: 0; + margin-right: 0; } /* Slightly smaller cards on mobile */ diff --git a/assets/css/ui.css b/assets/css/ui.css index 127022e..2f0c828 100644 --- a/assets/css/ui.css +++ b/assets/css/ui.css @@ -1265,7 +1265,7 @@ padding: 12px 16px; } -/* Section heading - "WHY IT FEELS LIKE THIS" */ +/* Section heading - "WHY IT FEELS" */ .insight-panel-title { font-family: Manrope, sans-serif; font-size: 10px; @@ -1274,7 +1274,21 @@ letter-spacing: 0.1em; color: #b09870; margin-bottom: 10px; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 7px; +} + +.insight-thermal-cat { + display: inline-block; + padding: 2px 7px; + border-radius: 3px; + font-size: 9px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + line-height: 1.5; } /* Each factor row */ diff --git a/assets/js/app.js b/assets/js/app.js index 915a053..b4f6171 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -458,7 +458,10 @@ export function UTCIForecast() { onChange=${(v) => setUtciEnv(v)} /> -
Why it feels like this
+
+ Why It Feels + ${currentCat && html`${currentCat.label}`} +
${[ { label: 'Sun and sky', icon: '☀', value: whyFeelsLike.sunAndSky }, { label: 'Wind', icon: '🌬', value: whyFeelsLike.wind }, diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js index a7ac5a6..b5ed401 100644 --- a/assets/js/components/DayTabs.js +++ b/assets/js/components/DayTabs.js @@ -176,6 +176,8 @@ export function DayTabs({ `)}
+ +
${activeTab === 'common' && profileButtonOrder.map((key) => {