fix: ui fixes

app/(app)/transcriptions/place/[place]/page.tsx

@@ -8,7 +8,7 @@ import { buildOgMeta } from "@/lib/og";
 import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Clock } from "lucide-react";
+import { Calendar, Clock } from "lucide-react";
 import { PlayAudioButton } from "@/app/(app)/transcriptions/[slug]/play-audio-button";
 
 export async function generateMetadata({
@@ -75,8 +75,13 @@ export default async function TranscriptionsByPlacePage({
                       {t.type === "lecture" ? "Lecture" : "Conversation"}
                     </Badge>
                   </div>
-                  <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
-                    {t.date && <span>{t.date}</span>}
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1 text-xs text-muted-foreground">
+                    {t.date && (
+                      <span className="flex items-center gap-1">
+                        <Calendar className="size-3" />
+                        {t.date}
+                      </span>
+                    )}
                     {t.reference && (
                       <span className="text-primary/70">{t.reference}</span>
                     )}

app/(app)/transcriptions/type/[type]/type-browser.tsx

@@ -6,7 +6,14 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight, Menu, Clock, MapPin } from "lucide-react";
+import {
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  Menu,
+  Clock,
+  MapPin,
+} from "lucide-react";
 import { PlayAudioButton } from "@/app/(app)/transcriptions/[slug]/play-audio-button";
 import {
   Drawer,
@@ -379,7 +386,13 @@ function MonthSection({
                       {t.type === "lecture" ? "Lecture" : "Conversation"}
                     </Badge>
                   </div>
-                  <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1 text-xs text-muted-foreground">
+                    {t.date && (
+                      <span className="flex items-center gap-1">
+                        <Calendar className="size-3" />
+                        {t.date}
+                      </span>
+                    )}
                     {t.place && (
                       <span className="flex items-center gap-1">
                         <MapPin className="size-3" />

app/(app)/transcriptions/year/[year]/year-browser.tsx

@@ -6,7 +6,7 @@ import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-import { ChevronRight, Clock, MapPin } from "lucide-react";
+import { Calendar, ChevronRight, Clock, MapPin } from "lucide-react";
 import { PlayAudioButton } from "@/app/(app)/transcriptions/[slug]/play-audio-button";
 
 type TranscriptionItem = {
@@ -92,7 +92,13 @@ function MonthSection({
                       {t.type === "lecture" ? "Lecture" : "Conversation"}
                     </Badge>
                   </div>
-                  <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1 text-xs text-muted-foreground">
+                    {t.date && (
+                      <span className="flex items-center gap-1">
+                        <Calendar className="size-3" />
+                        {t.date}
+                      </span>
+                    )}
                     {t.place && (
                       <span className="flex items-center gap-1">
                         <MapPin className="size-3" />