fix(furni-editor): tooltips wrap + no longer clipped

Tip tooltips were whitespace-nowrap (one very wide line) and clipped by
the Section card's overflow-hidden. Bound the bubble width with wrapping
(w-44, whitespace-normal, centered) and drop overflow-hidden from Section
(keeping rounded corners via rounded-t/b-xl on the header) so long tips
like Custom Params render fully.
This commit is contained in:
simoleo89
2026-06-06 14:51:23 +02:00
parent 5c3b5ede4e
commit bf4e1d664f
@@ -34,10 +34,10 @@ const Section: FC<SectionProps> = ({ title, children, defaultOpen = true }) =>
const [ open, setOpen ] = useState(defaultOpen); const [ open, setOpen ] = useState(defaultOpen);
return ( return (
<div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm overflow-hidden"> <div className="bg-[#ffffff] rounded-xl border border-slate-200 shadow-sm">
<button <button
type="button" type="button"
className="w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors" className={ `w-full flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-slate-50 transition-colors rounded-t-xl ${ open ? '' : 'rounded-b-xl' }` }
onClick={ () => setOpen(p => !p) } onClick={ () => setOpen(p => !p) }
> >
<Text className="text-[12px] font-semibold text-slate-700">{ title }</Text> <Text className="text-[12px] font-semibold text-slate-700">{ title }</Text>
@@ -57,7 +57,7 @@ const Tip: FC<{ field: string }> = ({ field }) =>
return ( return (
<span className="relative group ml-0.5 inline-flex"> <span className="relative group ml-0.5 inline-flex">
<span className="w-3 h-3 rounded-full bg-[#1e7295] text-white text-[8px] flex items-center justify-center cursor-help font-bold">?</span> <span className="w-3 h-3 rounded-full bg-[#1e7295] text-white text-[8px] flex items-center justify-center cursor-help font-bold">?</span>
<span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-[#333] text-white text-[10px] rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-10"> <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-[#333] text-white text-[10px] rounded w-44 whitespace-normal text-center leading-snug opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20 shadow-lg">
{ tip } { tip }
</span> </span>
</span> </span>