From 21a58120424e7463c902b4d42f4ed72e0ab398dd Mon Sep 17 00:00:00 2001
From: Melinda Humphrey <melindashumphrey@gmail.com>
Date: Mon, 15 Dec 2025 08:53:27 -0600
Subject: [PATCH] bugfix - css hiding other modal form labels

---
 .../ui_component/pagebuilder_widget_form.xml  | 13 +++-
 view/adminhtml/web/css/source/_extend.less    | 38 +++++++----
 .../template/form/element/widget-builder.html | 66 +++++++++++--------
 3 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/view/adminhtml/ui_component/pagebuilder_widget_form.xml b/view/adminhtml/ui_component/pagebuilder_widget_form.xml
index 98da9f6..5bb72b9 100755
--- a/view/adminhtml/ui_component/pagebuilder_widget_form.xml
+++ b/view/adminhtml/ui_component/pagebuilder_widget_form.xml
@@ -67,12 +67,16 @@
     <fieldset name="general" sortOrder="20">
         <settings>
             <label/>
+            <collapsible>false</collapsible>
+            <opened>true</opened>
         </settings>
         <field name="content" sortOrder="70" formElement="textarea"
-               component="MageOS_PageBuilderWidget/js/form/element/widget-builder">
+               component="MageOS_PageBuilderWidget/js/form/element/widget-builder"
+               template="ui/form/components/single/field">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="null" />
+                    <item name="default" xsi:type="null"/>
+                    <item name="elementTmpl" xsi:type="string">MageOS_PageBuilderWidget/form/element/widget-builder</item>
                     <item name="dataUrlConfigPath" xsi:type="string">content_types.widget.additional_data.chooserConfig.dataUrl</item>
                     <item name="formUrlConfigPath" xsi:type="string">content_types.widget.additional_data.chooserConfig.formUrl</item>
                     <item name="saveFormUrlConfigPath" xsi:type="string">content_types.widget.additional_data.chooserConfig.saveFormUrl</item>
@@ -80,6 +84,11 @@
             </argument>
             <settings>
                 <dataType>text</dataType>
+                <label/>
+                <labelVisible>false</labelVisible>
+                <additionalClasses>
+                    <class name="admin__field-wide">true</class>
+                </additionalClasses>
             </settings>
         </field>
         <field name="content_settings" formElement="hidden">
diff --git a/view/adminhtml/web/css/source/_extend.less b/view/adminhtml/web/css/source/_extend.less
index bfe3885..0ea92f9 100644
--- a/view/adminhtml/web/css/source/_extend.less
+++ b/view/adminhtml/web/css/source/_extend.less
@@ -1,18 +1,30 @@
-.pagebuilder_modal_form_pagebuilder_modal_form_modal_insert_form {
-  .fieldset-wrapper[data-index="general"] {
-    > .admin__fieldset-wrapper-content {
-      > fieldset.admin__fieldset {
-        > .admin__field {
-          > .admin__field-label {
-            display: none;
-          }
+.pagebuilder-widget-form-container {
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
 
-          > .admin__field-control {
+    .widget-type-selector {
+        margin-bottom: 20px;
+
+        .admin__field-control {
+            width: 100%;
+        }
+
+        select {
             width: 100%;
-            padding: 30px;
-          }
         }
-      }
     }
-  }
+
+    .widget-form-content {
+        margin-bottom: 20px;
+        width: 100%;
+
+        form {
+            width: 100%;
+        }
+    }
+
+    .widget-save-button {
+        margin-top: 15px;
+    }
 }
\ No newline at end of file
diff --git a/view/adminhtml/web/template/form/element/widget-builder.html b/view/adminhtml/web/template/form/element/widget-builder.html
index 4b94ed9..8f6f6d0 100644
--- a/view/adminhtml/web/template/form/element/widget-builder.html
+++ b/view/adminhtml/web/template/form/element/widget-builder.html
@@ -1,34 +1,42 @@
-<div data-bind="attr: { id: 'widgetFormContainer' + uid }">
-    <div class="admin__field-design-options" afterRender="renderWidgetBuilder">
-        <input type="text" ko-value="value" attr="id: uid, name: inputName"/>
+<div class="pagebuilder-widget-form-container" data-bind="attr: { id: 'widgetFormContainer' + uid }">
+    <div class="widget-type-selector" afterRender="renderWidgetBuilder">
+        <input type="hidden" ko-value="value" attr="id: uid, name: inputName"/>
 
-        <div class="admin__field field field-select_widget_type  with-addon required _required">
-            <div class="admin__field-control control">
-                <div class="admin__field">
-                    <select name="widget_type"
-                            title="Widget Type"
-                            class="required-entry _required select admin__control-select valid"
-                            data-bind="
-                            value: selectedWidgetCode,
-                            attr: { id: 'selectWidgetType' + uid }"
-                            aria-invalid="false">
-                        <!-- ko foreach: { data: chooserOptions, as: 'option' } -->
-                            <option data-bind="value: option.code, attr: {selected: option.selected}">
-                                <!-- ko text: option.name --><!-- /ko -->
-                            </option>
-                        <!-- /ko -->
-                    </select>
-                    <p class="nm">
-                        <small data-bind="text: selectedWidgetDescription"></small>
-                    </p>
-                </div>
+        <div class="admin__field field field-widget_type required _required">
+            <label class="admin__field-label" data-bind="attr: {for: 'widget_type-' + uid}">
+                <span data-bind="i18n: 'Widget Type'"></span>
+            </label>
+            <div class="admin__field-control" data-bind="attr: { id: 'widget_type-' + uid }">
+                <select name="widget_type"
+                        title="Widget Type"
+                        class="required-entry _required select admin__control-select"
+                        data-bind="
+                        value: selectedWidgetCode,
+                        attr: { id: 'selectWidgetType' + uid }">
+                    <!-- ko foreach: { data: chooserOptions, as: 'option' } -->
+                    <option data-bind="value: option.code, attr: {selected: option.selected}">
+                        <!-- ko text: option.name --><!-- /ko -->
+                    </option>
+                    <!-- /ko -->
+                </select>
+                <!-- ko if: selectedWidgetDescription -->
+                <p class="admin__field-note">
+                    <span data-bind="text: selectedWidgetDescription"></span>
+                </p>
+                <!-- /ko -->
             </div>
         </div>
     </div>
-    <form class="admin__field" data-bind="html: widgetHtmlForm, attr: { id: 'widgetForm' + uid }, visible: saveIsAvailable"></form>
-    <button
-        class="action- scalable save primary ui-button ui-corner-all ui-widget"
-        data-bind="click: updateValue, visible: saveIsAvailable">
-        <span data-bind="i18n: 'Save Widget Configuration'"></span>
-    </button>
+
+    <div class="widget-form-content" data-bind="visible: saveIsAvailable">
+        <form data-bind="html: widgetHtmlForm, attr: { id: 'widgetForm' + uid }"></form>
+    </div>
+
+    <div class="widget-save-button" data-bind="visible: saveIsAvailable">
+        <button type="button"
+                class="action-default scalable save primary"
+                data-bind="click: updateValue">
+            <span data-bind="i18n: 'Save Widget Configuration'"></span>
+        </button>
+    </div>
 </div>