fix: borcode and qrcode center alignment issue #7253

packages/nc-gui/components/virtual-cell/QrCode.vue

@@ -77,25 +77,26 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     </template>
     <img v-if="showQrCode" :src="qrCodeLarge" :alt="$t('title.qrCode')" />
   </a-modal>
-  <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-[10px]">
-    {{ $t('labels.qrCodeValueTooLong') }}
-  </div>
   <div
-    class="pl-2 w-full flex"
+    v-if="showQrCode"
+    class="w-full flex"
     :class="{
-      'flex-start': isExpandedFormOpen,
+      'flex-start pl-2': isExpandedFormOpen,
       'justify-center': !isExpandedFormOpen,
     }"
   >
     <img
-      v-if="showQrCode && rowHeight"
+      v-if="rowHeight"
-      :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
       :src="qrCode"
       :alt="$t('title.qrCode')"
       class="min-w-[1.4em]"
       @click="showQrModal"
     />
-    <img v-else-if="showQrCode" class="mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+    <img v-else class="mx-auto min-w-[1.4em]" :src="qrCode" :alt="$t('title.qrCode')" @click="showQrModal" />
+  </div>
+  <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+    {{ $t('labels.qrCodeValueTooLong') }}
   </div>
   <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -55,9 +55,9 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
   </a-modal>
   <div
     v-if="!tooManyCharsForBarcode"
-    class="flex ml-2 w-full items-center barcode-wrapper"
+    class="flex w-full items-center barcode-wrapper"
     :class="{
-      'justify-start': isExpandedFormOpen,
+      'justify-start ml-2': isExpandedFormOpen,
       'justify-center': !isExpandedFormOpen,
     }"
   >
@@ -65,7 +65,7 @@ const rowHeight = inject(RowHeightInj, ref(undefined))
       v-if="showBarcode && rowHeight"
       :barcode-value="barcodeValue"
       :barcode-format="barcodeMeta.barcodeFormat"
-      :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
+      :custom-style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
       @on-click-barcode="showBarcodeModal"
     >
       <template #barcodeRenderError>