add details to timestamp error faq

docs/docs/troubleshooting/common_errors.md

@@ -34,11 +34,15 @@ The detect FFmpeg process exited on its own. This message is only the notificati
 
 </FaqItem>
 
-<FaqItem id="non-monotonically-increasing-dts" question="Application provided invalid, non monotonically increasing dts to muxer">
+<FaqItem id="non-monotonically-increasing-dts" question="Non-monotonic DTS / non monotonically increasing dts to muxer / Queue input is backward in time">
 
-An FFmpeg message meaning the camera sent packets with out-of-order timestamps. Because recordings are copied without re-encoding, FFmpeg cannot fix them, and the segment muxer often splits early, producing one-second segments and a cache backlog. The usual cause is a camera "Smart Codec" / H.264+ / H.265+ mode or a camera clock that jumps.
+These are FFmpeg messages indicating the camera sent packets with out-of-order timestamps, either on the video or the audio stream. Timestamp jitter like this is common with WiFi cameras and restreamed or proxied sources; other causes are a camera "Smart Codec" / H.264+ / H.265+ mode or a camera clock that jumps. A sustained flood of these messages usually precedes the stream stalling and the watchdog restarting FFmpeg.
 
-See [Recordings: segments are only 1 second long](/troubleshooting/recordings#segments-are-only-1-second-long).
+In most cases, the fix is to improve the network, reduce system resource usage, or switch to non-WiFi cameras. In general, WiFi cameras are [not recommended](https://ipcamtalk.com/threads/multiple-cameras-high-bandwidth.77100/#post-861110).
+
+On the video stream, this can affect recordings: because they are copied without re-encoding, FFmpeg cannot fix the timestamps, and the segment muxer often splits early, producing one-second segments and a cache backlog. See [Recordings: segments are only 1 second long](/troubleshooting/recordings#segments-are-only-1-second-long).
+
+On the audio stream, the messages can come from the output's audio encoding. If the audio stream is the problem, it may help to have go2rtc transcode it by adding `#audio=aac` to the camera's go2rtc stream to produce clean timestamps for everything consuming the restream.
 
 </FaqItem>
 

web/package.json

@@ -114,8 +114,8 @@
     "@types/strftime": "^0.9.8",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
-    "@vitejs/plugin-react-swc": "^4.3.2",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@vitest/coverage-v8": "^3.0.7",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -136,8 +136,8 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.9.3",
-    "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "vite": "^6.4.2",
+    "vitest": "^3.0.7"
   },
   "overrides": {
     "@radix-ui/react-compose-refs": "1.1.2",

web/src/components/config-form/section-configs/logger.ts

@@ -14,6 +14,7 @@ const logger: SectionConfigOverrides = {
         additionalProperties: {
           "ui:options": {
             enumI18nPrefix: "logger.logLevel",
+            additionalPropertyKeySize: "lg",
             additionalPropertyKeyLabel:
               "configForm.additionalProperties.loggerNameLabel",
             additionalPropertyKeyPlaceholder:

web/src/components/config-form/theme/templates/WrapIfAdditionalTemplate.tsx

@@ -15,6 +15,14 @@ import { useTranslation } from "react-i18next";
 import { LuTrash2 } from "react-icons/lu";
 import type { ConfigFormContext } from "@/types/configForm";
 
+const KEY_SIZE_CLASSES = {
+  sm: { key: "md:col-span-2", value: "md:col-span-9" },
+  md: { key: "md:col-span-4", value: "md:col-span-7" },
+  lg: { key: "md:col-span-7", value: "md:col-span-4" },
+} as const;
+
+type AdditionalPropertyKeySize = keyof typeof KEY_SIZE_CLASSES;
+
 export function WrapIfAdditionalTemplate<
   T = unknown,
   S extends StrictRJSFSchema = RJSFSchema,
@@ -58,6 +66,14 @@ export function WrapIfAdditionalTemplate<
       : undefined;
   const preventKeyRename = uiOptions.preventKeyRename === true;
 
+  const keySize =
+    typeof uiOptions.additionalPropertyKeySize === "string" &&
+    uiOptions.additionalPropertyKeySize in KEY_SIZE_CLASSES
+      ? (uiOptions.additionalPropertyKeySize as AdditionalPropertyKeySize)
+      : "sm";
+  const keySpanClass = KEY_SIZE_CLASSES[keySize].key;
+  const valueSpanClass = KEY_SIZE_CLASSES[keySize].value;
+
   const formContext = registry?.formContext as ConfigFormContext | undefined;
 
   // optionally, lock the key once it's been saved
@@ -126,7 +142,7 @@ export function WrapIfAdditionalTemplate<
       style={style}
     >
       {!keyIsReadonly && (
-        <div className="col-span-12 space-y-2 md:col-span-2">
+        <div className={cn("col-span-12 space-y-2", keySpanClass)}>
           {displayLabel && <Label htmlFor={keyId}>{keyLabel}</Label>}
           {keyLocked ? (
             <div
@@ -158,7 +174,7 @@ export function WrapIfAdditionalTemplate<
       <div
         className={cn(
           "col-span-12 space-y-2",
-          !keyIsReadonly && "md:col-span-9",
+          !keyIsReadonly && valueSpanClass,
         )}
       >
         {!keyIsReadonly && displayLabel && (