From eb1cde3ecde8aaf92891f25312bf428808f9a88f Mon Sep 17 00:00:00 2001
From: Gunnar K Vilbergsson <gunnar@norda.is>
Date: Fri, 20 Dec 2024 08:58:11 +0000
Subject: [PATCH] Fix checkbox width and third width layout

---
 .../fieldsRepeaterSubsection.ts               |  2 +-
 .../FieldsRepeaterItem.tsx                    | 20 +++++++++++++++----
 .../TableRepeaterItem.tsx                     | 20 +++++++++++++++----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts b/libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts
index a38927bf858a..b72d85d20f8e 100644
--- a/libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts
+++ b/libs/application/templates/reference-template/src/forms/exampleForm/tablesAndRepeatersSection/fieldsRepeaterSubsection.ts
@@ -23,7 +23,7 @@ export const fieldsRepeaterSubsection = buildSubSection({
           id: 'fieldsRepeater',
           title: 'Fields Repeater',
           formTitle: 'Title for each form',
-          width: 'half',
+          width: 'full',
           fields: {
             input: {
               component: 'input',
diff --git a/libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx b/libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx
index df4f221ff91e..2f88a6965913 100644
--- a/libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx
+++ b/libs/application/ui-fields/src/lib/FieldsRepeaterFormField/FieldsRepeaterItem.tsx
@@ -46,6 +46,19 @@ export const Item = ({
   const { setValue, control, clearErrors } = useFormContext()
   const prevWatchedValuesRef = useRef<string | (string | undefined)[]>()
 
+  const getSpan = (component: string, width: string) => {
+    if (component !== 'radio' && component !== 'checkbox') {
+      if (width === 'half') {
+        return '1/2'
+      }
+      if (width === 'third') {
+        return '1/3'
+      }
+      return '1/1'
+    }
+    return '1/1'
+  }
+
   const {
     component,
     id: itemId,
@@ -61,9 +74,8 @@ export const Item = ({
     defaultValue,
     ...props
   } = item
-  const isHalfColumn = component !== 'radio' && width === 'half'
-  const isThirdColumn = component !== 'radio' && width === 'third'
-  const span = isHalfColumn ? '1/2' : isThirdColumn ? '1/3' : '1/1'
+
+  const span = getSpan(component, width)
   const Component = componentMapper[component]
   const id = `${dataId}[${index}].${itemId}`
   const activeValues = index >= 0 && values ? values[index] : undefined
@@ -203,7 +215,7 @@ export const Item = ({
         label={formatText(label, application, formatMessage)}
         options={translatedOptions}
         placeholder={formatText(placeholder, application, formatMessage)}
-        split={width === 'half' ? '1/2' : '1/1'}
+        split={width === 'half' ? '1/2' : width === 'third' ? '1/3' : '1/1'}
         error={getFieldError(itemId)}
         control={control}
         readOnly={Readonly}
diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx
index a65e25164f5b..2e17c0e6e485 100644
--- a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx
+++ b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterItem.tsx
@@ -46,6 +46,19 @@ export const Item = ({
   const { setValue, control, clearErrors } = useFormContext()
   const prevWatchedValuesRef = useRef<string | (string | undefined)[]>()
 
+  const getSpan = (component: string, width: string) => {
+    if (component !== 'radio' && component !== 'checkbox') {
+      if (width === 'half') {
+        return '1/2'
+      }
+      if (width === 'third') {
+        return '1/3'
+      }
+      return '1/1'
+    }
+    return '1/1'
+  }
+
   const {
     component,
     id: itemId,
@@ -61,9 +74,8 @@ export const Item = ({
     defaultValue,
     ...props
   } = item
-  const isHalfColumn = component !== 'radio' && width === 'half'
-  const isThirdColumn = component !== 'radio' && width === 'third'
-  const span = isHalfColumn ? '1/2' : isThirdColumn ? '1/3' : '1/1'
+
+  const span = getSpan(component, width)
   const Component = componentMapper[component]
   const id = `${dataId}[${activeIndex}].${itemId}`
   const activeValues =
@@ -203,7 +215,7 @@ export const Item = ({
         label={formatText(label, application, formatMessage)}
         options={translatedOptions}
         placeholder={formatText(placeholder, application, formatMessage)}
-        split={width === 'half' ? '1/2' : '1/1'}
+        split={width === 'half' ? '1/2' : width === 'third' ? '1/3' : '1/1'}
         error={getFieldError(itemId)}
         control={control}
         readOnly={Readonly}