changes

app/components/datatable/ContextMenu.vue

@@ -259,11 +259,11 @@
     </ul>
   </div>
   <div v-if="currentTab === 'detail'">
-    <div class="fs-14 mt-3 is-flex is-gap-0.5 is-align-items-center">
-      <p class="font-semibold">Tên trường:</p>
-      <p>{{ currentField.name }}</p>
+    <p class="field fs-14 is-flex is-gap-0.5 is-align-items-center">
+      <span class="font-semibold">Tên trường:</span>
+      <span>{{ currentField.name }}</span>
       <button
-        class="button is-white is-small"
+        class="button is-small size-8 is-primary is-light is-rounded"
         @click="copyContent(currentField.name)"
       >
         <span class="icon">
@@ -273,38 +273,42 @@
           />
         </span>
       </button>
-    </div>
-    <label class="label fs-14 mt-3">Mô tả<span class="has-text-danger"> *</span></label>
-    <div class="field has-addons">
-      <div class="control is-expanded">
-        <input
-          class="input fs-14 h-full"
-          type="text"
-          @change="changeLabel($event.target.value)"
-          v-model="label"
-        />
-      </div>
-      <div class="control">
-        <button
-          class="button h-full"
-          @click="editLabel()"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:edit-outline-rounded"
-              :size="18"
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-    <p
-      v-if="errors.find((v) => v.name === 'label')"
-      class="help is-danger"
-    >
-      {{ errors.find((v) => v.name === "label").msg }}
     </p>
-    <div class="field mt-3">
+    <div class="field">
+      <label class="label fs-14">Mô tả<span class="has-text-danger"> *</span></label>
+      <div class="control">
+        <div class="field has-addons">
+          <div class="control is-expanded">
+            <input
+              class="input fs-14 h-full"
+              type="text"
+              @change="changeLabel($event.target.value)"
+              v-model="label"
+            />
+          </div>
+          <div class="control">
+            <button
+              class="button h-full"
+              @click="editLabel()"
+            >
+              <span class="icon">
+                <Icon
+                  name="material-symbols:edit-outline-rounded"
+                  :size="18"
+                />
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <p
+        v-if="errors.find((v) => v.name === 'label')"
+        class="help is-danger"
+      >
+        {{ errors.find((v) => v.name === "label").msg }}
+      </p>
+    </div>
+    <div class="field">
       <label class="label fs-14">Kiểu dữ liệu<span class="has-text-danger"> * </span></label>
       <div class="control fs-14">
         <button
@@ -365,36 +369,34 @@
         </div>
       </div>
     </div>
-    <div class="field is-horizontal mt-3">
-      <div class="field-body">
-        <div class="field">
-          <label class="label fs-14">Định dạng nâng cao</label>
-          <div class="control">
-            <button
-              v-for="v in colorchoice.filter((v) => v.code !== 'condition')"
-              @click="changeTemplate(v)"
-              class="button is-white fs-14"
-            >
-              <span class="icon">
-                <Icon
-                  :name="
-                    radioTemplate === v.code
-                      ? 'material-symbols:radio-button-checked-outline'
-                      : 'material-symbols:radio-button-unchecked'
-                  "
-                  :size="22"
-                />
-              </span>
-              <span>{{ v.name }}</span>
-            </button>
-            <button
-              v-if="radioTemplate === 'option'"
-              class="button is-primary is-light fs-14 ml-2"
-              @click="showSidebar()"
-            >
-              {{ currentField.template ? "Sửa" : "Tạo" }} định dạng
-            </button>
-          </div>
+    <div class="field">
+      <div class="field">
+        <label class="label fs-14">Định dạng nâng cao</label>
+        <div class="control">
+          <button
+            v-for="v in colorchoice.filter((v) => v.code !== 'condition')"
+            @click="changeTemplate(v)"
+            class="button is-white fs-14"
+          >
+            <span class="icon">
+              <Icon
+                :name="
+                  radioTemplate === v.code
+                    ? 'material-symbols:radio-button-checked-outline'
+                    : 'material-symbols:radio-button-unchecked'
+                "
+                :size="22"
+              />
+            </span>
+            <span>{{ v.name }}</span>
+          </button>
+          <button
+            v-if="radioTemplate === 'option'"
+            class="button is-primary is-light fs-14 ml-2"
+            @click="showSidebar()"
+          >
+            {{ currentField.template ? "Sửa" : "Tạo" }} định dạng
+          </button>
         </div>
       </div>
     </div>