From da4d0620a4380f5df0239d55e71aacdfc16d0e42 Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Wed, 15 Oct 2025 16:57:22 -0400
Subject: [PATCH] background remover fix

---
 .../utilities/BackgroundRemoverPanel.tsx      | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/components/utilities/BackgroundRemoverPanel.tsx b/components/utilities/BackgroundRemoverPanel.tsx
index 87ab7663..5e08423f 100644
--- a/components/utilities/BackgroundRemoverPanel.tsx
+++ b/components/utilities/BackgroundRemoverPanel.tsx
@@ -1,4 +1,3 @@
-// components/utilities/BackgroundRemoverPanel.tsx
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -73,7 +72,7 @@ type ResultMap = {
     };
 };
 
-export default function BackgroundRemoverPanel({ embedded = true }: { embedded?: boolean }) {
+export default function BackgroundRemoverPage() {
     // ---------- State ----------
     const [file, setFile] = useState<File | null>(null);
     const [sourceUrl, setSourceUrl] = useState<string | null>(null);
@@ -353,10 +352,21 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
 
         // ---------- Render ----------
         return (
-            <div className="p-0 text-zinc-100 overflow-x-hidden">
+            <div className="p-6 text-zinc-100 overflow-x-hidden">
             {styles}
 
-            <div className="mx-auto w-full max-w-[1200px] px-0">
+            <div className="mx-auto w-full max-w-[1200px] px-4">
+            {/* Header row: title left, back button right */}
+            <div className="mb-4 flex items-center justify-between gap-3">
+            <h1 className="text-2xl font-semibold">Background Remover</h1>
+            <a
+            href="https://makearmy.io"
+            className="px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 text-sm"
+            >
+            Back to main
+            </a>
+            </div>
+
             {/* Source filename */}
             <div className="text-zinc-400 mb-3">
             <span className="text-zinc-300">Source:</span>{" "}
@@ -465,7 +475,7 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
             {pendingCount > 0 ? `Running… ${doneCount}/${METHODS.length}` : "Run all methods"}
             </button>
 
-            {/* GPU-safe toggle */}
+            {/* GPU-safe toggle: sits next to Run All on mobile; keeps position naturally on larger screens */}
             <label className="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer select-none order-1">
             <input type="checkbox" checked={gpuSafe} onChange={(e) => setGpuSafe(e.target.checked)} /> GPU-safe mode
             </label>
@@ -484,7 +494,7 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
             )}
             </div>
 
-            {/* Right-side controls */}
+            {/* Right-side controls collapse under on mobile */}
             <div className="sm:ml-auto flex items-center gap-3 w-full sm:w-auto order-3">
             <input
             type="range"
@@ -526,3 +536,4 @@ export default function BackgroundRemoverPanel({ embedded = true }: { embedded?:
             </div>
         );
 }
+