Fix field name overflow

This commit is contained in:
1ilit 2024-04-01 20:31:24 +03:00
parent 9df9527950
commit 19ca8a55c2

View File

@ -1243,7 +1243,7 @@ export default function Table(props) {
className={`${ className={`${
index === props.tableData.fields.length - 1 || index === props.tableData.fields.length - 1 ||
"border-b border-gray-400" "border-b border-gray-400"
} h-[36px] px-2 py-1 flex justify-between`} } h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
onMouseEnter={() => { onMouseEnter={() => {
setHoveredField(index); setHoveredField(index);
props.setHoveredTable({ props.setHoveredTable({
@ -1255,9 +1255,13 @@ export default function Table(props) {
setHoveredField(-1); setHoveredField(-1);
}} }}
> >
<div className={`${hoveredField === index ? "text-zinc-400" : ""}`}> <div
className={`${
hoveredField === index ? "text-zinc-400" : ""
} flex items-center gap-2 overflow-hidden`}
>
<button <button
className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`} className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full"
onMouseDown={() => { onMouseDown={() => {
props.handleGripField(index); props.handleGripField(index);
props.setLinkingLine((prev) => ({ props.setLinkingLine((prev) => ({
@ -1271,9 +1275,9 @@ export default function Table(props) {
})); }));
}} }}
/> />
{fieldData.name.length <= 11 <span className="overflow-hidden text-ellipsis whitespace-nowrap">
? fieldData.name {fieldData.name}
: fieldData.name.substring(0, 11)} </span>
</div> </div>
<div className="text-zinc-400"> <div className="text-zinc-400">
{hoveredField === index ? ( {hoveredField === index ? (