make filter more intuitive, usable on mobile

src/app/tailwind.css

@@ -745,6 +745,11 @@ body {
   margin-bottom: auto;
 }
 
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -769,10 +774,6 @@ body {
   margin-top: 0.5rem;
 }
 
-.mt-20 {
-  margin-top: 5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1117,6 +1118,10 @@ body {
   align-items: baseline;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1145,6 +1150,14 @@ body {
   gap: 1rem;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
@@ -1364,11 +1377,6 @@ body {
   background-color: transparent;
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .fill-current {
   fill: currentColor;
 }
@@ -1675,10 +1683,6 @@ body {
   outline-style: solid;
 }
 
-.ring-primary {
-  --tw-ring-color: hsl(var(--primary));
-}
-
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }

src/app/ui/tables/data-table.tsx

@@ -38,7 +38,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { EyeIcon, Trash2 } from "lucide-react"
+import { CircleHelp, EyeIcon, Trash2 } from "lucide-react"
 import { usePathname, useSearchParams } from "next/navigation"
 import FormContextMenu from "./contextMenu"
 import { deleteRecord, deleteRecords } from "app/lib/del"
@@ -132,13 +132,11 @@ export function DataTable<TData, TValue>({
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
-    <div className="flex justify-between items-center py-1 md:py-4">
+    <div className="flex gap-1 justify-between items-center py-1 md:py-4">
-      <div className="flex gap-2">
+      <div className="flex gap-0.5">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="hidden sm:block ml-auto">
+            <Button variant="outline" className="mx-0"> <p className="hidden md:block">Filter by</p><CircleHelp className="block md:hidden" /> </Button>
-              Filter by
-            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             {/*@ts-ignore*/}
@@ -157,6 +155,7 @@ export function DataTable<TData, TValue>({
           onChange={(event) =>
             table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
           }
+          disabled={filterBy.id === "select"}
           className="max-w-sm"
         />
       </div>