From 4f97bfeeaaf871f92dc09ce278857c27608e350c Mon Sep 17 00:00:00 2001
From: mcinquin <github@capitoul.net>
Date: Sun, 17 May 2026 22:58:35 +0200
Subject: [PATCH 1/2] fix(ui): fix some issues with ui on mobile device

---
 messages/en.json                              |   1 +
 messages/fr.json                              |   1 +
 src/app/(app)/admin/page.tsx                  |  23 ++-
 src/app/(app)/page.tsx                        |  10 +-
 src/components/admin/admin-cards-section.tsx  | 149 +++++++++++++++++-
 .../admin/admin-catalog-section.tsx           |   7 +-
 src/components/admin/admin-clubs-section.tsx  |   9 +-
 .../admin/admin-players-section.tsx           |   9 +-
 src/components/admin/admin-years-section.tsx  |   9 +-
 src/components/admin/batch-text-import.tsx    |   8 +-
 src/components/dashboard-charts.tsx           |  20 ++-
 src/components/recent-cards.tsx               |   6 +-
 src/components/stats-cards.tsx                |  16 +-
 13 files changed, 226 insertions(+), 42 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index f23548b..3854b52 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -29,6 +29,7 @@
     "save": "Save",
     "saving": "Saving…",
     "add": "Add",
+    "edit": "Edit",
     "delete": "Delete",
     "retry": "Retry",
     "error": "Error",
diff --git a/messages/fr.json b/messages/fr.json
index b1bc900..c1f2616 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -29,6 +29,7 @@
     "save": "Enregistrer",
     "saving": "Enregistrement…",
     "add": "Ajouter",
+    "edit": "Modifier",
     "delete": "Supprimer",
     "retry": "Réessayer",
     "error": "Erreur",
diff --git a/src/app/(app)/admin/page.tsx b/src/app/(app)/admin/page.tsx
index 5efb01d..c1cbf14 100644
--- a/src/app/(app)/admin/page.tsx
+++ b/src/app/(app)/admin/page.tsx
@@ -108,24 +108,31 @@ export default function AdminPage() {
   }
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between gap-4">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">{t("admin.title")}</h2>
-          <p className="text-muted-foreground mt-1">
+    <div className="min-w-0 space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+        <div className="min-w-0">
+          <h2 className="break-words text-2xl font-bold tracking-tight">
+            {t("admin.title")}
+          </h2>
+          <p className="mt-1 text-sm text-muted-foreground sm:text-base">
             {t("admin.subtitle", { count: cards.length })}
           </p>
         </div>
-        <Button variant="outline" size="sm" onClick={() => void loadData()}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full sm:w-auto"
+          onClick={() => void loadData()}
+        >
           <RefreshCw className="h-4 w-4 mr-1" />
           {t("admin.reload")}
         </Button>
       </div>
 
       <Tabs defaultValue="cards">
-        <TabsList className="flex h-auto w-full flex-wrap justify-start">
+        <TabsList className="grid h-auto w-full grid-cols-2 gap-1 sm:flex sm:flex-wrap sm:justify-start">
           {tabs.map((tab) => (
-            <TabsTrigger key={tab.value} value={tab.value}>
+            <TabsTrigger key={tab.value} value={tab.value} className="text-xs sm:text-sm">
               {tab.label}
             </TabsTrigger>
           ))}
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index 96ea842..a180b05 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -20,12 +20,14 @@ export default async function DashboardPage() {
   };
 
   return (
-    <div className="space-y-8">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight">
+    <div className="min-w-0 space-y-6 sm:space-y-8">
+      <div className="min-w-0">
+        <h2 className="text-2xl font-bold tracking-tight break-words">
           {t("dashboard.title")}
         </h2>
-        <p className="text-muted-foreground mt-1">{t("dashboard.subtitle")}</p>
+        <p className="mt-1 text-sm text-muted-foreground sm:text-base">
+          {t("dashboard.subtitle")}
+        </p>
       </div>
 
       <StatsCards
diff --git a/src/components/admin/admin-cards-section.tsx b/src/components/admin/admin-cards-section.tsx
index bd2e29b..0a1d4a0 100644
--- a/src/components/admin/admin-cards-section.tsx
+++ b/src/components/admin/admin-cards-section.tsx
@@ -375,13 +375,14 @@ export function AdminCardsSection({
   }
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between gap-4">
+    <div className="min-w-0 space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
         <p className="text-sm text-muted-foreground">
           {t("admin.cards.intro")}
         </p>
         <Button
           size="sm"
+          className="w-full sm:w-auto"
           onClick={() => {
             setEditingCard(null);
             setSaveError(null);
@@ -413,7 +414,147 @@ export function AdminCardsSection({
         />
       </div>
 
-      <div className="rounded-md border border-border overflow-auto">
+      <div className="grid gap-2 md:hidden">
+        <ColumnFilterCombobox
+          value={playerColumnFilter}
+          onChange={(nextValue) => {
+            setPlayerColumnFilter(nextValue);
+            setPage(0);
+          }}
+          placeholder={t("admin.cards.filterPlayerTeam")}
+          suggestions={columnSuggestions.players}
+          className="h-9 text-xs"
+        />
+        <ColumnFilterCombobox
+          value={teamColumnFilter}
+          onChange={(nextValue) => {
+            setTeamColumnFilter(nextValue);
+            setPage(0);
+          }}
+          placeholder={t("admin.cards.filterTeam")}
+          suggestions={columnSuggestions.teams}
+          className="h-9 text-xs"
+        />
+        <div className="grid grid-cols-2 gap-2">
+          <ColumnFilterCombobox
+            value={yearColumnFilter}
+            onChange={(nextValue) => {
+              setYearColumnFilter(nextValue);
+              setPage(0);
+            }}
+            placeholder={t("admin.cards.filterYear")}
+            suggestions={columnSuggestions.years}
+            className="h-9 text-xs"
+          />
+          <ColumnFilterCombobox
+            value={tagsColumnFilter}
+            onChange={(nextValue) => {
+              setTagsColumnFilter(nextValue);
+              setPage(0);
+            }}
+            placeholder={t("admin.cards.filterTags")}
+            suggestions={columnSuggestions.tags}
+            className="h-9 text-xs"
+          />
+        </div>
+        <ColumnFilterCombobox
+          value={brandColumnFilter}
+          onChange={(nextValue) => {
+            setBrandColumnFilter(nextValue);
+            setPage(0);
+          }}
+          placeholder={t("admin.cards.filterBrand")}
+          suggestions={columnSuggestions.brands}
+          className="h-9 text-xs"
+        />
+        <ColumnFilterCombobox
+          value={setColumnFilter}
+          onChange={(nextValue) => {
+            setSetColumnFilter(nextValue);
+            setPage(0);
+          }}
+          placeholder={t("admin.cards.filterSet")}
+          suggestions={columnSuggestions.sets}
+          className="h-9 text-xs"
+        />
+        <ColumnFilterCombobox
+          value={variationColumnFilter}
+          onChange={(nextValue) => {
+            setVariationColumnFilter(nextValue);
+            setPage(0);
+          }}
+          placeholder={t("admin.cards.filterVariation")}
+          suggestions={columnSuggestions.variations}
+          className="h-9 text-xs"
+        />
+      </div>
+
+      <div className="space-y-3 md:hidden">
+        {paged.length ? (
+          paged.map((card) => {
+            const meta = [card.team, card.year].filter(Boolean).join(" · ");
+            const catalog = [card.brand, card.set].filter(Boolean).join(" · ");
+
+            return (
+              <article
+                key={card.id}
+                className="rounded-lg border border-border bg-card p-4 shadow-sm"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="truncate font-medium leading-tight">
+                      {card.player}
+                    </p>
+                    <p className="mt-1 text-xs text-muted-foreground">{meta}</p>
+                  </div>
+                  <CardBadges card={card} labels={badgeLabels} />
+                </div>
+
+                <div className="mt-3 space-y-1 text-sm">
+                  <p className="truncate text-muted-foreground">{catalog}</p>
+                  <p className="truncate">{card.variation}</p>
+                </div>
+
+                <div className="mt-3 flex justify-end gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label={t("admin.cards.editCard", {
+                      player: card.player,
+                    })}
+                    onClick={() => {
+                      setEditingCard(card);
+                      setSaveError(null);
+                      setFormOpen(true);
+                    }}
+                  >
+                    <Pencil className="h-3.5 w-3.5 mr-1" />
+                    {t("common.edit")}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    aria-label={t("admin.cards.deleteCard", {
+                      player: card.player,
+                    })}
+                    onClick={() => setDeleteTarget(card)}
+                  >
+                    <Trash2 className="h-3.5 w-3.5 mr-1" />
+                    {t("common.delete")}
+                  </Button>
+                </div>
+              </article>
+            );
+          })
+        ) : (
+          <div className="rounded-lg border border-border p-6 text-center text-sm text-muted-foreground">
+            {t("cards.noneFound")}
+          </div>
+        )}
+      </div>
+
+      <div className="hidden rounded-md border border-border md:block md:overflow-auto">
         <Table>
           <TableHeader>
             <TableRow>
@@ -567,7 +708,7 @@ export function AdminCardsSection({
       </div>
 
       {totalPages > 1 && (
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <p className="text-sm text-muted-foreground">
             {t("admin.cards.pageInfo", {
               page: page + 1,
diff --git a/src/components/admin/admin-catalog-section.tsx b/src/components/admin/admin-catalog-section.tsx
index 2035496..cb2d9b9 100644
--- a/src/components/admin/admin-catalog-section.tsx
+++ b/src/components/admin/admin-catalog-section.tsx
@@ -220,7 +220,7 @@ export function AdminCatalogSection({
       <p className="text-sm text-muted-foreground">{t("admin.catalog.intro")}</p>
 
       <Tabs defaultValue="brands">
-        <TabsList>
+        <TabsList className="grid h-auto w-full grid-cols-1 gap-1 sm:grid-cols-3">
           <TabsTrigger value="brands">{t("admin.catalog.brands")}</TabsTrigger>
           <TabsTrigger value="sets">{t("admin.catalog.sets")}</TabsTrigger>
           <TabsTrigger value="variations">{t("admin.catalog.variations")}</TabsTrigger>
@@ -230,7 +230,7 @@ export function AdminCatalogSection({
           <div className="grid gap-6 lg:grid-cols-2">
             <div className="space-y-3 rounded-lg border border-border p-4">
               <Label htmlFor="admin-brand-name">{t("admin.players.unitAdd")}</Label>
-              <div className="flex gap-2">
+              <div className="flex flex-col gap-2 sm:flex-row">
                 <Input
                   id="admin-brand-name"
                   value={brand}
@@ -240,6 +240,7 @@ export function AdminCatalogSection({
                 />
                 <Button
                   type="button"
+                  className="w-full sm:w-auto"
                   disabled={loading}
                   onClick={() =>
                     void run(async () => {
@@ -293,6 +294,7 @@ export function AdminCatalogSection({
                 />
                 <Button
                   type="button"
+                  className="w-full sm:w-auto"
                   disabled={loading}
                   onClick={() =>
                     void run(async () => {
@@ -354,6 +356,7 @@ export function AdminCatalogSection({
                 />
                 <Button
                   type="button"
+                  className="w-full sm:w-auto"
                   disabled={loading}
                   onClick={() =>
                     void run(async () => {
diff --git a/src/components/admin/admin-clubs-section.tsx b/src/components/admin/admin-clubs-section.tsx
index 60abc88..8afd1c7 100644
--- a/src/components/admin/admin-clubs-section.tsx
+++ b/src/components/admin/admin-clubs-section.tsx
@@ -64,7 +64,7 @@ export function AdminClubsSection({
       <div className="grid gap-6 lg:grid-cols-2">
         <div className="space-y-3 rounded-lg border border-border p-4">
           <Label htmlFor="admin-club-name">{t("admin.players.unitAdd")}</Label>
-          <div className="flex gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row">
             <Input
               id="admin-club-name"
               value={team}
@@ -72,7 +72,12 @@ export function AdminClubsSection({
               placeholder={t("admin.clubs.placeholder")}
               disabled={loading}
             />
-            <Button type="button" disabled={loading} onClick={() => void handleAddTeam()}>
+            <Button
+              type="button"
+              className="w-full sm:w-auto"
+              disabled={loading}
+              onClick={() => void handleAddTeam()}
+            >
               {t("common.add")}
             </Button>
           </div>
diff --git a/src/components/admin/admin-players-section.tsx b/src/components/admin/admin-players-section.tsx
index ac900bf..4a744fe 100644
--- a/src/components/admin/admin-players-section.tsx
+++ b/src/components/admin/admin-players-section.tsx
@@ -64,7 +64,7 @@ export function AdminPlayersSection({
       <div className="grid gap-6 lg:grid-cols-2">
         <div className="space-y-3 rounded-lg border border-border p-4">
           <Label htmlFor="admin-player-name">{t("admin.players.unitAdd")}</Label>
-          <div className="flex gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row">
             <Input
               id="admin-player-name"
               value={player}
@@ -72,7 +72,12 @@ export function AdminPlayersSection({
               placeholder={t("admin.players.placeholder")}
               disabled={loading}
             />
-            <Button type="button" disabled={loading} onClick={() => void handleAddPlayer()}>
+            <Button
+              type="button"
+              className="w-full sm:w-auto"
+              disabled={loading}
+              onClick={() => void handleAddPlayer()}
+            >
               {t("common.add")}
             </Button>
           </div>
diff --git a/src/components/admin/admin-years-section.tsx b/src/components/admin/admin-years-section.tsx
index 531a8a5..07b9f36 100644
--- a/src/components/admin/admin-years-section.tsx
+++ b/src/components/admin/admin-years-section.tsx
@@ -70,7 +70,7 @@ export function AdminYearsSection({
       <div className="grid gap-6 lg:grid-cols-2">
         <div className="space-y-3 rounded-lg border border-border p-4">
           <Label htmlFor="admin-year-value">{t("admin.players.unitAdd")}</Label>
-          <div className="flex gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row">
             <Input
               id="admin-year-value"
               value={year}
@@ -78,7 +78,12 @@ export function AdminYearsSection({
               placeholder={t("admin.years.placeholder")}
               disabled={loading}
             />
-            <Button type="button" disabled={loading} onClick={() => void handleAddYear()}>
+            <Button
+              type="button"
+              className="w-full sm:w-auto"
+              disabled={loading}
+              onClick={() => void handleAddYear()}
+            >
               {t("common.add")}
             </Button>
           </div>
diff --git a/src/components/admin/batch-text-import.tsx b/src/components/admin/batch-text-import.tsx
index e89c38f..de9d019 100644
--- a/src/components/admin/batch-text-import.tsx
+++ b/src/components/admin/batch-text-import.tsx
@@ -68,7 +68,13 @@ export function BatchTextImport({
         error={error}
         onSuccessDismiss={() => setSuccess(null)}
       />
-      <Button type="button" size="sm" disabled={disabled || loading} onClick={() => void handleSubmit()}>
+      <Button
+        type="button"
+        size="sm"
+        className="w-full sm:w-auto"
+        disabled={disabled || loading}
+        onClick={() => void handleSubmit()}
+      >
         {loading ? t("admin.batch.importPending") : t("admin.batch.importList")}
       </Button>
     </div>
diff --git a/src/components/dashboard-charts.tsx b/src/components/dashboard-charts.tsx
index 3541a71..c406276 100644
--- a/src/components/dashboard-charts.tsx
+++ b/src/components/dashboard-charts.tsx
@@ -99,13 +99,13 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
     .map(([name, count]) => ({ name, count }));
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <div className="bg-card border border-border rounded-lg p-6">
+    <div className="grid min-w-0 grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-6">
+      <div className="min-w-0 rounded-lg border border-border bg-card p-4 sm:p-6">
         <h3 className="text-sm font-medium text-muted-foreground mb-4">
           {t("dashboard.byBrand")}
         </h3>
         <ResponsiveContainer width="100%" height={200}>
-          <BarChart data={brandData}>
+          <BarChart data={brandData} margin={{ left: -20, right: 4 }}>
             <XAxis
               dataKey="name"
               tick={{ fill: "hsl(0, 0%, 70%)", fontSize: 11 }}
@@ -141,12 +141,12 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
         </ResponsiveContainer>
       </div>
 
-      <div className="bg-card border border-border rounded-lg p-6">
+      <div className="min-w-0 rounded-lg border border-border bg-card p-4 sm:p-6">
         <h3 className="text-sm font-medium text-muted-foreground mb-4">
           {t("dashboard.byYear")}
         </h3>
         <ResponsiveContainer width="100%" height={200}>
-          <BarChart data={yearData}>
+          <BarChart data={yearData} margin={{ left: -20, right: 4 }}>
             <XAxis
               dataKey="name"
               tick={{ fill: "hsl(0, 0%, 70%)", fontSize: 10 }}
@@ -186,12 +186,16 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
         </ResponsiveContainer>
       </div>
 
-      <div className="bg-card border border-border rounded-lg p-6 lg:col-span-2">
+      <div className="min-w-0 rounded-lg border border-border bg-card p-4 sm:p-6 lg:col-span-2">
         <h3 className="text-sm font-medium text-muted-foreground mb-4">
           {t("dashboard.topPlayers")}
         </h3>
         <ResponsiveContainer width="100%" height={300}>
-          <BarChart data={playerData} layout="vertical">
+          <BarChart
+            data={playerData}
+            layout="vertical"
+            margin={{ left: 0, right: 4 }}
+          >
             <XAxis
               type="number"
               tick={{ fill: "hsl(0, 0%, 70%)", fontSize: 11 }}
@@ -204,7 +208,7 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
               tick={{ fill: "hsl(0, 0%, 70%)", fontSize: 11 }}
               axisLine={false}
               tickLine={false}
-              width={150}
+              width={96}
             />
             <Tooltip
               content={(props) => (
diff --git a/src/components/recent-cards.tsx b/src/components/recent-cards.tsx
index c2f4347..e48d84b 100644
--- a/src/components/recent-cards.tsx
+++ b/src/components/recent-cards.tsx
@@ -15,7 +15,7 @@ export function RecentCards({ cards, title, badgeLabels }: RecentCardsProps) {
     .slice(0, 8);
 
   return (
-    <div className="bg-card border border-border rounded-lg p-6">
+    <div className="min-w-0 rounded-lg border border-border bg-card p-4 sm:p-6">
       <h3 className="text-sm font-medium text-muted-foreground mb-4">
         {title}
       </h3>
@@ -23,7 +23,7 @@ export function RecentCards({ cards, title, badgeLabels }: RecentCardsProps) {
         {recent.map((card) => (
           <div
             key={card.id}
-            className="flex items-center justify-between py-2 border-b border-border/50 last:border-0"
+            className="flex min-w-0 flex-col gap-2 border-b border-border/50 py-2 last:border-0 sm:flex-row sm:items-center sm:justify-between"
           >
             <div className="flex-1 min-w-0">
               <p className="text-sm font-medium truncate">{card.player}</p>
@@ -31,7 +31,7 @@ export function RecentCards({ cards, title, badgeLabels }: RecentCardsProps) {
                 {card.year} {card.brand} {card.set} - {card.variation}
               </p>
             </div>
-            <div className="flex items-center gap-2 ml-4">
+            <div className="flex min-w-0 flex-wrap items-center gap-2 sm:ml-4 sm:justify-end">
               <CardBadges card={card} labels={badgeLabels} />
               <span className="text-xs text-muted-foreground whitespace-nowrap">
                 {formatOpeningDateLabel(card.openingDate)}
diff --git a/src/components/stats-cards.tsx b/src/components/stats-cards.tsx
index c99a712..f2fbd46 100644
--- a/src/components/stats-cards.tsx
+++ b/src/components/stats-cards.tsx
@@ -67,17 +67,21 @@ export function StatsCards({ cards, labels }: StatsCardsProps) {
   ];
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+    <div className="grid min-w-0 grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6 lg:gap-4">
       {stats.map((stat) => (
         <div
           key={stat.id}
-          className="bg-card border border-border rounded-lg p-4"
+          className="min-w-0 rounded-lg border border-border bg-card p-3 sm:p-4"
         >
-          <div className="flex items-center gap-2 mb-2">
-            <stat.icon className={`h-4 w-4 ${stat.color}`} />
-            <span className="text-xs text-muted-foreground">{stat.label}</span>
+          <div className="mb-2 flex min-w-0 items-center gap-2">
+            <stat.icon className={`h-4 w-4 shrink-0 ${stat.color}`} />
+            <span className="min-w-0 truncate text-xs text-muted-foreground">
+              {stat.label}
+            </span>
           </div>
-          <p className={`text-2xl font-bold ${stat.color}`}>{stat.value.toLocaleString()}</p>
+          <p className={`text-xl font-bold sm:text-2xl ${stat.color}`}>
+            {stat.value.toLocaleString()}
+          </p>
         </div>
       ))}
     </div>

From 18f1a66c0e88014a2d8f02789d394341e78254de Mon Sep 17 00:00:00 2001
From: mcinquin <github@capitoul.net>
Date: Sun, 17 May 2026 23:14:45 +0200
Subject: [PATCH 2/2] fix(ui): fix issues for admin section on mobile device

---
 src/app/(app)/admin/page.tsx                  | 23 +++++++++++++---
 src/components/admin/admin-cards-section.tsx  |  8 +++---
 .../admin/admin-catalog-section.tsx           | 27 +++++++++++++++----
 src/components/card-table.tsx                 |  6 ++---
 4 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/app/(app)/admin/page.tsx b/src/app/(app)/admin/page.tsx
index c1cbf14..badf2f7 100644
--- a/src/app/(app)/admin/page.tsx
+++ b/src/app/(app)/admin/page.tsx
@@ -18,6 +18,7 @@ export default function AdminPage() {
   const [references, setReferences] = useState<References | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState("cards");
 
   const tabs = useMemo(
     () => [
@@ -129,10 +130,26 @@ export default function AdminPage() {
         </Button>
       </div>
 
-      <Tabs defaultValue="cards">
-        <TabsList className="grid h-auto w-full grid-cols-2 gap-1 sm:flex sm:flex-wrap sm:justify-start">
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <select
+          value={activeTab}
+          onChange={(event) => setActiveTab(event.target.value)}
+          className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm md:hidden"
+        >
+          {tabs.map((tab) => (
+            <option key={tab.value} value={tab.value}>
+              {tab.label}
+            </option>
+          ))}
+        </select>
+
+        <TabsList className="hidden !h-auto w-full max-w-full justify-start p-1 md:inline-flex">
           {tabs.map((tab) => (
-            <TabsTrigger key={tab.value} value={tab.value} className="text-xs sm:text-sm">
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className="h-8 flex-none px-3 text-xs sm:text-sm"
+            >
               {tab.label}
             </TabsTrigger>
           ))}
diff --git a/src/components/admin/admin-cards-section.tsx b/src/components/admin/admin-cards-section.tsx
index 0a1d4a0..8d5d86e 100644
--- a/src/components/admin/admin-cards-section.tsx
+++ b/src/components/admin/admin-cards-section.tsx
@@ -489,7 +489,7 @@ export function AdminCardsSection({
         />
       </div>
 
-      <div className="space-y-3 md:hidden">
+      <div className="space-y-2 md:hidden">
         {paged.length ? (
           paged.map((card) => {
             const meta = [card.team, card.year].filter(Boolean).join(" · ");
@@ -498,7 +498,7 @@ export function AdminCardsSection({
             return (
               <article
                 key={card.id}
-                className="rounded-lg border border-border bg-card p-4 shadow-sm"
+                className="rounded-lg border border-border bg-card p-3 shadow-sm"
               >
                 <div className="flex items-start justify-between gap-3">
                   <div className="min-w-0">
@@ -510,12 +510,12 @@ export function AdminCardsSection({
                   <CardBadges card={card} labels={badgeLabels} />
                 </div>
 
-                <div className="mt-3 space-y-1 text-sm">
+                <div className="mt-2 space-y-0.5 text-sm">
                   <p className="truncate text-muted-foreground">{catalog}</p>
                   <p className="truncate">{card.variation}</p>
                 </div>
 
-                <div className="mt-3 flex justify-end gap-1">
+                <div className="mt-2 flex justify-end gap-1">
                   <Button
                     variant="ghost"
                     size="sm"
diff --git a/src/components/admin/admin-catalog-section.tsx b/src/components/admin/admin-catalog-section.tsx
index cb2d9b9..e413f29 100644
--- a/src/components/admin/admin-catalog-section.tsx
+++ b/src/components/admin/admin-catalog-section.tsx
@@ -183,6 +183,7 @@ export function AdminCatalogSection({
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState("brands");
 
   const setsForBrand = useMemo(
     () => setsLinkedToBrand(references, brandForSet),
@@ -219,11 +220,27 @@ export function AdminCatalogSection({
     <div className="space-y-6">
       <p className="text-sm text-muted-foreground">{t("admin.catalog.intro")}</p>
 
-      <Tabs defaultValue="brands">
-        <TabsList className="grid h-auto w-full grid-cols-1 gap-1 sm:grid-cols-3">
-          <TabsTrigger value="brands">{t("admin.catalog.brands")}</TabsTrigger>
-          <TabsTrigger value="sets">{t("admin.catalog.sets")}</TabsTrigger>
-          <TabsTrigger value="variations">{t("admin.catalog.variations")}</TabsTrigger>
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <select
+          value={activeTab}
+          onChange={(event) => setActiveTab(event.target.value)}
+          className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm md:hidden"
+        >
+          <option value="brands">{t("admin.catalog.brands")}</option>
+          <option value="sets">{t("admin.catalog.sets")}</option>
+          <option value="variations">{t("admin.catalog.variations")}</option>
+        </select>
+
+        <TabsList className="hidden !h-auto w-full max-w-full justify-start p-1 md:inline-flex">
+          <TabsTrigger value="brands" className="h-8 flex-none px-3">
+            {t("admin.catalog.brands")}
+          </TabsTrigger>
+          <TabsTrigger value="sets" className="h-8 flex-none px-3">
+            {t("admin.catalog.sets")}
+          </TabsTrigger>
+          <TabsTrigger value="variations" className="h-8 flex-none px-3">
+            {t("admin.catalog.variations")}
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="brands" className="space-y-4 pt-4">
diff --git a/src/components/card-table.tsx b/src/components/card-table.tsx
index bf24467..d08e94e 100644
--- a/src/components/card-table.tsx
+++ b/src/components/card-table.tsx
@@ -337,7 +337,7 @@ export function CardTable({ cards, filters }: CardTableProps) {
       </div>
 
       {/* Mobile cards */}
-      <div className="space-y-3 md:hidden">
+      <div className="space-y-2 md:hidden">
         {table.getRowModel().rows.length ? (
           table.getRowModel().rows.map((row) => {
             const card = row.original;
@@ -354,7 +354,7 @@ export function CardTable({ cards, filters }: CardTableProps) {
               <button
                 key={row.id}
                 type="button"
-                className="block w-full rounded-lg border border-border bg-card p-4 text-left shadow-sm transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="block w-full rounded-lg border border-border bg-card p-3 text-left shadow-sm transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={() => setSelectedCard(card)}
               >
                 <div className="flex items-start justify-between gap-3">
@@ -367,7 +367,7 @@ export function CardTable({ cards, filters }: CardTableProps) {
                   <CardBadges card={card} labels={badgeLabels} />
                 </div>
 
-                <div className="mt-3 space-y-1 text-sm">
+                <div className="mt-2 space-y-0.5 text-sm">
                   <p className="truncate text-muted-foreground">
                     {card.brand} · {card.set}
                   </p>