fix(ui): Square AttachImage with 2 row span

src/components/Controls/AttachImage.vue

@@ -1,19 +1,13 @@
 <template>
   <div
-    class="
+    class="relative bg-white border flex-center overflow-hidden group"
-      relative
-      bg-white
-      border
-      rounded-full
-      flex-center
-      overflow-hidden
-      group
-    "
     :class="{
-      'w-20 h-20': size !== 'small',
+      'rounded': size === 'form',
-      'w-12 h-12': size === 'small',
+      'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
+      'w-12 h-12 rounded-full': size === 'small',
     }"
     :title="df?.label"
+    :style="imageSizeStyle"
   >
     <img :src="value" v-if="value" />
     <div :class="[!isReadOnly ? 'group-hover:opacity-90' : '']" v-else>
@@ -113,6 +107,12 @@ export default defineComponent({
     },
   },
   computed: {
+    imageSizeStyle() {
+      if (this.size === 'form') {
+        return { width: '135px', height: '135px' };
+      }
+      return {};
+    },
     shouldClear() {
       return !!this.value;
     },

src/pages/CommonForm/CommonFormSection.vue

@@ -21,11 +21,13 @@
         :key="field.fieldname"
         :class="[
           field.fieldtype === 'Table' ? 'col-span-2 text-base' : '',
+          field.fieldtype === 'AttachImage' ? 'row-span-2' : '',
           field.fieldtype === 'Check' ? 'mt-auto' : 'mb-auto',
         ]"
       >
         <FormControl
           :ref="field.fieldname === 'name' ? 'nameField' : 'fields'"
+          :size="field.fieldtype === 'AttachImage' ? 'form' : undefined"
           :show-label="true"
           :border="true"
           :df="field"