From 9fbb31029d67675bcc63f55365627d7a74d0ba1c Mon Sep 17 00:00:00 2001
From: Katrine Wist <katrinew0702@gmail.com>
Date: Fri, 13 Dec 2024 09:46:46 +0100
Subject: [PATCH] Wrap checkbox in FieldRoot to not inherit editor field

---
 .../ndla-image-search/src/PreviewImage.tsx    | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/ndla-image-search/src/PreviewImage.tsx b/packages/ndla-image-search/src/PreviewImage.tsx
index 99adc21d08..9c7328e0ca 100644
--- a/packages/ndla-image-search/src/PreviewImage.tsx
+++ b/packages/ndla-image-search/src/PreviewImage.tsx
@@ -19,6 +19,7 @@ import {
   Text,
   Image,
   IconButton,
+  FieldRoot,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
@@ -107,6 +108,10 @@ const ActionsWrapper = styled("div", {
   },
 });
 
+const StyledFieldRoot = styled(FieldRoot, {
+  base: { alignSelf: "center" },
+});
+
 interface Props {
   id: string;
   image: IImageMetaInformationV3DTO;
@@ -202,15 +207,17 @@ const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translations, lo
             {translations.useImageTitle}
           </Button>
           {!!showCheckbox && (
-            <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>
-              <CheckboxControl>
-                <CheckboxIndicator asChild>
-                  <CheckLine />
-                </CheckboxIndicator>
-              </CheckboxControl>
-              <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>
-              <CheckboxHiddenInput />
-            </CheckboxRoot>
+            <StyledFieldRoot>
+              <CheckboxRoot checked={saveAsMetaImage} onCheckedChange={() => setSaveAsMetaImage((prev) => !prev)}>
+                <CheckboxControl>
+                  <CheckboxIndicator asChild>
+                    <CheckLine />
+                  </CheckboxIndicator>
+                </CheckboxControl>
+                <CheckboxLabel>{translations.checkboxLabel}</CheckboxLabel>
+                <CheckboxHiddenInput />
+              </CheckboxRoot>
+            </StyledFieldRoot>
           )}
         </ActionsWrapper>
       </ContentWrapper>