From 3b601b841670ece4a2832341a99ccc74124a745e Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Mon, 29 Jun 2026 20:27:52 +0800
Subject: [PATCH] fix(location): truncate long address in memo location chip

The location chip used the kit Button (shrink-0 + whitespace-nowrap),
which grew unbounded so its inner truncate span never fired and long
addresses overflowed the memo card. Replace with a raw button that
caps width (max-w-full min-w-0) and truncates the address text,
matching the existing LocationDisplayEditor pattern.
---
 .../Location/LocationDisplayView.tsx            | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/src/components/MemoMetadata/Location/LocationDisplayView.tsx b/web/src/components/MemoMetadata/Location/LocationDisplayView.tsx
index b9d65594b..85dad6ead 100644
--- a/web/src/components/MemoMetadata/Location/LocationDisplayView.tsx
+++ b/web/src/components/MemoMetadata/Location/LocationDisplayView.tsx
@@ -1,7 +1,6 @@
 import { MapPinIcon } from "lucide-react";
 import { useState } from "react";
 import { LazyLocationPicker } from "@/components/map/LazyLocationPicker";
-import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import type { Location } from "@/types/proto/api/v1/memo_service_pb";
 import { getLocationCoordinatesText, getLocationDisplayText } from "./locationHelpers";
@@ -22,13 +21,15 @@ const LocationDisplayView = ({ location }: LocationDisplayViewProps) => {
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm">
-          <span className="shrink-0 text-muted-foreground">
-            <MapPinIcon className="w-3.5 h-3.5" />
-          </span>
-          <span className="text-nowrap opacity-80">[{getLocationCoordinatesText(location, 2)}]</span>
-          <span className="text-nowrap truncate">{displayText}</span>
-        </Button>
+        <button
+          type="button"
+          title={displayText}
+          className="inline-flex max-w-full min-w-0 items-center gap-1 h-7 px-2 rounded-md border border-border bg-background text-sm font-medium shadow-xs transition-all hover:bg-accent hover:text-accent-foreground"
+        >
+          <MapPinIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+          <span className="shrink-0 text-nowrap opacity-80">[{getLocationCoordinatesText(location, 2)}]</span>
+          <span className="min-w-0 truncate">{displayText}</span>
+        </button>
       </PopoverTrigger>
       <PopoverContent align="start">
         <div className="min-w-80 sm:w-lg flex flex-col justify-start items-start">