feat: sidebar style, input search, table hight

Author: alisaweb3

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "tabWidth": 4,
+  "tabWidth": 2,
   "singleQuote": true,
   "semi": true,
   "endOfLine": "auto",

src/components/dynamic/ArrayObjectElement.vue

@@ -18,7 +18,7 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <div class="overflow-x-auto p-4">
+  <div class="overflow-auto h-[500px] p-4">
     <div
       v-if="header.length > 0"
       class="table table-compact w-full"
@@ -35,7 +35,7 @@ const header = computed(() => {
             :key="index"
             class="text-left text-capitalize"
           >
-            {{ item }}
+            {{ item }} 
           </th>
         </tr>
       </thead>

src/components/dynamic/ObjectElement.vue

@@ -4,11 +4,16 @@ import { select } from './index';
 const props = defineProps(['value']);
 </script>
 <template>
-  <div class="overflow-x-auto">
+  <div class="overflow-auto">
     <table class="table table-compact w-full text-sm">
       <tbody>
         <tr v-for="(v, k) of value">
-          <td class="text-capitalize whitespace-break-spaces w-1/5" style="min-width: 180px;">{{ String(k).replaceAll("_", " ") }}</td>
+          <td
+            class="text-capitalize whitespace-break-spaces w-1/5"
+            style="min-width: 180px"
+          >
+            {{ String(k).replaceAll('_', ' ') }}
+          </td>
           <td>
             <div
               class="overflow-hidden w-auto whitespace-normal"