chore: release v0.1.0.102

EventTimeInput24h switches to input type=time on touch devices while keeping dual selects on desktop for reliable 24h entry.

Co-authored-by: Cursor <cursoragent@cursor.com>

VERSION

@@ -1 +1 @@
-0.1.0.101
+0.1.0.103

client/src/App.css

@@ -148,7 +148,8 @@ select.input-text {
   width: 100%;
 }
 
-.time-input-24h__select {
+.time-input-24h__select,
+.time-input-24h__native {
   flex: 1 1 0;
   min-width: 0;
   padding-left: 12px;
@@ -157,6 +158,11 @@ select.input-text {
   font-variant-numeric: tabular-nums;
 }
 
+input[type='time'].time-input-24h__native {
+  color-scheme: inherit;
+  cursor: pointer;
+}
+
 .time-input-24h__sep {
   flex-shrink: 0;
   font-size: 18px;
@@ -2647,27 +2653,13 @@ html.scheme-dark .themed-select-option.is-selected {
 .events-scroll-container {
   width: 100%;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   background: rgba(11, 12, 16, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 12px;
   box-sizing: border-box;
 }
 
-/* Custom Scrollbar for events container */
-.events-scroll-container::-webkit-scrollbar {
-  height: 6px;
-}
-.events-scroll-container::-webkit-scrollbar-track {
-  background: rgba(11, 12, 16, 0.2);
-}
-.events-scroll-container::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-.events-scroll-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
 .events-table {
   width: 100%;
   border-collapse: collapse;

client/src/components/EventTimeInput24h.tsx

@@ -1,5 +1,6 @@
 import { useId, useMemo } from 'react'
 import { joinTimeHHMM, splitTimeHHMM } from '../utils/logEntryPayload.js'
+import { preferNativeCameraPicker } from '../utils/captureVideoFrame.js'
 
 const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'))
 const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
@@ -18,7 +19,29 @@ export default function EventTimeInput24h({
   'aria-label': ariaLabel
 }: EventTimeInput24hProps) {
   const baseId = useId()
+  const useNativePicker = preferNativeCameraPicker()
   const { hours, minutes } = useMemo(() => splitTimeHHMM(value), [value])
+  const timeValue = useMemo(() => joinTimeHHMM(hours, minutes), [hours, minutes])
+
+  if (useNativePicker) {
+    return (
+      <div className="time-input-24h">
+        <input
+          id={baseId}
+          type="time"
+          step={60}
+          className="input-text time-input-24h__native"
+          value={timeValue}
+          onChange={(e) => {
+            const next = e.target.value
+            if (next) onChange(next.slice(0, 5))
+          }}
+          disabled={disabled}
+          aria-label={ariaLabel}
+        />
+      </div>
+    )
+  }
 
   return (
     <div className="time-input-24h">

client/src/index.css

@@ -18,3 +18,62 @@ body {
   flex-direction: column;
   align-items: center;
 }
+
+/* Scrollbars — auf Touch-Geräten breiter und besser sichtbar */
+:root {
+  --app-scrollbar-size: 10px;
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  :root {
+    --app-scrollbar-size: 14px;
+  }
+}
+
+html {
+  scrollbar-width: auto;
+  scrollbar-color: var(--app-accent-light) var(--app-surface-inset);
+  -webkit-overflow-scrolling: touch;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: var(--app-scrollbar-size);
+  height: var(--app-scrollbar-size);
+}
+
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+*::-webkit-scrollbar-track {
+  background: var(--app-surface-inset);
+  border-radius: calc(var(--app-scrollbar-size) / 2);
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--app-accent-light) 55%, transparent);
+  border-radius: calc(var(--app-scrollbar-size) / 2);
+  min-height: 48px;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--app-accent-light) 80%, transparent);
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  html::-webkit-scrollbar-thumb,
+  body::-webkit-scrollbar-thumb,
+  *::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--app-accent-light) 70%, transparent);
+  }
+
+  html::-webkit-scrollbar-thumb:active,
+  body::-webkit-scrollbar-thumb:active,
+  *::-webkit-scrollbar-thumb:active {
+    background: var(--app-accent-light);
+  }
+}