From 0d9373418337394ce741af7b69b958acbd208b10 Mon Sep 17 00:00:00 2001
From: Max Heidinger <mail@max-heidinger.de>
Date: Sat, 16 Aug 2025 21:03:53 +0200
Subject: [PATCH] fix: width styling of tag missing location dialog recent
 searches

---
 .../TagMissingLocationDialog/RecentSearches.tsx    | 14 +++++++-------
 .../TagMissingLocationDialog.tsx                   | 11 ++++++-----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/assets/missing-location/TagMissingLocationDialog/RecentSearches.tsx b/src/components/assets/missing-location/TagMissingLocationDialog/RecentSearches.tsx
index 7c12eeb..9739654 100644
--- a/src/components/assets/missing-location/TagMissingLocationDialog/RecentSearches.tsx
+++ b/src/components/assets/missing-location/TagMissingLocationDialog/RecentSearches.tsx
@@ -1,6 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { getRecentSearchesByType, RecentSearch } from "@/lib/utils";
+import { getRecentSearchesByType, RecentSearch, cn } from "@/lib/utils";
 import { IPlace } from "@/types/common";
 import { Clock, MapPin } from "lucide-react";
 import React from "react";
@@ -9,9 +8,10 @@ interface RecentSearchesProps {
   searchType: RecentSearch['searchType'];
   onSelect: (place: IPlace) => void;
   selectedPlace?: IPlace | null;
+  className?: string;
 }
 
-export default function RecentSearches({ searchType, onSelect, selectedPlace }: RecentSearchesProps) {
+export default function RecentSearches({ searchType, onSelect, selectedPlace, className }: RecentSearchesProps) {
   const recentSearches = getRecentSearchesByType(searchType);
 
   if (recentSearches.length === 0) {
@@ -32,7 +32,7 @@ export default function RecentSearches({ searchType, onSelect, selectedPlace }:
   };
 
   return (
-    <div className="mb-4">
+    <div className={cn("mb-4", className)}>
       <div className="flex items-center gap-2 mb-3">
         <Clock className="h-4 w-4 text-muted-foreground" />
         <h3 className="text-sm font-medium text-muted-foreground">Recent Searches</h3>
@@ -50,7 +50,7 @@ export default function RecentSearches({ searchType, onSelect, selectedPlace }:
               "hover:bg-zinc-200 dark:hover:bg-zinc-800 flex justify-between items-center px-3 py-2 rounded-lg cursor-pointer border",
               {
                 "bg-zinc-200 dark:bg-zinc-800 border-primary":
-                  selectedPlace && 
+                  selectedPlace &&
                   selectedPlace.name === search.name &&
                   selectedPlace.latitude === search.latitude &&
                   selectedPlace.longitude === search.longitude,
@@ -60,7 +60,7 @@ export default function RecentSearches({ searchType, onSelect, selectedPlace }:
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2">
                 <MapPin className="h-3 w-3 text-muted-foreground flex-shrink-0" />
-                <p className="text-sm truncate">{search.name}</p>
+                <p className="text-sm line-clamp-2">{search.name}</p>
               </div>
               <div className="flex items-center justify-between mt-1">
                 <span className="text-xs text-muted-foreground">
@@ -76,4 +76,4 @@ export default function RecentSearches({ searchType, onSelect, selectedPlace }:
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationDialog.tsx b/src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationDialog.tsx
index 374550d..3c22822 100644
--- a/src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationDialog.tsx
+++ b/src/components/assets/missing-location/TagMissingLocationDialog/TagMissingLocationDialog.tsx
@@ -54,7 +54,7 @@ export default function TagMissingLocationDialog({
             Tagging a location will add the location to the selected {selectedIds.length} asset(s).
           </DialogDescription>
         </DialogHeader>
-        <Tabs defaultValue="searchOsm" className="border rounded-lg">
+        <Tabs defaultValue="searchOsm" className="border rounded-lg min-w-0 max-w-full">
           <TabsList className="flex justify-between">
             <TabsTrigger value="searchOsm" className="w-full">Open Street Map</TabsTrigger>
             <TabsTrigger value="search" className="w-full">Immich Geo</TabsTrigger>
@@ -71,16 +71,17 @@ export default function TagMissingLocationDialog({
             <TagMissingLocationSearchLatLong onSubmit={onSubmit} onOpenChange={setOpen} location={mapPosition} onLocationChange={setMapPosition} />
           </TabsContent>
           <TabsContent value="maps">
-            <div className="flex flex-col gap-6 items-center ">
+            <div className="flex flex-col gap-6 items-center min-w-0 max-w-full py-4">
               {/* Recent Searches */}
-              <RecentSearches 
-                searchType="map" 
+              <RecentSearches
+                searchType="map"
                 onSelect={(place) => {
                   setMapPosition(place);
                 }}
                 selectedPlace={mapPosition.name ? mapPosition : null}
+                className="w-[500px]" // Matching the width of the map
               />
-              
+
               <LazyMap location={{
                 latitude: isNaN(mapPosition.latitude) ? 0 : mapPosition.latitude,
                 longitude: isNaN(mapPosition.longitude) ? 0 : mapPosition.longitude,