fix(filters): expand ordering select on mobile

src/pages/Projects.tsx

@@ -9,7 +9,7 @@ import { Plus, Archive, Trash2, Pencil } from "lucide-react";
 
 import FilterBar from "../components/FilterBar";
 import { Button } from "../components/ui/button";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Card } from "../components/ui/card";
 import { Modal } from "../components/Modal";
 import { toast } from "sonner";
 import { Input } from "../components/ui/input";
@@ -22,7 +22,7 @@ import {
 } from "../lib/permissions";
 
 export const Projects: React.FC = () => {
-  const { t } = useTranslation();
+  const { t, lang } = useTranslation();
   const { activeWorkspace } = useWorkspace();
   const workspaceRole = activeWorkspace?.my_role;
   const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
@@ -120,6 +120,19 @@ export const Projects: React.FC = () => {
     }
   };
 
+  const formatDate = (dateStr: string | undefined) => {
+    if (!dateStr) return "-"
+    try {
+      const date = new Date(dateStr)
+      return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR" : "en-US", {
+        dateStyle: "long",
+        timeZone: "Asia/Tehran",
+      }).format(date)
+    } catch {
+      return dateStr
+    }
+  }
+
 
   return (
     <div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
@@ -167,65 +180,67 @@ export const Projects: React.FC = () => {
         </div>
       ) : (
         <div className="flex flex-col flex-1">
-          <div className="flex flex-col gap-4 mb-6">
+          <Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
-            {projects.map((project) => (
+            <div className="p-0">
-              <Card key={project.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
+              {projects.length === 0 ? (
-                <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
+                <div className="py-16 flex flex-col items-center justify-center">
-                  <div className="flex-1">
+                  <p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
-                    <div className="flex items-center gap-3 mb-2">
+                </div>
-                      <CardTitle className="text-lg line-clamp-1">
+              ) : (
-                        {project.name}
+                <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-                      </CardTitle>
+                  {projects.map((project) => (
-                    </div>
+                    <li
-                    <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
+                      key={project.id}
-                      {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || 'No client'}
+                      className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4"
-                    </p>
+                    >
+                      <div className="flex-1 min-w-0">
+                        <h4 className="font-medium text-slate-900 dark:text-white truncate">{project.name}</h4>
+                        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                          {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
+                        </p>
+                        {project.description && (
+                          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                            {project.description}
+                          </p>
+                        )}
+                        <div className="text-[11px] text-slate-400 mt-3 font-medium">
+                          {(t.projects as any)?.addedOn || "Added on"}: {formatDate(project.created_at)}
+                        </div>
+                      </div>
 
-                    {project.description && (
+                      {(canEditProject || canDeleteProject) && (
-                      <p className="text-sm text-slate-600 dark:text-slate-300 mt-2 line-clamp-2">
+                        <div className="flex items-center gap-1 shrink-0">
-                        {project.description}
+                          {canEditProject && (
-                      </p>
+                            <Button
-                    )}
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => setEditingProject(project)}
+                              className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                              title={t.actions?.edit || "Edit"}
+                            >
+                              <Pencil className="w-4 h-4" />
+                            </Button>
+                          )}
 
-                  </div>
+                          {canDeleteProject && (
-
+                            <Button
-                  {(canEditProject || canDeleteProject) && (
+                              variant="ghost"
-                    <div className="flex items-center gap-2 shrink-0">
+                              size="icon"
-                      {canEditProject && (
+                              onClick={() => setDeleteModal({ isOpen: true, project })}
-                        <Button 
+                              className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
-                          variant="ghost" 
+                              title={t.actions?.delete || "Delete"}
-                          size="icon"
+                            >
-                          onClick={() => setEditingProject(project)}
+                              <Trash2 className="w-4 h-4" />
-                          className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                            </Button>
-                          title={t.actions?.edit || 'Edit'}
+                          )}
-                        >
+                        </div>
-                          <Pencil className="w-4 h-4" />
-                        </Button>
                       )}
-
+                    </li>
-                      {canDeleteProject && (
+                  ))}
-                        <Button 
+                </ul>
-                          variant="ghost" 
+              )}
-                          size="icon"
+            </div>
-                          onClick={() => setDeleteModal({ isOpen: true, project })}
+          </Card>
-                          className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
-                          title={t.actions?.delete || 'Delete'}
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
-                      )}
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            ))}
-
-            {projects.length === 0 && (
-              <div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
-                <p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
-              </div>
-            )}
-          </div>
 
           <Pagination
             currentPage={currentPage}