feat(viz2): current year is now a label over the cursor over the sliding bar

Author: Roméo Maignal

src/components/Viz2.css

@@ -128,6 +128,7 @@
   border-radius: 2px;
   background: var(--border);
   cursor: pointer;
+  margin-top: 22px; /* room for the floating year label above */
 }
 
 .viz2-track-fill {
@@ -148,14 +149,16 @@
   margin: 0;
 }
 
-/* current year badge */
-.viz2-yr-current {
+/* floating year label above the thumb */
+.viz2-yr-thumb-label {
+  position: absolute;
+  top: -22px;
+  transform: translateX(-50%);
   font-family: var(--mono);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--accent);
   white-space: nowrap;
-  min-width: 36px;
-  text-align: right;
-  flex-shrink: 0;
+  pointer-events: none;
+  user-select: none;
 }

src/components/Viz2.tsx

@@ -321,6 +321,7 @@ const Viz2: React.FC = () => {
 
                 <div className="viz2-track-wrap">
                   <div className="viz2-track-fill" style={{ width: `${pct}%` }} />
+                  <span className="viz2-yr-thumb-label" style={{ left: `${pct}%` }}>{year}</span>
                   <input
                     type="range"
                     className="viz2-slider"
@@ -329,8 +330,6 @@ const Viz2: React.FC = () => {
                     onChange={e => { setPlaying(false); setYear(Number(e.target.value)) }}
                   />
                 </div>
-
-                <span className="viz2-yr-current">{year}</span>
               </div>
 
               <span className="viz2-yr-edge">{YEAR_MAX}</span>