From f26156ddb5501a3ba32d9bbcf02c799ae4845c8b Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 28 May 2026 11:17:21 +0000
Subject: [PATCH] added x margin

---
 .../[slug]/components/PropertyTable.tsx       | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/portfolio/[slug]/components/PropertyTable.tsx b/src/app/portfolio/[slug]/components/PropertyTable.tsx
index 5e34583..e12550e 100644
--- a/src/app/portfolio/[slug]/components/PropertyTable.tsx
+++ b/src/app/portfolio/[slug]/components/PropertyTable.tsx
@@ -146,8 +146,8 @@ function EmptyPropertyState() {
       <div className="text-center text-gray-400">
         <HomeIcon className="h-16 w-16 mx-auto mb-4 text-gray-200" />
         <p>
-          Hover over <strong>&ldquo;New Property&rdquo;</strong> to start adding properties
-          to your portfolio.
+          Hover over <strong>&ldquo;New Property&rdquo;</strong> to start adding
+          properties to your portfolio.
         </p>
       </div>
     </div>
@@ -388,7 +388,10 @@ export default function PropertyTable({
     filterGroups: allFilterGroups,
   });
 
-  const queryData = useMemo(() => filteredResponse?.data ?? [], [filteredResponse?.data]);
+  const queryData = useMemo(
+    () => filteredResponse?.data ?? [],
+    [filteredResponse?.data],
+  );
   const filteredTotal = filteredResponse?.total ?? 0;
 
   // Second query for total (no filters) — React Query dedupes when filters are empty
@@ -500,7 +503,7 @@ export default function PropertyTable({
   const [previewError] = useState<string | null>(null);
 
   return (
-    <div className="py-4">
+    <div className="py-4 mx-4">
       {/* Action bar */}
       <div className="flex items-center justify-between mb-3">
         {/* Left: results count */}
@@ -594,14 +597,18 @@ export default function PropertyTable({
 
           {/* Export */}
           {filteredTotal > EXPORT_LIMIT ? (
-            <Tooltip content={`Export is limited to ${EXPORT_LIMIT.toLocaleString()} properties. Refine your filters to enable it.`}>
+            <Tooltip
+              content={`Export is limited to ${EXPORT_LIMIT.toLocaleString()} properties. Refine your filters to enable it.`}
+            >
               <button
                 disabled
                 className="flex items-center gap-1.5 h-8 px-3 rounded-lg border border-slate-200 bg-slate-100 text-xs font-semibold text-slate-400 cursor-not-allowed opacity-60"
               >
                 <ArrowDownTrayIcon className="h-3.5 w-3.5" />
                 Export
-                <span className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full bg-amber-400 text-white text-[9px] font-black leading-none">!</span>
+                <span className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full bg-amber-400 text-white text-[9px] font-black leading-none">
+                  !
+                </span>
               </button>
             </Tooltip>
           ) : (
@@ -680,7 +687,8 @@ export default function PropertyTable({
             <span className="font-semibold text-primary">
               {filteredTotal.toLocaleString()}
             </span>{" "}
-            properties — more load automatically as you navigate to the last page.
+            properties — more load automatically as you navigate to the last
+            page.
           </span>
         </div>
       )}