From cc353b310fed74916e9b8557db4641dc59b30b85 Mon Sep 17 00:00:00 2001
From: Sinisa Kusic <contact.sinisa@gmail.com>
Date: Thu, 30 Oct 2025 10:11:26 +0100
Subject: [PATCH 1/2] refactor(headless-cms): update field section styling

- Change heading level from 6 to 5 for better hierarchy
- Refactor border line from parent div to pseudo-element
- Move label text into separate span for z-index control
- Improve visual separation with after pseudo-element
- Update spacing and positioning classes
- Simplify DOM structure by removing unnecessary wrapper div

Changes applied to DynamicSection and singleObjectInline components
to create consistent styling with improved visual hierarchy.
---
 .../plugins/fieldRenderers/DynamicSection.tsx | 24 ++++++++---------
 .../object/singleObjectInline.tsx             | 26 ++++++++-----------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx
index ed7b66c99d0..bb7e5b36ad5 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx
@@ -82,27 +82,25 @@ const DynamicSection = ({
                     <Bind.ValidationContainer>
                         <ParentFieldProvider value={value} path={Bind.parentName}>
                             {showLabel ? (
-                                <div
-                                    className={
-                                        "relative mb-xl mt-md border-b-sm border-accent-dimmed"
-                                    }
-                                >
+                                <>
                                     <Heading
-                                        level={6}
+                                        level={5}
                                         className={
-                                            "webiny_group-label-text absolute bottom-[-10px] pr-sm text-accent-primary bg-white"
+                                            "webiny_group-label-text mt-xl mb-sm relative text-accent-primary after:absolute after:z-0 after:inset-x-0 after:top-1/2 after:-translate-y-1/2 after:block after:content-[''] after:h-px after:border-primary-300 after:border-b-1 after:flex-1 after:min-w-0"
                                         }
                                     >
-                                        {`${field.label} ${
-                                            bindFieldValue.length
-                                                ? `(${bindFieldValue.length})`
-                                                : ""
-                                        }`}
+                                        <span className="relative z-1 pr-md bg-white">
+                                            {`${field.label} ${
+                                                bindFieldValue.length
+                                                    ? `(${bindFieldValue.length})`
+                                                    : ""
+                                            }`}
+                                        </span>
                                     </Heading>
                                     {field.helpText && (
                                         <FormComponentDescription text={field.helpText} />
                                     )}
-                                </div>
+                                </>
                             ) : null}
                             <Grid className={classSet(gridClassName, style.gridContainer)}>
                                 <>
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
index 6602372f98c..7f5bfb27c85 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
@@ -38,25 +38,21 @@ const plugin: CmsModelFieldRendererPlugin = {
                         <Bind.ValidationContainer>
                             <ParentFieldProvider value={bindProps.value} path={Bind.parentName}>
                                 <ParentValueIndexProvider index={-1}>
-                                    <div
+                                    <Heading
+                                        level={5}
                                         className={
-                                            "relative mb-xl mt-md border-b-sm border-accent-default"
+                                            "webiny_group-label-text mt-xl mb-sm relative text-accent-primary after:absolute after:z-0 after:inset-x-0 after:top-1/2 after:-translate-y-1/2 after:block after:content-[''] after:h-px after:border-primary-300 after:border-b-1 after:flex-1 after:min-w-0"
                                         }
                                     >
-                                        <Heading
-                                            level={6}
-                                            className={
-                                                "webiny_group-label-text absolute bottom-[-10px] pr-sm text-accent-primary bg-white"
-                                            }
-                                        >
+                                        <span className="relative z-1 pr-md bg-white">
                                             {field.label}
-                                        </Heading>
-                                        {field.helpText && (
-                                            <FormComponentDescription>
-                                                {field.helpText}
-                                            </FormComponentDescription>
-                                        )}
-                                    </div>
+                                        </span>
+                                    </Heading>
+                                    {field.helpText && (
+                                        <FormComponentDescription>
+                                            {field.helpText}
+                                        </FormComponentDescription>
+                                    )}
                                     <div
                                         className={
                                             "p-md border-sm border-neutral-dimmed-darker rounded-md"

From be20a83cedd0afb1b3770d8a6d9de991f09a5483 Mon Sep 17 00:00:00 2001
From: Sinisa Kusic <contact.sinisa@gmail.com>
Date: Thu, 30 Oct 2025 10:16:40 +0100
Subject: [PATCH 2/2] refactor: simplify object field wrapper styling

Remove border and padding from single object inline field wrapper,
replacing with vertical padding only for cleaner appearance.
---
 .../plugins/fieldRenderers/object/singleObjectInline.tsx    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
index 7f5bfb27c85..5ff8cde25d7 100644
--- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
+++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/singleObjectInline.tsx
@@ -53,11 +53,7 @@ const plugin: CmsModelFieldRendererPlugin = {
                                             {field.helpText}
                                         </FormComponentDescription>
                                     )}
-                                    <div
-                                        className={
-                                            "p-md border-sm border-neutral-dimmed-darker rounded-md"
-                                        }
-                                    >
+                                    <div className={"py-md-extra"}>
                                         <Fields
                                             gridClassName={fieldsGridStyle}
                                             Bind={Bind}