From 2107f992c882edfc8b6ae78071581ca4783054f4 Mon Sep 17 00:00:00 2001
From: Danilo Cristian da Silva Sousa
 <73763541+danilo-css@users.noreply.github.com>
Date: Fri, 14 Feb 2025 09:32:11 -0300
Subject: [PATCH] Fixes to Pivot Fields CSS styling

---
 components/FilterDialog.tsx             | 2 +-
 components/Main.tsx                     | 4 ++--
 components/PivotFields.tsx              | 4 ++--
 components/pivotfields/Aggregation.tsx  | 2 +-
 components/pivotfields/PivotColumns.tsx | 6 +++---
 components/pivotfields/PivotFilters.tsx | 4 ++--
 components/pivotfields/PivotRows.tsx    | 4 ++--
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/FilterDialog.tsx b/components/FilterDialog.tsx
index de81d15..a0c2286 100644
--- a/components/FilterDialog.tsx
+++ b/components/FilterDialog.tsx
@@ -56,7 +56,7 @@ export default function FilterDialog({
   const [searchQuery, setSearchQuery] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [open, setOpen] = useState(false);
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
   const itemsPerPage = 10;
 
   const fetchData = async () => {
diff --git a/components/Main.tsx b/components/Main.tsx
index 2433d09..d6297b0 100644
--- a/components/Main.tsx
+++ b/components/Main.tsx
@@ -441,8 +441,8 @@ export default function Main() {
             {(files.length <= 1 || hasRelationships) && (
               <>
                 <PivotFields />
-                <div className="flex flex-col justify-between gap-1">
-                  <div className="flex flex-row gap-1">
+                <div className="flex flex-col gap-1">
+                  <div className="flex flex-row items-center justify-center lg:justify-start flex-wrap gap-1">
                     <Button
                       className="flex flex-row gap-1 py-1 px-2 rounded-md w-fit"
                       disabled={isQueryRunning}
diff --git a/components/PivotFields.tsx b/components/PivotFields.tsx
index 9eeff4d..2dd40e8 100644
--- a/components/PivotFields.tsx
+++ b/components/PivotFields.tsx
@@ -8,8 +8,8 @@ import PivotFilters from "./pivotfields/PivotFilters";
 
 export default function PivotFields() {
   return (
-    <div className="flex md:flex-row gap-1 w-full h-fit">
-      <div className="flex w-[300px] h-full">
+    <div className="flex flex-col lg:flex-row items-center justify-center gap-1 w-full h-fit">
+      <div className="flex lg:w-1/5 w-full min-w-[300px] h-full">
         <Aggregation />
       </div>
       <div className="flex flex-col gap-1 w-full">
diff --git a/components/pivotfields/Aggregation.tsx b/components/pivotfields/Aggregation.tsx
index a2ac33c..d828220 100644
--- a/components/pivotfields/Aggregation.tsx
+++ b/components/pivotfields/Aggregation.tsx
@@ -9,7 +9,7 @@ export default function Aggregation() {
   const { aggregation, clearAggregation } = usePivotStore();
   const { files } = useFileStore();
   return (
-    <div className="flex flex-col items-center gap-3 border rounded-lg px-4 py-1 h-full w-full">
+    <div className="flex flex-col items-center gap-3 border rounded-lg px-4 py-1 h-fit w-full">
       <div className="flex flex-row items-center gap-1">
         <SquareSigma size={20} />
         <p>Aggregation</p>
diff --git a/components/pivotfields/PivotColumns.tsx b/components/pivotfields/PivotColumns.tsx
index f6ab78a..dd5a755 100644
--- a/components/pivotfields/PivotColumns.tsx
+++ b/components/pivotfields/PivotColumns.tsx
@@ -29,9 +29,9 @@ export default function PivotColumns() {
         <Columns3 size={20} />
         <p>Columns</p>
       </div>
-      <div className="flex flex-row flex-wrap items-center gap-2">
+      <div className="flex flex-row flex-wrap items-center gap-2 justify-center">
         {columns.map((column, index) => (
-          <div key={index} className="flex flex-col items-start gap-2">
+          <div key={index} className="flex flex-col items-center gap-2">
             <Badge className="flex flex-row items-center gap-2">
               <div className="relative">
                 <Database size={16} />
@@ -68,7 +68,7 @@ export default function PivotColumns() {
       <Trash2
         onClick={clearColumns}
         size={24}
-        className="cursor-pointer hover:text-blue-500"
+        className="cursor-pointer hover:text-blue-500 min-w-[24px]"
       />
     </div>
   );
diff --git a/components/pivotfields/PivotFilters.tsx b/components/pivotfields/PivotFilters.tsx
index 7b42ca1..22031da 100644
--- a/components/pivotfields/PivotFilters.tsx
+++ b/components/pivotfields/PivotFilters.tsx
@@ -15,7 +15,7 @@ export default function PivotFilters() {
         <Filter size={20} />
         <p>Filters</p>
       </div>
-      <div className="flex flex-row flex-wrap items-center gap-2">
+      <div className="flex flex-row flex-wrap items-center gap-2 justify-center">
         {filters.map((filter) => (
           <div
             key={`${filter.table}-${filter.field}`}
@@ -42,7 +42,7 @@ export default function PivotFilters() {
       <Trash2
         onClick={clearFilters}
         size={24}
-        className="cursor-pointer hover:text-blue-500"
+        className="cursor-pointer hover:text-blue-500 min-w-[24px]"
       />
     </div>
   );
diff --git a/components/pivotfields/PivotRows.tsx b/components/pivotfields/PivotRows.tsx
index 3e8d15c..50e4f01 100644
--- a/components/pivotfields/PivotRows.tsx
+++ b/components/pivotfields/PivotRows.tsx
@@ -23,7 +23,7 @@ export default function PivotRows() {
         <Rows3 size={20} />
         <p>Rows</p>
       </div>
-      <div className="flex flex-row flex-wrap items-center gap-2">
+      <div className="flex flex-row flex-wrap items-center gap-2 justify-center">
         {rows.map((row, index) => (
           <div key={index} className="flex flex-col items-center gap-2">
             <Badge className="flex flex-row items-center gap-2">
@@ -62,7 +62,7 @@ export default function PivotRows() {
       <Trash2
         onClick={clearRows}
         size={24}
-        className="cursor-pointer hover:text-blue-500"
+        className="cursor-pointer hover:text-blue-500 min-w-[24px]"
       />
     </div>
   );