fix: proejct header sticky

Author: huamanraj

apps/web/src/components/dashboard/ProjectsContainer.tsx

@@ -17,31 +17,9 @@ import { useFilterStore } from "@/store/useFilterStore";
 import { usePathname } from "next/navigation";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
-type ProjectsContainerProps = {
-  projects: DashboardProjectsProps[];
-};
-
-interface languageColorsTypes {
-  [key: string]: string;
-  javascript: string;
-  typescript: string;
-  python: string;
-  go: string;
-  rust: string;
-  java: string;
-  "c#": string;
-  "c++": string;
-  c: string;
-  php: string;
-  swift: string;
-  kotlin: string;
-  ruby: string;
-  scala: string;
-  html: string;
-  elixir: string;
-}
+type ProjectsContainerProps = { projects: DashboardProjectsProps[] };
 
-const languageColors: languageColorsTypes = {
+const languageColors: Record<string, string> = {
   javascript: "bg-yellow-500/15 text-yellow-500",
   typescript: "bg-blue-500/15 text-blue-500",
   python: "bg-emerald-500/15 text-emerald-500",
@@ -60,11 +38,8 @@ const languageColors: languageColorsTypes = {
   elixir: "bg-purple-600/15 text-purple-600",
 };
 
-const getColor = (color: string): string => {
-  const lowerColorCase = color.toLowerCase();
-  const _color = languageColors[lowerColorCase] || "bg-gray-200 text-gray-800";
-  return _color;
-};
+const getColor = (c?: string) =>
+  languageColors[(c || "").toLowerCase()] || "bg-gray-200/10 text-gray-300";
 
 const tableColumns = [
   "Project",
@@ -82,15 +57,10 @@ export default function ProjectsContainer({
   const pathname = usePathname();
   const { projectTitle } = useProjectTitleStore();
   const { setShowFilters } = useFilterStore();
-
-  const handleClick = (link: string) => {
-    window.open(link, "_blank");
-  };
-
   const isProjectsPage = pathname === "/dashboard/projects";
 
   return (
-    <div className="w-full p-6 sm:p-8">
+    <div className="w-full p-6 sm:p-6">
       <div className="flex items-center justify-between pb-6">
         <h2 className="text-xl sm:text-2xl md:text-3xl font-semibold text-white tracking-tight">
           {projectTitle}
@@ -104,66 +74,88 @@ export default function ProjectsContainer({
           </Button>
         )}
       </div>
+
       {projects && projects.length > 0 ? (
-        <div className="w-full overflow-x-auto bg-[#15161a] border border-[#1a1a1d] rounded-lg">
-          <Table className="w-full">
-            <TableHeader className="w-full border">
-              <TableRow className="w-full border-[#1a1a1d] border-b">
-                {tableColumns.map((name, index) => (
+        <div
+          className="
+            w-full bg-[#15161a] border border-[#1a1a1d] rounded-lg
+            h-[80vh] overflow-y-auto overflow-x-auto relative
+            [&::-webkit-scrollbar]:w-1
+            [&::-webkit-scrollbar]:hover:w-2
+            [&::-webkit-scrollbar]:h-1
+            [&::-webkit-scrollbar-track]:bg-transparent
+            [&::-webkit-scrollbar-thumb]:bg-ox-purple/30
+            [&::-webkit-scrollbar-thumb]:rounded-full
+            [&::-webkit-scrollbar-thumb]:hover:bg-ox-purple/50
+          "
+        >
+          <Table className="w-full min-w-[820px] table-fixed">
+            {/* Sticky header row */}
+            <TableHeader>
+              <TableRow className="border-b border-[#1a1a1d]">
+                {tableColumns.map((name, i) => (
                   <TableHead
-                    key={index}
-                    className={`flex-1 text-center font-semibold text-ox-purple text-[12px] sm:text-sm`}
+                    key={name}
+                    className={[
+                      "px-3 py-3 font-semibold text-ox-purple text-[12px] sm:text-sm whitespace-nowrap",
+                      "sticky top-0 z-30 bg-[#15161a]", // <- stick
+                      i === 0 ? "text-left" : "text-center",
+                    ].join(" ")}
                   >
                     {name}
                   </TableHead>
                 ))}
               </TableRow>
             </TableHeader>
+
             <TableBody>
-              {projects.map((project) => (
+              {projects.map((p) => (
                 <TableRow
-                  key={project.id}
-                  className="border-ox-gray border-y cursor-pointer"
-                  onClick={() => {
-                    handleClick(project.url);
-                  }}
+                  key={p.id}
+                  className="border-y border-ox-gray cursor-pointer hover:bg-white/5 transition-colors"
+                  onClick={() => window.open(p.url, "_blank")}
                 >
-                  <TableCell className="flex items-center gap-1 p-1 sm:p-2">
-                    <div className="rounded-full overflow-hidden inline-block h-4 w-4 sm:h-6 sm:w-6 border">
-                      <Image
-                        src={project.avatarUrl}
-                        className="w-full h-full object-cover"
-                        alt={project.name}
-                        width={10}
-                        height={10}
-                      />
+                  <TableCell className="p-1 sm:p-2">
+                    <div className="flex items-center gap-2">
+                      <div className="rounded-full overflow-hidden inline-block h-4 w-4 sm:h-6 sm:w-6 border">
+                        <Image
+                          src={p.avatarUrl}
+                          className="w-full h-full object-cover"
+                          alt={p.name}
+                          width={24}
+                          height={24}
+                        />
+                      </div>
+                      <span className="text-white text-[10px] sm:text-xs font-semibold">
+                        {p.name}
+                      </span>
                     </div>
-                    <TableCell className="text-white text-[10px] sm:text-xs text-ox-white font-semibold">
-                      {project.name}
-                    </TableCell>
                   </TableCell>
-                  <TableCell className="text-white text-[10px] sm:text-xs text-center text-ox-white p-1 sm:p-2">
-                    {project.totalIssueCount}
+
+                  <TableCell className="text-white text-[10px] sm:text-xs text-center p-1 sm:p-2 whitespace-nowrap">
+                    {p.totalIssueCount}
                   </TableCell>
+
                   <TableCell className="text-center p-1 sm:p-2">
                     <Badge
                       variant="secondary"
-                      className={`${getColor(project.primaryLanguage)} text-[10px] sm:text-xs`}
+                      className={`${getColor(p.primaryLanguage)} text-[10px] sm:text-xs whitespace-nowrap`}
                     >
-                      {project.primaryLanguage}
+                      {p.primaryLanguage}
                     </Badge>
                   </TableCell>
-                  <TableCell className="text-white text-[10px] sm:text-xs text-center text-ox-white font-semibold p-1 sm:p-2">
-                    {project.popularity}
+
+                  <TableCell className="text-white text-[10px] sm:text-xs text-center font-semibold p-1 sm:p-2 whitespace-nowrap">
+                    {p.popularity}
                   </TableCell>
-                  <TableCell className="text-white text-[10px] sm:text-xs text-center text-ox-white font-semibold md:table-cell p-1 sm:p-2">
-                    {project.stage}
+                  <TableCell className="text-white text-[10px] sm:text-xs text-center font-semibold p-1 sm:p-2 whitespace-nowrap">
+                    {p.stage}
                   </TableCell>
-                  <TableCell className="text-white text-[10px] sm:text-xs text-center text-ox-white font-semibold md:table-cell p-1 sm:p-2">
-                    {project.competition}
+                  <TableCell className="text-white text-[10px] sm:text-xs text-center font-semibold p-1 sm:p-2 whitespace-nowrap">
+                    {p.competition}
                   </TableCell>
-                  <TableCell className="text-white text-[10px] sm:text-xs text-center text-ox-white font-semibold md:table-cell p-1 sm:p-2">
-                    {project.activity}
+                  <TableCell className="text-white text-[10px] sm:text-xs text-center font-semibold p-1 sm:p-2 whitespace-nowrap">
+                    {p.activity}
                   </TableCell>
                 </TableRow>
               ))}

apps/web/src/components/ui/Filter.tsx

@@ -23,7 +23,7 @@ export default function Filter({
   };
 
   const triggerClasses = clsx("text-sm font-medium", {
-    "text-slate-500": ["Hire contributors", "Funding", "Trending"].includes(
+    "text-slate-300": ["Hire contributors", "Funding", "Trending"].includes(
       filterName
     ),
   });
@@ -42,12 +42,12 @@ export default function Filter({
                   value={filter}
                   id={filter}
                   onClick={() => recordFilterInput(filter)}
-                  className="border-[#1a1a1d] text-ox-purple"
+                  className="border-[#28282c] bg-[#141418] text-ox-purple transition data-[state=checked]:border-ox-purple data-[state=checked]:bg-ox-purple/20 data-[state=checked]:ring-2 data-[state=checked]:ring-ox-purple/50"
                 />
                 <Label
                   htmlFor={filter}
                   onClick={() => recordFilterInput(filter)}
-                  className="text-sm text-zinc-400 cursor-pointer"
+                  className="text-sm text-zinc-300 cursor-pointer transition-colors"
                 >
                   {filter}
                 </Label>