fix inline fields css

assets/js/components/subscriptions/SectionInnerField.vue

@@ -20,9 +20,9 @@ const showField = computed(() => {
 <template>
     <div
         v-show="showField"
-        class="wpuf-grid wpuf-grid-cols-3">
-        <div class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center wpuf-pl-4">
-        <label :for="parentField.name" v-html="parentField.label"></label>
+        class="wpuf-grid wpuf-grid-cols-3 wpuf-p-4 wpuf-gap-4">
+        <div class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center">
+            <label :for="parentField.name" v-html="parentField.label"></label>
             <div
                 v-if="parentField.tooltip"
                 class="wpuf-tooltip wpuf-cursor-pointer wpuf-ml-2 wpuf-z-10"
@@ -32,10 +32,14 @@ const showField = computed(() => {
                           stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                 </svg>
             </div>
-        <div class="wpuf-mr-2 wpuf-contents">
-            <SectionInputField v-for="field in parentField.fields"
-               :field="field" :fieldId="field.id" />
         </div>
+        <div class="wpuf--ml-3 wpuf-flex wpuf-justify-between wpuf-col-span-2 wpuf--mr-3">
+            <SectionInputField
+                v-for="field in parentField.fields"
+                :field="field"
+                :fieldId="field.id"
+                :isChildField="true"
+            />
         </div>
     </div>
 </template>

assets/js/components/subscriptions/SectionInputField.vue

@@ -18,13 +18,17 @@ const subSection = inject( 'subSection' );
 const props = defineProps( {
     field: Object,
     fieldId: String,
+    isChildField: {
+        type: Boolean,
+        default: false,
+    },
 } );
 
 const dependencyStore = useFieldDependencyStore();
 const subscription = subscriptionStore.currentSubscription;
 const errors = storeToRefs( subscriptionStore.errors );
 
-const { field, fieldId } = toRefs( props );
+const { field, fieldId, isChildField } = toRefs( props );
 
 const publishedDate = ref( new Date() );
 
@@ -142,6 +146,19 @@ const onMultiSelectChange = ( currentValue ) => {
     });
 };
 
+const fieldLabelClasses = computed(() => {
+    const classes = ['wpuf-gap-4'];
+    if (field.value.label) {
+        classes.push('wpuf-grid wpuf-grid-cols-3 wpuf-p-4');
+    } else {
+        classes.push('wpuf-py-4 wpuf-pl-3 wpuf-pr-4');
+    }
+
+    if (isChildField.value) classes.push('wpuf-col-span-2 wpuf-w-1/2');
+
+    return classes;
+});
+
 onMounted(() => {
     if ( field.value.type === 'switcher' ) {
         emit('toggleDependentFields', fieldId.value, switchStatus.value);
@@ -196,8 +213,7 @@ onMounted(() => {
 <template>
     <div
         v-show="showField"
-        :class="field.label ? 'wpuf-grid wpuf-grid-cols-3 wpuf-p-4' : 'wpuf-py-4 wpuf-pl-3 wpuf-pr-4'"
-        class="wpuf-gap-4">
+        :class="fieldLabelClasses">
         <div
             v-if="field.label"
            class="wpuf-block wpuf-text-sm wpuf-leading-6 wpuf-text-gray-600 wpuf-flex wpuf-items-center"
@@ -226,7 +242,7 @@ onMounted(() => {
                 <a href="https://wedevs.com/wp-user-frontend-pro/pricing/?utm_source=wpdashboard&amp;utm_medium=popup"
                    target="_blank"
                    class="wpuf-inline-flex wpuf-align-center wpuf-p-2 wpuf-bg-amber-600 wpuf-text-white hover:wpuf-text-white wpuf-rounded-md">
-                    Upgrade to PRO
+                    {{ __( 'Upgrade to Pro', 'wp-user-frontend' ) }}
                     <span class="pro-icon icon-white">
                         <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564ZM17.8443 12.6909C17.8443 12.3897 17.5932 12.1455 17.2835 12.1455H2.77884C2.46916 12.1455 2.21809 12.3897 2.21809 12.6909V14C2.21809 14.3012 2.46916 14.5455 2.77884 14.5455H17.2835C17.5932 14.5455 17.8443 14.3012 17.8443 14V12.6909Z" fill="#FB9A28" />