dev: compact styling

app/components/pub/my-ui/doc-entry/block.vue

@@ -30,7 +30,7 @@ const getLabelSizeIdx = (size: string) => {
 const settingClass = computed(() => {
   const breakPointIdx = getBreakpointIdx(props.gridPoint)
   let cls = breakpoints[breakPointIdx]
-  cls += ' gap-x-4 xl:gap-x-5 gap-y-2 xl:gap-y-3 ' + [
+  cls += ' gap-x-4 2xl:gap-x-5 ' + [
     'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
     'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
   ][props.colCount - 1]
@@ -44,7 +44,7 @@ const settingClass = computed(() => {
     ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
   ][breakPointIdx]
   if (props.cellFlex) {
-    cls += ' ' + [
+    cls += ' gap-y-2 2xl:gap-y-3 ' + [
       '[&_.cell]:flex',
       '[&_.cell]:sm:flex',
       '[&_.cell]:md:flex',
@@ -60,11 +60,11 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
-  cls += '[&_textarea]:text-xs [&_textarea]:2xl:!text-sm '
-  cls += '[&_label]:text-xs [&_label]:2xl:!text-sm'
+  cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
+  cls += '[&_label]:md:text-xs [&_label]:md:text-xs [&_label]:2xl:!text-sm'
   return cls
 })
 </script>

app/components/pub/my-ui/doc-entry/field.vue

@@ -9,6 +9,6 @@ const props = defineProps({
 <template>
   <div :class="`field ${props.defaultClass} ${props.class}`">
     <slot />
-    <div v-if="props.errMessage" class="mt-1 md:text-xs 2xl:text-sm font-medium text-red-500">{{ props.errMessage }}</div>
+    <div v-if="props.errMessage" class="mt-1 md:!text-xs 2xl:!text-sm font-medium text-red-500">{{ props.errMessage }}</div>
   </div>
 </template>