Improve font import; replace Inconsolata with Source Code Pro; show third-party licenses in editor dialog (#3079)

* Improve font import; replace Inconsolata with Source Code Pro; show third-party licenses in editor dialog

* Code review

frontend/src/components/Editor.svelte

@@ -352,4 +352,44 @@
 	:not(.optional-input) > .checkbox-input input:focus-visible + label.checked {
 		outline: 1px dashed var(--color-2-mildblack);
 	}
+
+	@font-face {
+		font-family: "Source Sans Pro";
+		font-weight: 400;
+		font-style: normal;
+		font-stretch: normal;
+		src: url("@graphite/../node_modules/source-sans/WOFF2/TTF/SourceSansPro-Regular.ttf.woff2") format("woff2");
+	}
+
+	@font-face {
+		font-family: "Source Sans Pro";
+		font-weight: 400;
+		font-style: italic;
+		font-stretch: normal;
+		src: url("@graphite/../node_modules/source-sans/WOFF2/TTF/SourceSansPro-It.ttf.woff2") format("woff2");
+	}
+
+	@font-face {
+		font-family: "Source Sans Pro";
+		font-weight: 700;
+		font-style: normal;
+		font-stretch: normal;
+		src: url("@graphite/../node_modules/source-sans/WOFF2/TTF/SourceSansPro-Bold.ttf.woff2") format("woff2");
+	}
+
+	@font-face {
+		font-family: "Source Sans Pro";
+		font-weight: 700;
+		font-style: italic;
+		font-stretch: normal;
+		src: url("@graphite/../node_modules/source-sans/WOFF2/TTF/SourceSansPro-BoldIt.ttf.woff2") format("woff2");
+	}
+
+	@font-face {
+		font-family: "Source Code Pro";
+		font-weight: 400;
+		font-style: normal;
+		font-stretch: normal;
+		src: url("@graphite/../node_modules/source-code-pro/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2") format("woff2");
+	}
 </style>

frontend/src/components/floating-menus/Dialog.svelte

@@ -89,6 +89,7 @@
 		.header-area,
 		.footer-area {
 			background: var(--color-1-nearblack);
+			flex: 0 0 auto;
 		}
 
 		.header-area,
@@ -113,6 +114,8 @@
 
 		.content {
 			margin: -4px 0;
+			padding-right: calc(24px + 1px * var(--even-integer-subpixel-expansion-x));
+			padding-bottom: calc(16px + 1px * var(--even-integer-subpixel-expansion-y));
 
 			&.center .row {
 				justify-content: center;
@@ -126,18 +129,22 @@
 				}
 			}
 
-			.details.text-label {
-				-webkit-user-select: text; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
-				user-select: text;
-				white-space: pre-wrap;
-				max-width: 400px;
-				height: auto;
-			}
-
 			.radio-input button {
 				flex-grow: 1;
 			}
 
+			.text-label.multiline {
+				-webkit-user-select: text; // Still required by Safari as of 2025
+				user-select: text;
+			}
+
+			// Used by the "Third-Party Software License Notices" dialog
+			.details:has(.text-label.multiline.monospace) {
+				max-height: 60vh;
+				max-width: 80vw;
+				overflow: auto;
+			}
+
 			// Used by the "Open Demo Artwork" dialog
 			.image-label {
 				border-radius: 2px;

frontend/src/components/layout/FloatingMenu.svelte

@@ -137,20 +137,23 @@
 		// This solves antialiasing issues when the content isn't cleanly divisible by 2 and gets translated by (-50%, -50%) causing all its content to be blurry.
 		const floatingMenuContentDiv = floatingMenuContent?.div?.();
 		if (type === "Dialog" && floatingMenuContentDiv) {
-			// TODO: Also use https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver to detect any changes which may affect the size of the content.
-			// TODO: The current method only notices when the dialog size increases but can't detect when it decreases.
 			const resizeObserver = new ResizeObserver((entries) => {
 				entries.forEach((entry) => {
-					let { width, height } = entry.contentRect;
+					const existingWidth = Number(floatingMenuContentDiv.style.getPropertyValue("--even-integer-subpixel-expansion-x"));
+					const existingHeight = Number(floatingMenuContentDiv.style.getPropertyValue("--even-integer-subpixel-expansion-y"));
 
-					width = Math.ceil(width);
-					if (width % 2 === 1) width += 1;
-					height = Math.ceil(height);
-					if (height % 2 === 1) height += 1;
+					let { width, height } = entry.contentRect;
+					width -= existingWidth;
+					height -= existingHeight;
+
+					let targetWidth = Math.ceil(width);
+					if (targetWidth % 2 === 1) targetWidth += 1;
+					let targetHeight = Math.ceil(height);
+					if (targetHeight % 2 === 1) targetHeight += 1;
 
 					// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
-					floatingMenuContentDiv.style.setProperty("min-width", width === 0 ? "unset" : `${width}px`);
-					floatingMenuContentDiv.style.setProperty("min-height", height === 0 ? "unset" : `${height}px`);
+					floatingMenuContentDiv.style.setProperty("--even-integer-subpixel-expansion-x", `${targetWidth - width}`);
+					floatingMenuContentDiv.style.setProperty("--even-integer-subpixel-expansion-y", `${targetHeight - height}`);
 				});
 			});
 			resizeObserver.observe(floatingMenuContentDiv);
@@ -158,14 +161,6 @@
 	});
 
 	afterUpdate(() => {
-		// Remove the size constraint after the content updates so the resize observer can measure the content and reapply a newly calculated one
-		const floatingMenuContentDiv = floatingMenuContent?.div?.();
-		if (type === "Dialog" && floatingMenuContentDiv) {
-			// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
-			floatingMenuContentDiv.style.setProperty("min-width", "unset");
-			floatingMenuContentDiv.style.setProperty("min-height", "unset");
-		}
-
 		// Gets the client bounds of the elements and apply relevant styles to them.
 		// TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change,
 		// TODO: which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop).

frontend/src/components/panels/Layers.svelte

@@ -770,7 +770,7 @@
 						width: 100%;
 
 						&:disabled {
-							-webkit-user-select: none; // Required as of Safari 15.0 (Graphite's minimum version) through the latest release
+							-webkit-user-select: none; // Still required by Safari as of 2025
 							user-select: none;
 							// Workaround for `user-select: none` not working on <input> elements
 							pointer-events: none;

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -8,9 +8,10 @@
 	export let disabled = false;
 	export let bold = false;
 	export let italic = false;
+	export let monospace = false;
 	export let centerAlign = false;
 	export let tableAlign = false;
-	export let minWidth = 0;
+	export let minWidth = "";
 	export let multiline = false;
 	export let tooltip: string | undefined = undefined;
 	export let forCheckbox: bigint | undefined = undefined;
@@ -28,10 +29,11 @@
 	class:disabled
 	class:bold
 	class:italic
+	class:monospace
 	class:multiline
 	class:center-align={centerAlign}
 	class:table-align={tableAlign}
-	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
+	style:min-width={minWidth || undefined}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	for={forCheckbox !== undefined ? `checkbox-input-${forCheckbox}` : undefined}
@@ -58,6 +60,11 @@
 			font-style: italic;
 		}
 
+		&.monospace {
+			font-family: "Source Code Pro", monospace;
+			font-size: 12px;
+		}
+
 		&.multiline {
 			white-space: pre-wrap;
 			margin: 4px 0;

frontend/src/components/widgets/labels/UserInputLabel.svelte

@@ -183,7 +183,8 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				font-family: "Inconsolata", monospace;
+				font-family: "Source Code Pro", monospace;
+				font-size: 12px;
 				font-weight: 400;
 				text-align: center;
 				height: 16px;