add field area classes

app/javascript/template_builder/area.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute overflow-visible group"
+    class="absolute overflow-visible group field-area-container"
     :style="positionStyle"
     :class="{ 'z-[1]': isMoved || isDragged }"
     @pointerdown.stop
@@ -33,7 +33,7 @@
     </div>
     <div
       v-if="field?.type && (isSelected || isNameFocus)"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
@@ -41,7 +41,7 @@
       <FieldSubmitter
         v-if="field.type != 'heading'"
         v-model="field.submitter_uuid"
-        class="border-r"
+        class="border-r roles-dropdown"
         :compact="true"
         :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
         :allow-add-new="!defaultSubmitters.length"
@@ -108,7 +108,7 @@
         >{{ t('editable') }}</label>
         <span
           v-if="field.type !== 'payment' && !isValueInput"
-          class="dropdown dropdown-end"
+          class="dropdown dropdown-end field-area-settings-dropdown"
           @mouseenter="renderDropdown = true"
           @touchstart="renderDropdown = true"
         >
@@ -160,7 +160,7 @@
     </div>
     <div
       ref="touchValueTarget"
-      class="flex items-center h-full w-full"
+      class="flex items-center h-full w-full field-area"
       dir="auto"
       :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center']"
       @click="focusValueInput"

app/javascript/template_builder/field_type.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown"
+    class="dropdown field-types-dropdown"
     @mouseenter="renderDropdown = true"
     @touchstart="renderDropdown = true"
   >

app/javascript/template_builder/font_modal.vue

@@ -24,7 +24,7 @@
               <div class="dropdown modal-field-font-dropdown">
                 <label
                   tabindex="0"
-                  class="base-input flex items-center justify-between items-center"
+                  class="base-input flex items-center justify-between"
                   style="height: 32px; padding-right: 0; width: 120px"
                   :class="fonts.find((f) => f.value === preferences.font)?.class"
                 >
@@ -76,7 +76,7 @@
                 </option>
               </select>
               <span
-                class="border-l pl-1.5 absolute bg-white absolute bottom-0 pointer-events-none text-sm h-5"
+                class="border-l pl-1.5 absolute bg-white bottom-0 pointer-events-none text-sm h-5"
                 style="right: 13px; top: 7px"
               >
                 pt