resources/js/pages/Customers/HistoryPurchase.vue

     <DynamicDialog />
 
     <div class="grid">
-      <div class="col-12 flex flex-column md:flex-row md:align-items-center">
-        <Link class="text-primary text-5xl font-bold" @click="back">
-          Pelanggan
-        </Link>
-
-        <span class="text-5xl font-bold mx-2"> / </span>
-
-        <span class="text-5xl font-bold">Detail Pembelian</span>
-      </div>
-
       <div class="col-12">
         <div class="grid">
           <div class="col-12">
         </div>
       </div>
 
-      <div class="col-12 flex justify-content-end">
+      <div class="col-12 flex flex-column sm:flex-row justify-content-end">
         <AppButtonLink
           label="Cetak Invoice"
           icon="pi pi-print"
         />
       </div>
 
-      <div class="col-12 flex justify-content-end">
+      <div
+        class="col-12 flex flex-column sm:flex-row justify-content-between gap-3"
+      >
+        <Button
+          label="Kembali ke history pembelian"
+          class="p-button-text flex-order-2 sm:flex-order-1"
+          icon="pi pi-angle-left"
+          @click="back"
+        />
+
         <AppButtonLink
+          class="flex-order-1 sm:flex-order-2"
           label="Cetak Delivery Order"
           icon="pi pi-print"
           target="_blank"