Fix the ellipses of a long document name causing the tab's unsaved asterisk to be hidden (#3146)

* Fix unsaved indicator

* Change isSaved to isUnsaved to prevent showing star on tabs like Properties

* Fix CSS

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/window/workspace/Panel.svelte

@@ -36,7 +36,7 @@
 
 	export let tabMinWidths = false;
 	export let tabCloseButtons = false;
-	export let tabLabels: { name: string; tooltip?: string }[];
+	export let tabLabels: { name: string; unsaved?: boolean; tooltip?: string }[];
 	export let tabActiveIndex: number;
 	export let panelType: PanelType | undefined = undefined;
 	export let clickAction: ((index: number) => void) | undefined = undefined;
@@ -130,7 +130,12 @@
 					}}
 					bind:this={tabElements[tabIndex]}
 				>
-					<TextLabel>{tabLabel.name}</TextLabel>
+					<LayoutRow class="name">
+						<TextLabel class="text">{tabLabel.name}</TextLabel>
+						{#if tabLabel.unsaved}
+							<TextLabel>*</TextLabel>
+						{/if}
+					</LayoutRow>
 					{#if tabCloseButtons}
 						<IconButton
 							action={(e) => {
@@ -260,14 +265,22 @@
 						}
 					}
 
-					.text-label {
+					.name {
 						flex: 1 1 100%;
-						overflow-x: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						// Height and line-height required because https://stackoverflow.com/a/21611191/775283
-						height: 28px;
-						line-height: 28px;
+
+						.text-label {
+							// Height and line-height required because https://stackoverflow.com/a/21611191/775283
+							height: 28px;
+							line-height: 28px;
+							flex: 0 0 auto;
+
+							&.text {
+								overflow-x: hidden;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+								flex-shrink: 1;
+							}
+						}
 					}
 
 					.icon-button {

frontend/src/components/window/workspace/Workspace.svelte

@@ -30,12 +30,12 @@
 	$: documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex);
 
 	$: documentTabLabels = $portfolio.documents.map((doc: OpenDocument) => {
-		const name = doc.displayName;
-
-		if (!editor.handle.inDevelopmentMode()) return { name };
+		const name = doc.details.name;
+		const unsaved = !doc.details.isSaved;
+		if (!editor.handle.inDevelopmentMode()) return { name, unsaved };
 
 		const tooltip = `Document ID: ${doc.id}`;
-		return { name, tooltip };
+		return { name, unsaved, tooltip };
 	});
 
 	const editor = getContext<Editor>("editor");