Change CalendarEventBubble to clip instead of ...

When the event summary has just one line, the content will be clipped instead of displaying ..., this will lead to more space and more text displayed to users. Co-authored-by: André Dias <[email protected]>
tutao · Nov 5, 2024 · 2f1265a · 2f1265a
1 parent f2a1bcf
commit 2f1265a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/calendar-app/calendar/view/CalendarEventBubble.ts b/src/calendar-app/calendar/view/CalendarEventBubble.ts
@@ -122,7 +122,7 @@ export class CalendarEventBubble implements Component<CalendarEventBubbleAttrs>
 			const linesInBubble = Math.floor(height / lineHeight)
 			// leave space for the second text line. it will be restricted to a maximum of one line in height
 			const topSectionMaxLines = secondLineText != null ? linesInBubble - 1 : linesInBubble
-			const topSectionClass = topSectionMaxLines === 1 ? ".text-ellipsis" : ".text-ellipsis-multi-line"
+			const topSectionClass = topSectionMaxLines === 1 ? ".text-clip" : ".text-ellipsis-multi-line"
 			return [
 				// The wrapper around `text` is needed to stop `-webkit-box` from changing the height
 				CalendarEventBubble.renderTextSection(
@@ -142,7 +142,7 @@ export class CalendarEventBubble implements Component<CalendarEventBubbleAttrs>
 			]
 		} else {
 			return CalendarEventBubble.renderTextSection(
-				".text-ellipsis",
+				".text-clip",
 				secondLineText
 					? [
 							`${text} `,

diff --git a/src/common/gui/main-styles.ts b/src/common/gui/main-styles.ts
@@ -575,6 +575,12 @@ styles.registerStyle("main", () => {
 			overflow: " hidden",
 			"text-overflow": "ellipsis",
 		},
+		".text-clip": {
+			overflow: "hidden",
+			"text-overflow": "clip",
+			"min-width": 0,
+			"white-space": "nowrap",
+		},
 		".min-width-0": {
 			"min-width": 0,
 		},