hansjone/mind-map
1
0
Fork 0
mirror of https://github.com/hansjone/mind-map.git synced 2026-10-09 03:20:49 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: widen property tip for long text

Browse source 
Give hover/pinned tips more width and height so large property values are easier to read.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-17 11:12:41 +08:00
parent f81b5ef532
commit 20ca725493
2 changed files with 33 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/web/src/PropTooltip.tsx
View file

@ -41,10 +41,19 @@ export function PropTooltip({
}); });
}, [x, y, label, value, hostW, hostH, pinned]); }, [x, y, label, value, hostW, hostH, pinned]);
const longText = value.trim().length >= 72 || value.includes("\n");
const className = [
"prop-tooltip",
pinned ? "prop-tooltip--pinned" : "",
longText ? "prop-tooltip--long" : "",
]
.filter(Boolean)
.join(" ");
return ( return (
<div <div
ref={ref} ref={ref}
className={`prop-tooltip${pinned ? " prop-tooltip--pinned" : ""}`} className={className}
style={{ left: pos.x, top: pos.y }} style={{ left: pos.x, top: pos.y }}
role="tooltip" role="tooltip"
onContextMenu={(e) => { onContextMenu={(e) => {

30
apps/web/src/styles.css
View file

@ -509,9 +509,10 @@ input {
.prop-tooltip { .prop-tooltip {
position: absolute; position: absolute;
z-index: 8; z-index: 8;
max-width: min(360px, calc(100% - 20px)); max-width: min(520px, calc(100% - 24px));
min-width: 140px; min-width: 200px;
padding: 10px 12px; width: max-content;
padding: 12px 14px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.14)); border: 1px solid var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.14));
background: color-mix( background: color-mix(
@ -528,9 +529,16 @@ input {
"Noto Sans SC", system-ui, sans-serif; "Noto Sans SC", system-ui, sans-serif;
} }
.prop-tooltip--long {
max-width: min(640px, calc(100% - 32px));
min-width: min(360px, calc(100% - 32px));
}
.prop-tooltip--pinned { .prop-tooltip--pinned {
pointer-events: auto; pointer-events: auto;
z-index: 12; z-index: 12;
max-width: min(680px, calc(100% - 32px));
min-width: min(320px, calc(100% - 32px));
border-color: color-mix( border-color: color-mix(
in srgb, in srgb,
var(--dsw-alias-brand-primary, #5e6ad2) 55%, var(--dsw-alias-brand-primary, #5e6ad2) 55%,
@ -542,12 +550,16 @@ input {
0 16px 44px rgba(0, 0, 0, 0.52); 0 16px 44px rgba(0, 0, 0, 0.52);
} }
.prop-tooltip--pinned.prop-tooltip--long {
max-width: min(720px, calc(100% - 40px));
}
.prop-tooltip__label { .prop-tooltip__label {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--dsw-alias-label-secondary, #a5adb8); color: var(--dsw-alias-label-secondary, #a5adb8);
margin-bottom: 4px; margin-bottom: 6px;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
@ -564,16 +576,20 @@ input {
} }
.prop-tooltip__value { .prop-tooltip__value {
font-size: 12.5px; font-size: 13px;
font-weight: 500; font-weight: 500;
line-height: 1.45; line-height: 1.55;
color: var(--dsw-alias-label-primary, #f4f5f7); color: var(--dsw-alias-label-primary, #f4f5f7);
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
max-height: min(40vh, 280px); max-height: min(52vh, 420px);
overflow: auto; overflow: auto;
} }
.prop-tooltip--long .prop-tooltip__value {
max-height: min(60vh, 520px);
}
.edit-overlay { .edit-overlay {
position: absolute; position: absolute;
z-index: 6; z-index: 6;