Fix: leaderboard mobile responsiveness (#197)

* fix: add fallback image for feed list

* fix: leaderboard not being properly responsive

* feat: add dev frontend command

* fix: new dev command

* fix: remove extra margin on table when on mobile

Author: itexpert120

apps/app/src/components/FeedList.tsx

@@ -28,11 +28,12 @@ const FeedList = () => {
               >
                 <div className="flex items-center border border-1 border-neutral-200 rounded-md justify-center gap-3 py-2 px-3">
                   <img
-                    src={feed?.config.image}
-                    alt={feed?.config.name}
+                    src={feed?.config.image || "/images/feed-image.png"}
+                    alt={feed?.config.name || "Feed image"}
                     className="w-[50px] h-[50px] aspect-square object-cover"
-                    width={40}
-                    height={40}
+                    onError={(e) => {
+                      e.currentTarget.src = "/images/feed-image.png";
+                    }}
                   />
                   <div className="flex flex-col w-full">
                     <span className="text-[16px] ">{feed.name}</span>

apps/app/src/components/leaderboard/LeaderboardFilters.tsx

@@ -46,7 +46,7 @@ export function LeaderboardFilters({
   timeDropdownRef,
 }: LeaderboardFiltersProps) {
   return (
-    <div className="flex flex-col md:flex-row max-w-[400px] md:max-w-screen-xl md:w-full mx-auto justify-between items-center mb-6 gap-4 px-4 py-8">
+    <div className="flex flex-col md:flex-row max-w-[400px] md:max-w-screen-xl md:w-full mx-auto justify-between items-center mb-6 gap-4 py-8">
       <div className="relative w-full md:w-auto">
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#a3a3a3] h-4 w-4" />
         <input

apps/app/src/components/leaderboard/LeaderboardTable.tsx

@@ -25,7 +25,7 @@ export function LeaderboardTable({
   hasData,
 }: LeaderboardTableProps) {
   return (
-    <div className="overflow-y-auto max-w-[368px] md:max-w-screen-xl md:w-full mx-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
+    <div className="overflow-y-auto max-w-[calc(100vw-32px)] md:max-w-screen-xl md:w-full mx-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
       <div className="relative">
         <Table className="w-full border-collapse">
           <TableHeader className="sticky top-0 bg-white z-10">

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "dev": "./scripts/dev.sh",
     "dev:fresh": "./scripts/dev.sh --fresh",
+    "dev:frontend": "turbo run dev --filter=@curatedotfun/app",
     "build": "turbo run build",
     "start": "docker-compose --profile prod up -d --build postgres_prod && docker-compose --profile prod run --rm db-init-prod && docker-compose --profile prod up -d --build app",
     "test": "docker-compose --profile test up -d postgres_test && docker-compose --profile test run --rm db-init-test && turbo run test --filter=@curatedotfun/api || true && docker-compose --profile test down -v",