fix

comps/custom/Breadcrumb.tsx

@@ -1,6 +1,7 @@
 import { useLocal } from "@/utils/use-local";
 import { FC, ReactNode, useEffect } from "react";
 import { FieldLoading } from "../ui/field-loading";
+import { ChevronLeft } from "lucide-react";
 
 export type BreadItem = {
   label: React.ReactNode;
@@ -39,10 +40,13 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
     local.value = value;
   }
 
+  const list = Array.isArray(local.value) ? local.value : [];
+
   return (
     <div
       className={cx(
-        "breadcrumb c-w-full c-flex c-items-center c-flex-wrap",
+        "breadcrumb c-w-full c-flex c-flex-wrap",
+        isMobile ? "c-items-stretch" : "c-items-center",
         className
       )}
     >
@@ -53,8 +57,9 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
           {(!local.value || local.value.length === 0) &&
             isEditor &&
             "Breadcrumb"}
-          {(Array.isArray(local.value) ? local.value : []).map(
-            (cur, index): ReactNode => {
+          {isDesktop && (
+            <>
+              {list.map((cur, index): ReactNode => {
                 const lastIndex = (local.value || []).length - 1;
 
                 return (
@@ -96,7 +101,35 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
                     )}
                   </>
                 );
-            }
+              })}
+            </>
+          )}
+          {isMobile && (
+            <>
+              {list.length > 1 && (
+                <div className={cx("c-flex c-items-stretch")}>
+                  <div
+                    className="breadcrumb-back c-flex c-items-center c-px-2 c-border-r "
+                    onClick={(ev) => {
+                      const cur = list[list.length - 2];
+                      if (isEditor) return;
+                      if (cur.url) navigate(cur.url || "");
+                      if (cur.onClick) cur.onClick(ev);
+                    }}
+                  >
+                    <ChevronLeft />
+                  </div>
+                  <h1 className="bredcrumb-label c-flex c-font-semibold c-items-center c-pl-2 c-text-xs md:c-text-base">
+                    {list[list.length - 1].label}
+                  </h1>
+                </div>
+              )}
+              {list.length === 1 && (
+                <h1 className="bredcrumb-label c-font-semibold c-flex c-px-3 c-items-center c-text-xs md:c-text-base">
+                  {list[0].label}
+                </h1>
+              )}
+            </>
           )}
         </>
       )}