Improve the Data panel's data display with monospaced text and copyable number values (#4040)

* Improve the Data panel's data display with monospaced text and copyable number values

* Revert attempted fix for dropdown menus appearing lower in scrolled Properties panel, since it makes other floating menus freeze the app

* Code review
This commit is contained in:
Keavon Chambers
2026-04-23 15:32:18 -07:00
committed by GitHub
parent e2117d9a02
commit fcf9396a71
9 changed files with 74 additions and 32 deletions
@@ -12,11 +12,31 @@
export let tooltipShortcut: ActionShortcut | undefined = undefined;
// Callbacks
export let action: (index: number) => void;
function truncate(label: string): string {
let maxLength = 40;
if (label.length <= maxLength) return label;
let truncated = label;
const hasQuotes = label.startsWith(`"`) && label.endsWith(`"`);
if (hasQuotes) {
truncated = label.slice(1, -1);
maxLength -= 2;
}
truncated = truncated.slice(0, maxLength - 1) + "…";
if (hasQuotes) truncated = `"${truncated}"`;
return truncated;
}
</script>
<LayoutRow class="breadcrumb-trail-buttons" {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
{#each labels as label, index}
<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
<TextButton label={truncate(label)} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
{/each}
</LayoutRow>