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.
pull/6058/head
boojack 1 week ago
parent 5a73d7d3e5
commit 3b601b8416

@ -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">

Loading…
Cancel
Save