system/memos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(location): truncate long address in memo location chip

Browse source 
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.
This commit is contained in:
boojack 2026-06-29 20:27:52 +08:00
parent 5a73d7d3e5
commit 3b601b8416
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/MemoMetadata/Location/LocationDisplayView.tsx
View file

@ -1,7 +1,6 @@
import { MapPinIcon } from "lucide-react"; import { MapPinIcon } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { LazyLocationPicker } from "@/components/map/LazyLocationPicker"; import { LazyLocationPicker } from "@/components/map/LazyLocationPicker";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import type { Location } from "@/types/proto/api/v1/memo_service_pb"; import type { Location } from "@/types/proto/api/v1/memo_service_pb";
import { getLocationCoordinatesText, getLocationDisplayText } from "./locationHelpers"; import { getLocationCoordinatesText, getLocationDisplayText } from "./locationHelpers";
@ -22,13 +21,15 @@ const LocationDisplayView = ({ location }: LocationDisplayViewProps) => {
return ( return (
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}> <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant="outline" size="sm"> <button
<span className="shrink-0 text-muted-foreground"> type="button"
<MapPinIcon className="w-3.5 h-3.5" /> title={displayText}
</span> 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"
<span className="text-nowrap opacity-80">[{getLocationCoordinatesText(location, 2)}]</span> >
<span className="text-nowrap truncate">{displayText}</span> <MapPinIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
</Button> <span className="shrink-0 text-nowrap opacity-80">[{getLocationCoordinatesText(location, 2)}]</span>
<span className="min-w-0 truncate">{displayText}</span>
</button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start"> <PopoverContent align="start">
<div className="min-w-80 sm:w-lg flex flex-col justify-start items-start"> <div className="min-w-80 sm:w-lg flex flex-col justify-start items-start">