Refactor: Datasets UI #3221 (#8349)

### What problem does this PR solve?

Refactor Datasets UI #3221.
### Type of change

- [X] New Feature (non-breaking change which adds functionality)

web/src/components/excel-to-html-form-field.tsx

@@ -17,18 +17,37 @@ export function ExcelToHtmlFormField() {
     <FormField
       control={form.control}
       name="parser_config.html4excel"
-      render={({ field }) => (
-        <FormItem defaultChecked={false}>
-          <FormLabel tooltip={t('html4excelTip')}>{t('html4excel')}</FormLabel>
-          <FormControl>
-            <Switch
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            ></Switch>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
+      render={({ field }) => {
+        if (typeof field.value === 'undefined') {
+          // default value set
+          form.setValue('parser_config.html4excel', false);
+        }
+
+        return (
+          <FormItem defaultChecked={false} className=" items-center space-y-0 ">
+            <div className="flex items-center">
+              <FormLabel
+                tooltip={t('html4excelTip')}
+                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              >
+                {t('html4excel')}
+              </FormLabel>
+              <div className="w-3/4">
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  ></Switch>
+                </FormControl>
+              </div>
+            </div>
+            <div className="flex pt-1">
+              <div className="w-1/4"></div>
+              <FormMessage />
+            </div>
+          </FormItem>
+        );
+      }}
     />
   );
 }