From e6717e2b6d2a955041955253caeb0aa7e5ac9a92 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Fri, 17 Oct 2025 02:42:59 +0700
Subject: [PATCH] dev: hotfix, content header adjustment

---
 app/components/content/bed/list.vue           |  2 +-
 app/components/content/building/list.vue      |  2 +-
 app/components/content/chamber/list.vue       |  2 +-
 app/components/content/counter/list.vue       |  2 +-
 .../content/division-position/list.vue        |  2 +-
 app/components/content/division/list.vue      |  2 +-
 app/components/content/employee/list.vue      |  5 +-
 app/components/content/encounter/list.vue     |  7 +-
 app/components/content/equipment/list.vue     |  2 +-
 app/components/content/floor/list.vue         |  2 +-
 app/components/content/installation/list.vue  |  2 +-
 app/components/content/item-price/list.vue    |  5 +-
 app/components/content/item/list.vue          |  5 +-
 .../content/medicine-group/list.vue           |  2 +-
 .../content/medicine-method/list.vue          |  2 +-
 app/components/content/medicine/list.vue      |  2 +-
 app/components/content/patient/detail.vue     |  2 +-
 app/components/content/patient/list.vue       | 77 ++++++++++---------
 app/components/content/prescription/list.vue  |  3 +
 app/components/content/public-screen/list.vue |  2 +-
 app/components/content/room/list.vue          |  2 +-
 app/components/content/satusehat/list.vue     |  2 +
 app/components/content/soapi/list.vue         |  5 +-
 .../content/specialist-intern/list.vue        |  5 +-
 app/components/content/specialist/list.vue    |  2 +-
 app/components/content/subspecialist/list.vue |  2 +-
 app/components/content/tools/list.vue         |  2 +-
 app/components/content/unit/list.vue          |  2 +-
 app/components/content/uom/list.vue           | 14 ++--
 app/components/content/user/list.vue          |  5 +-
 app/components/content/warehouse/list.vue     |  2 +-
 .../pub/my-ui/nav-header/filter.vue           |  2 +-
 app/components/pub/my-ui/nav-header/prep.vue  |  5 +-
 33 files changed, 91 insertions(+), 89 deletions(-)

diff --git a/app/components/content/bed/list.vue b/app/components/content/bed/list.vue
index 46ed0f11..e68f59c9 100644
--- a/app/components/content/bed/list.vue
+++ b/app/components/content/bed/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBedList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/building/list.vue b/app/components/content/building/list.vue
index 364f9a59..2c67a5ee 100644
--- a/app/components/content/building/list.vue
+++ b/app/components/content/building/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppBuildingList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/chamber/list.vue b/app/components/content/chamber/list.vue
index 66098a84..9b389a02 100644
--- a/app/components/content/chamber/list.vue
+++ b/app/components/content/chamber/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppChamberList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/counter/list.vue b/app/components/content/counter/list.vue
index 8757c0d2..e85c5df4 100644
--- a/app/components/content/counter/list.vue
+++ b/app/components/content/counter/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppCounterList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 46e22401..019e64a9 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionPositionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index 0ad75edb..9ccefc56 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -147,8 +147,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppDivisionList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/employee/list.vue b/app/components/content/employee/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/employee/list.vue
+++ b/app/components/content/employee/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/encounter/list.vue b/app/components/content/encounter/list.vue
index f218444a..0cc0c874 100644
--- a/app/components/content/encounter/list.vue
+++ b/app/components/content/encounter/list.vue
@@ -96,11 +96,10 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <Separator class="my-4 xl:my-5" />
+
   <Filter :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppEncounterList :data="data" />
-  </div>
+
+  <AppEncounterList :data="data" />
 
   <Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
     <AppEncounterFilter />
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 4e370502..19e5d913 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppEquipmentList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/floor/list.vue b/app/components/content/floor/list.vue
index 8859d9c2..1b91af9d 100644
--- a/app/components/content/floor/list.vue
+++ b/app/components/content/floor/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppFloorList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index fe27a4ef..31486097 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppInstallationList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/item-price/list.vue b/app/components/content/item-price/list.vue
index 9dcba7be..aa277b71 100644
--- a/app/components/content/item-price/list.vue
+++ b/app/components/content/item-price/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineGroupList :data="data" />
-  </div>
+
+  <AppMedicineGroupList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
     <AppMedicineGroupEntryForm v-model="entry" />
diff --git a/app/components/content/item/list.vue b/app/components/content/item/list.vue
index 6660f71e..15887985 100644
--- a/app/components/content/item/list.vue
+++ b/app/components/content/item/list.vue
@@ -61,9 +61,8 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppItemList :data="data" />
-  </div>
+
+  <AppItemList :data="data" />
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
     <AppItemEntryForm v-model="entry" />
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index 10c82ecd..80faf1ab 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineGroupList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index dd2b66e9..9e0e5d01 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -126,8 +126,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineMethodList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/medicine/list.vue b/app/components/content/medicine/list.vue
index 4590e891..27470776 100644
--- a/app/components/content/medicine/list.vue
+++ b/app/components/content/medicine/list.vue
@@ -138,8 +138,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppMedicineList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/patient/detail.vue b/app/components/content/patient/detail.vue
index 0ca4cd0d..185b3707 100644
--- a/app/components/content/patient/detail.vue
+++ b/app/components/content/patient/detail.vue
@@ -71,8 +71,8 @@ function handleAction(type: string) {
   <Header
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
   />
+
   <AppPatientPreview
     :person="patient.person"
     :person-addresses="patient.personAddresses"
diff --git a/app/components/content/patient/list.vue b/app/components/content/patient/list.vue
index 2b73ca08..519aeb8e 100644
--- a/app/components/content/patient/list.vue
+++ b/app/components/content/patient/list.vue
@@ -48,36 +48,37 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const summaryData = ref<Summary[]>([
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-])
+// Disable dulu, ayahab kalo diminta
+// const summaryData = ref<Summary[]>([
+//   {
+//     title: 'Total Pasien',
+//     icon: UsersRound,
+//     metric: 23,
+//     trend: 15,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Pasien Aktif',
+//     icon: UserCheck,
+//     metric: 100,
+//     trend: 9,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Kunjungan Hari Ini',
+//     icon: Calendar,
+//     metric: 52,
+//     trend: 1,
+//     timeframe: 'daily',
+//   },
+//   {
+//     title: 'Peserta BPJS',
+//     icon: Hospital,
+//     metric: 71,
+//     trend: -3,
+//     timeframe: 'daily',
+//   },
+// ])
 // #endregion
 
 // #region Lifecycle Hooks
@@ -165,7 +166,9 @@ watch([recId, recAction], () => {
     :prep="{ ...headerPrep }"
     :ref-search-nav="refSearchNav"
   />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
       <template v-if="summaryLoading">
         <SummaryCard
@@ -182,12 +185,14 @@ watch([recId, recAction], () => {
         />
       </template>
     </div>
-    <AppPatientList
-      :data="data"
-      :pagination-meta="paginationMeta"
-      @page-change="handlePageChange"
-    />
   </div>
+  -->
+
+  <AppPatientList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
 
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
diff --git a/app/components/content/prescription/list.vue b/app/components/content/prescription/list.vue
index b3cd7d25..f8059b9d 100644
--- a/app/components/content/prescription/list.vue
+++ b/app/components/content/prescription/list.vue
@@ -58,8 +58,11 @@ async function getMaterialList() {
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+
   <AppPrescriptionList v-if="!isLoading.dataListLoading" />
+
   <AppPrescriptionEntry />
+
   <PrescriptionItemListEntry :data=[] />
   <div>
     <Button>
diff --git a/app/components/content/public-screen/list.vue b/app/components/content/public-screen/list.vue
index 0b380d61..10c7d039 100644
--- a/app/components/content/public-screen/list.vue
+++ b/app/components/content/public-screen/list.vue
@@ -129,8 +129,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppPublicScreenList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/room/list.vue b/app/components/content/room/list.vue
index a88c0230..1317d5b0 100644
--- a/app/components/content/room/list.vue
+++ b/app/components/content/room/list.vue
@@ -196,8 +196,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppRoomList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/satusehat/list.vue b/app/components/content/satusehat/list.vue
index 6dcbd459..72cff7dd 100644
--- a/app/components/content/satusehat/list.vue
+++ b/app/components/content/satusehat/list.vue
@@ -108,10 +108,12 @@ const activeTabFilter = computed({
 <template>
   <div class="rounded-md border p-4">
     <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+
     <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
       <PubMyUiServiceStatus v-bind="service" />
       <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
     </div>
+
     <div class="rounded-md border p-4">
       <h2 class="text-md py-2 font-semibold">FHIR Resource</h2>
       <Tabs v-model="activeTabFilter">
diff --git a/app/components/content/soapi/list.vue b/app/components/content/soapi/list.vue
index e1d8373a..a240a65f 100644
--- a/app/components/content/soapi/list.vue
+++ b/app/components/content/soapi/list.vue
@@ -60,7 +60,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AssesmentFunctionList :data="data" />
-  </div>
+
+  <AssesmentFunctionList :data="data" />
 </template>
diff --git a/app/components/content/specialist-intern/list.vue b/app/components/content/specialist-intern/list.vue
index b004cc92..e2df8e3e 100644
--- a/app/components/content/specialist-intern/list.vue
+++ b/app/components/content/specialist-intern/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 0a16e10e..9bbf755f 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index c6750d13..e2c6db52 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppSubSpecialistList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index a81c041b..da22a976 100644
--- a/app/components/content/tools/list.vue
+++ b/app/components/content/tools/list.vue
@@ -134,8 +134,8 @@ onMounted(async () => {
     :prep="headerPrep"
     @search="handleSearch"
     :ref-search-nav="headerPrep.refSearchNav"
-    class="mb-4 xl:mb-5"
   />
+
   <AppToolsList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 44d7c115..03edd231 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -130,8 +130,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppUnitList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/content/uom/list.vue b/app/components/content/uom/list.vue
index bc0226ab..15498b15 100644
--- a/app/components/content/uom/list.vue
+++ b/app/components/content/uom/list.vue
@@ -126,15 +126,13 @@ onMounted(async () => {
       :prep="headerPrep"
       :ref-search-nav="headerPrep.refSearchNav"
       @search="handleSearch"
-      class="mb-4 xl:mb-5"
     />
-    <div class="rounded-md border p-4">
-      <AppUomList
-        :data="data"
-        :pagination-meta="paginationMeta"
-        @page-change="handlePageChange"
-      />
-    </div>
+
+    <AppUomList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
diff --git a/app/components/content/user/list.vue b/app/components/content/user/list.vue
index 9ad5abf9..d9ce6fc0 100644
--- a/app/components/content/user/list.vue
+++ b/app/components/content/user/list.vue
@@ -57,7 +57,6 @@ provide('table_data_loader', isLoading)
 
 <template>
   <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-  </div>
+
+  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
 </template>
diff --git a/app/components/content/warehouse/list.vue b/app/components/content/warehouse/list.vue
index f776d2df..a17ae9bb 100644
--- a/app/components/content/warehouse/list.vue
+++ b/app/components/content/warehouse/list.vue
@@ -132,8 +132,8 @@ onMounted(async () => {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
+
   <AppWarehouseList
     :data="data"
     :pagination-meta="paginationMeta"
diff --git a/app/components/pub/my-ui/nav-header/filter.vue b/app/components/pub/my-ui/nav-header/filter.vue
index 3e017f72..01b1ab55 100644
--- a/app/components/pub/my-ui/nav-header/filter.vue
+++ b/app/components/pub/my-ui/nav-header/filter.vue
@@ -48,7 +48,7 @@ function onFilterClick() {
 
 <template>
   <header>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-2 mb-4 2xl:mb-5">
       <div class="relative w-64">
         <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
         <Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
diff --git a/app/components/pub/my-ui/nav-header/prep.vue b/app/components/pub/my-ui/nav-header/prep.vue
index 10ad748b..63535847 100644
--- a/app/components/pub/my-ui/nav-header/prep.vue
+++ b/app/components/pub/my-ui/nav-header/prep.vue
@@ -24,11 +24,11 @@ function btnClick() {
 <template>
   <header>
     <div
-      class="flex items-center justify-between"
+      class="flex items-center justify-between mb-4 2xl:mb-5"
       :class="cn('', props.class)"
     >
       <div class="flex items-center">
-        <div class="font-semibold text-gray-900 md:text-base xl:text-lg">
+        <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
             :name="props.prep.icon!"
             class="mr-2 align-middle md:size-6"
@@ -66,4 +66,5 @@ function btnClick() {
       </div>
     </div>
   </header>
+  <Separator class="my-4 xl:my-5" />
 </template>