From 815c9bc9341a03a40f10c5d99b9e1ceffd693f87 Mon Sep 17 00:00:00 2001
From: "christian.vidal" <christianvidalwolf@gmail.com>
Date: Thu, 29 Jan 2026 18:50:46 +0100
Subject: [PATCH] Fix Column selector visibility and z-index

---
 components/DataGrid.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 0984757..a9e2c87 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -700,10 +700,10 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
             )}
 
             {/* 2. Controls & Grid */}
-            <div className="bg-surface border border-border rounded-xl shadow-lg overflow-hidden flex flex-col">
+            <div className="bg-surface border border-border rounded-xl shadow-lg flex flex-col">
 
                 {/* Toolbar */}
-                <div className="p-4 border-b border-border bg-slate-900/50 flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center">
+                <div className="p-4 border-b border-border bg-slate-900/50 flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center rounded-t-xl">
 
                     <div className="flex flex-wrap items-center gap-3 w-full lg:w-auto">
                         {/* Dimensions Selector */}
@@ -720,7 +720,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                                 <svg className={`w-3.5 h-3.5 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180 text-white' : 'text-slate-500'}`} fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
                             </button>
                             {showDimensionMenu && (
-                                <div className="absolute top-full left-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-3 animate-fade-in z-50 ring-1 ring-white/10">
+                                <div className="absolute top-full left-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-3 animate-fade-in z-[100] ring-1 ring-white/10">
                                     <div className="flex justify-between items-center mb-3 px-1">
                                         <span className="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em]">Select Columns</span>
                                         <button
@@ -1209,7 +1209,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
             </div>
 
             {/* Pagination */}
-            <div className="p-4 border-t border-border bg-slate-900/50 flex flex-col sm:flex-row justify-between items-center gap-4">
+            <div className="p-4 border-t border-border bg-slate-900/50 flex flex-col sm:flex-row justify-between items-center gap-4 rounded-b-xl">
                 <div className="text-sm text-slate-500">
                     Page {currentPage} of {totalPages || 1}
                 </div>