dev: hotfix, more styling

app/components/pub/my-ui/confirmation/record-confirmation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import Confirmation from './confirmation.vue'
 
 interface RecordData {
   id: number | string

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

@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-2 2xl:gap-y-3 [&_.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]:md:text-xs [&_textarea]:2xl:!text-sm '

app/components/pub/my-ui/modal/dialog.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { Dialog } from '~/components/pub/ui/dialog'
+import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
+import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
 
 interface DialogProps {
   title: string
+  titleIcon?: string
+  titleClass?: string
   description?: string
   preventOutside?: boolean
   open?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
@@ -24,8 +28,9 @@ const sizeClass = computed(() => {
   const sizeMap = {
     sm: 'sm:max-w-[350px]',
     md: 'sm:max-w-[425px]',
-    lg: 'sm:max-w-[600px]',
-    xl: 'sm:max-w-[800px]',
+    lg: 'sm:max-w-[720px]',
+    xl: 'sm:max-w-[960px]',
+    '2xl': 'sm:max-w-[1200px]',
     full: 'sm:max-w-[95vw]',
   }
   return sizeMap[props.size]
@@ -46,10 +51,19 @@ const isOpen = computed({
       @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
     >
       <DialogHeader>
-        <DialogTitle class="text-[20px]">{{ props.title }}</DialogTitle>
+        <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
+          <div class="me-2 pt-0.5">
+            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          </div>
+          <div>
+            {{ props.title }}
+          </div>
+        </DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
+      <DialogDescription :class="sizeClass">
         <slot />
+      </DialogDescription>
     </DialogContent>
   </Dialog>
 </template>