UI tweaks

web/src/components/overlay/detail/AnnotationSettingsPane.tsx

@@ -121,7 +121,7 @@ export function AnnotationSettingsPane({
   }
 
   return (
-    <div className="space-y-3 rounded-lg border border-secondary-foreground bg-background_alt p-2">
+    <div className="mb-3 space-y-3 rounded-lg border border-secondary-foreground bg-background_alt p-2">
       <Heading as="h4" className="my-2">
         Annotation Settings
       </Heading>
@@ -152,16 +152,16 @@ export function AnnotationSettingsPane({
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Annotation Offset</FormLabel>
-                <div className="flex flex-col gap-8 md:flex-row-reverse">
-                  <div className="my-5 flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-0">
+                <div className="flex flex-col gap-3 md:flex-row-reverse md:gap-8">
+                  <div className="flex flex-row items-center gap-3 rounded-lg bg-destructive/50 p-3 text-sm text-primary-variant md:my-0 md:my-5">
                     <PiWarningCircle className="size-24" />
                     <div>
                       This data comes from your camera's detect feed but is
                       overlayed on images from the the record feed. It is
                       unlikely that the two streams are perfectly in sync. As a
                       result, the bounding box and the footage will not line up
                       perfectly. However, the <code>annotation_offset</code>{" "}
-                      field in your config can be used to adjust this.
+                      field can be used to adjust this.
                       <div className="mt-2 flex items-center text-primary">
                         <Link
                           to="https://docs.frigate.video/configuration/reference"

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -357,10 +357,7 @@ export default function ObjectLifecycle({
       )}
 
       <div className="relative flex flex-col items-center justify-center">
-        <Carousel
-          className={cn("m-0 w-full", fullscreen && isDesktop && "w-[75%]")}
-          setApi={setMainApi}
-        >
+        <Carousel className="m-0 w-full" setApi={setMainApi}>
           <CarouselContent>
             {eventSequence.map((item, index) => (
               <CarouselItem key={index}>

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -234,7 +234,7 @@ export default function ReviewDetailDialog({
           )}
 
           {pane == "details" && selectedEvent && (
-            <div className="scrollbar-container overflow-x-none mt-0 flex size-full flex-col gap-2 overflow-y-auto overflow-x-hidden">
+            <div className="mt-0 flex size-full flex-col gap-2">
               <ObjectLifecycle event={selectedEvent} setPane={setPane} />
             </div>
           )}

web/src/pages/ConfigEditor.tsx

@@ -31,6 +31,7 @@ function ConfigEditor() {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const modelRef = useRef<monaco.editor.ITextModel | null>(null);
   const configRef = useRef<HTMLDivElement | null>(null);
+  const schemaConfiguredRef = useRef(false);
 
   const onHandleSaveConfig = useCallback(
     async (save_option: SaveOptions) => {
@@ -79,50 +80,59 @@ function ConfigEditor() {
       return;
     }
 
-    if (modelRef.current != null) {
-      // we don't need to recreate the editor if it already exists
-      editorRef.current?.layout();
-      return;
+    const modelUri = monaco.Uri.parse(
+      `a://b/api/config/schema_${Date.now()}.json`,
+    );
+
+    // Configure Monaco YAML schema only once
+    if (!schemaConfiguredRef.current) {
+      configureMonacoYaml(monaco, {
+        enableSchemaRequest: true,
+        hover: true,
+        completion: true,
+        validate: true,
+        format: true,
+        schemas: [
+          {
+            uri: `${apiHost}api/config/schema.json`,
+            fileMatch: [String(modelUri)],
+          },
+        ],
+      });
+      schemaConfiguredRef.current = true;
     }
 
-    const modelUri = monaco.Uri.parse("a://b/api/config/schema.json");
-
-    if (monaco.editor.getModels().length > 0) {
-      modelRef.current = monaco.editor.getModel(modelUri);
-    } else {
+    if (!modelRef.current) {
       modelRef.current = monaco.editor.createModel(config, "yaml", modelUri);
+    } else {
+      modelRef.current.setValue(config);
     }
 
-    configureMonacoYaml(monaco, {
-      enableSchemaRequest: true,
-      hover: true,
-      completion: true,
-      validate: true,
-      format: true,
-      schemas: [
-        {
-          uri: `${apiHost}api/config/schema.json`,
-          fileMatch: [String(modelUri)],
-        },
-      ],
-    });
-
     const container = configRef.current;
 
-    if (container != null) {
+    if (container && !editorRef.current) {
       editorRef.current = monaco.editor.create(container, {
         language: "yaml",
         model: modelRef.current,
         scrollBeyondLastLine: false,
         theme: (systemTheme || theme) == "dark" ? "vs-dark" : "vs-light",
       });
+    } else if (editorRef.current) {
+      editorRef.current.setModel(modelRef.current);
     }
 
     return () => {
-      configRef.current = null;
-      modelRef.current = null;
+      if (editorRef.current) {
+        editorRef.current.dispose();
+        editorRef.current = null;
+      }
+      if (modelRef.current) {
+        modelRef.current.dispose();
+        modelRef.current = null;
+      }
+      schemaConfiguredRef.current = false;
     };
-  });
+  }, [config, apiHost, systemTheme, theme]);
 
   // monitoring state