From 6771318137d69ea7f2d7f9ca1e1886df99db4a40 Mon Sep 17 00:00:00 2001
From: Nikola Stojanovic <68916411+dzonidoo@users.noreply.github.com>
Date: Thu, 6 Jun 2024 18:38:13 +0200
Subject: [PATCH] style header lables and fix group items function (#4520)

---
 .../authoring-section/authoring-section.tsx        |  9 +++++++--
 .../authoring-section/get-field-container.tsx      | 14 ++------------
 .../src/rundown-items/content-profile.tsx          | 10 +++++-----
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/scripts/apps/authoring-react/authoring-section/authoring-section.tsx b/scripts/apps/authoring-react/authoring-section/authoring-section.tsx
index f85b52a4f3..697d86ec76 100644
--- a/scripts/apps/authoring-react/authoring-section/authoring-section.tsx
+++ b/scripts/apps/authoring-react/authoring-section/authoring-section.tsx
@@ -37,6 +37,11 @@ function groupItemsToRows<T>(items: Array<T>, getWidth: (item: T) => number) {
             rowWidth = rowWidth + itemWidth;
         } else {
             itemGroups.push([]);
+            if (itemWidth === 100) {
+                rowWidth = 100;
+            } else {
+                rowWidth = 0;
+            }
         }
 
         const lastGroup = itemGroups[itemGroups.length - 1];
@@ -85,13 +90,13 @@ export class AuthoringSection<T> extends React.PureComponent<IPropsAuthoringSect
                     backgroundColor: themeApplies ? this.props.uiTheme.backgroundColor : undefined,
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: '10px',
+                    gap: '12px',
                     padding: this.props.padding,
                 }}
             >
                 {
                     grouped.map((group, index) => (
-                        <div key={index} style={{display: 'flex', gap: '10px'}}>
+                        <div key={index} style={{display: 'flex', gap: '12px'}}>
                             {
                                 group.map((field) => {
                                     const canBeToggled = toggledFields[field.id] != null;
diff --git a/scripts/apps/authoring-react/authoring-section/get-field-container.tsx b/scripts/apps/authoring-react/authoring-section/get-field-container.tsx
index 0766fd8e6f..8eb635143a 100644
--- a/scripts/apps/authoring-react/authoring-section/get-field-container.tsx
+++ b/scripts/apps/authoring-react/authoring-section/get-field-container.tsx
@@ -30,22 +30,12 @@ export function getFieldContainer(
 
             return (
                 <div className={sectionClassNames?.header}>
-                    <div
-                        style={{
-                            display: 'flex',
-                            justifyContent: 'start',
-                            alignItems: 'center',
-                        }}
-                    >
+                    <Spacer v gap="0">
                         <span
                             className={classNames(
                                 'form-label',
                                 {'form-label--invalid': validationError != null},
                             )}
-                            style={{
-                                width: '90px',
-                                justifyContent: 'end',
-                            }}
                         >
                             <Spacer h gap="8" noGrow noWrap>
                                 <span style={{textAlign: 'end'}}>
@@ -79,7 +69,7 @@ export function getFieldContainer(
                                 )
                             }
                         </div>
-                    </div>
+                    </Spacer>
                 </div>
             );
         }
diff --git a/scripts/extensions/broadcasting/src/rundown-items/content-profile.tsx b/scripts/extensions/broadcasting/src/rundown-items/content-profile.tsx
index 6814680e92..1435ce8ea2 100644
--- a/scripts/extensions/broadcasting/src/rundown-items/content-profile.tsx
+++ b/scripts/extensions/broadcasting/src/rundown-items/content-profile.tsx
@@ -95,7 +95,7 @@ const itemTypesConfig: IDropdownConfigVocabulary = {
     source: 'vocabulary',
     vocabularyId: RUNDOWN_ITEM_TYPES_VOCABULARY_ID,
     multiple: false,
-    width: 100,
+    width: 33,
 };
 
 const itemTypeField: IAuthoringFieldV2 = {
@@ -109,7 +109,7 @@ const cameraConfig: IDropdownConfigVocabulary = {
     source: 'vocabulary',
     vocabularyId: CAMERA,
     multiple: true,
-    width: 100,
+    width: 33,
 };
 
 const cameraField: IAuthoringFieldV2 = {
@@ -124,7 +124,7 @@ const durationField: IAuthoringFieldV2 = {
     name: gettext('Duration'),
     fieldType: 'duration',
     fieldConfig: {
-        width: 100,
+        width: 50,
     },
 };
 
@@ -133,7 +133,7 @@ const plannedDurationField: IAuthoringFieldV2 = {
     name: gettext('Planned duration'),
     fieldType: 'duration',
     fieldConfig: {
-        width: 100,
+        width: 50,
     },
 };
 
@@ -150,7 +150,7 @@ const statusConfig: IDropdownConfigVocabulary = {
     source: 'vocabulary',
     vocabularyId: STATUS_VOCABULARY_ID,
     multiple: false,
-    width: 100,
+    width: 33,
 };
 
 const statusField: IAuthoringFieldV2 = {