code scanner for forms - WIP (improve button look)

packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@@ -147,6 +147,7 @@ const onDecode = async (scannedCodeValue: string) => {
                   </div>
 
                   <div>
+                    <div class="flex">
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(field)"
                         :model-value="null"
@@ -165,26 +166,25 @@ const onDecode = async (scannedCodeValue: string) => {
                         :column="field"
                         :edit-enabled="true"
                       />
-
-                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                      <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                        {{ error.$message }}
-                      </div>
-
-                      {{ field.description }}
-                    </div>
-
                       <a-button
                         v-if="field.enable_scanner"
                         class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
+                        :alt="$t('activity.fillByCodeScan')"
                         @click="showCodeScannerForFieldTitle(field.title)"
                       >
                         <div class="flex items-center gap-1">
                           <QrCodeScan />
-                        <span class="!text-xs font-weight-normal"> {{ $t('activity.fillByCodeScan') }}</span>
                         </div>
                       </a-button>
+                    </div>
 
+                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                      <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                        {{ error.$message }}
+                      </div>
+
+                      {{ field.description }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -215,4 +215,8 @@ const onDecode = async (scannedCodeValue: string) => {
 :deep(.nc-cell .nc-action-icon) {
   @apply !text-white-500 !bg-white/50 !rounded-full !p-1 !text-xs !w-7 !h-7 !flex !items-center !justify-center !cursor-pointer !hover: !bg-white-600 !hover: !text-white-600 !transition;
 }
+.nc-btn-fill-form-column-by-scan {
+  @apply h-auto;
+  @apply ml-1;
+}
 </style>