2.9.6

Update table/profiles to match the at a glance box
Add edit columns toggle for mobile

assets/js/app.js

@@ -131,6 +131,7 @@ export function UTCIForecast() {
   // location. The input then overlays the location line to save space.
   const [searchOpen, setSearchOpen] = useState(false);
   const searchWrapRef = useRef(null);
+  const [colTogglesOpen, setColTogglesOpen] = useState(false);
   const searchInputRef = useRef(null);
 
   // Focus the input the moment the search opens.
@@ -290,6 +291,7 @@ export function UTCIForecast() {
     activeProfile,
     outdoorsVariant,
     skinType,
+    visibleCols,
   );
 
   // Human-readable date for the "Day at a glance" heading, e.g. "Mon 2nd June 2026".
@@ -629,6 +631,11 @@ export function UTCIForecast() {
             <div class="table-main">
             <div class="col-toggles">
                 <span class="col-toggles-label">Columns:</span>
+                <button class=${'col-toggles-edit-btn' + (colTogglesOpen ? ' col-toggles-edit-btn--open' : '')} onClick=${() => setColTogglesOpen(v => !v)}>
+                  <span class="col-toggles-edit-btn-label">${colTogglesOpen ? 'Done' : 'Edit columns'}</span>
+                  <svg class="col-toggles-edit-btn-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
+                </button>
+                <div class=${'col-toggles-body' + (colTogglesOpen ? ' col-toggles-body--open' : '')}>
                 ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
 				  <span class=${'col-toggle-group' + (visibleCols.utciP ? ' col-toggle-group--expanded' : '')}>
 					<${CustomSelect}
@@ -791,6 +798,7 @@ export function UTCIForecast() {
                     Units
                   </label>
                 </span>
+                </div>
             </div>
 
             <div class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
@@ -1013,9 +1021,11 @@ export function UTCIForecast() {
 							${visibleCols.precip && html`
 							  <td class=${groupStart('precip')} style=${{ background: r.snow > 0 ? scaleBg(r.snow, 0, 4, '90,140,210') : scaleBg(r.precip, 0, 8, '70,145,200') }}>
 								<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '5px', verticalAlign: 'middle' }}>
-								  <${PrecipIcon} precip=${r.precip} snow=${r.snow} size=${28} />
+								  <${PrecipIcon} precip=${r.precipProb > 0 ? r.precip : 0} snow=${r.precipProb > 0 ? r.snow : 0} size=${28} />
 								  <span style=${{ color: r.snow > 0 ? '#2a5fa8' : r.precip > 0 ? '#2a6a90' : '#7a5c30' }}>
-									${r.snow > 0 ? fmt(r.snow) + u('cm') : r.precip > 0 ? fmt(r.precip) + u('mm') : '—'}
+									${r.precipProb > 0
+									  ? (r.snow > 0 ? fmt(r.snow) + u('cm') : r.precip > 0 ? fmt(r.precip) + u('mm') : '—')
+									  : '—'}
 								  </span>
 								</span>
 							  </td>`}