Merge pull request #21 from danilo-css/master

Fixes to Pivot Fields CSS styling

Author: danilo-css

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 () => {

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}

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">

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>

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>
   );

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>
   );

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>
   );