Show more compact preview of commit message

I just trialled and errored my way to a formula for how many characters 
we can fit in the container, taking current zoom level into account.

Author: mtsgrd

apps/desktop/src/components/CommitDetails.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
 	import { writeClipboard } from '$lib/backend/clipboard';
 	import { type Commit, type UpstreamCommit } from '$lib/branches/v3';
+	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import { UiState } from '$lib/state/uiState.svelte';
 	import { TestId } from '$lib/testing/testIds';
 	import { UserService } from '$lib/user/userService';
 	import { splitMessage } from '$lib/utils/commitMessage';
 	import { truncate } from '$lib/utils/string';
-	import { inject } from '@gitbutler/shared/context';
+	import { getContextStoreBySymbol, inject } from '@gitbutler/shared/context';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import Avatar from '@gitbutler/ui/avatar/Avatar.svelte';
+	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
+	import type { Writable } from 'svelte/store';
 
 	type Props = {
 		commit: UpstreamCommit | Commit;
@@ -19,12 +22,22 @@
 	const { commit }: Props = $props();
 
 	const [userService] = inject(UserService, UiState);
+	const userSettings = getContextStoreBySymbol<Settings, Writable<Settings>>(SETTINGS);
+	const zoom = $derived($userSettings.zoom);
 
 	const user = $derived(userService.user);
 
+	let messageWidth = $state(0);
+	const messageWidthRem = $derived(pxToRem(messageWidth, zoom));
+
+	// Calculate approximately how many characters fit on one line, as a
+	// function of container width as well as zoom level.
+	// TODO: Turn this magic formula into something meaningful.
+	const maxLength = $derived((messageWidthRem - 2) * 2 - 1 * (Math.pow(zoom, 2) - 1));
+
 	const message = $derived(commit.message);
 	const description = $derived(splitMessage(message).description);
-	const abbreviated = $derived(truncate(description, 80, 3));
+	const abbreviated = $derived(truncate(description, maxLength, 3));
 	const isAbbrev = $derived(abbreviated !== description);
 
 	let expanded = $state(false);
@@ -70,7 +83,12 @@
 	</div>
 
 	{#if description}
-		<div class="text-13 description" class:expanded data-testid={TestId.CommitDrawerDescription}>
+		<div
+			class="text-13 description"
+			class:expanded
+			bind:clientWidth={messageWidth}
+			data-testid={TestId.CommitDrawerDescription}
+		>
 			{#if expanded}
 				{description}
 			{:else}

apps/desktop/src/components/Drawer.svelte

@@ -6,7 +6,8 @@
 		scrollingAttachment,
 		type TargetType
 	} from '$lib/intelligentScrolling/service';
-	import { inject } from '@gitbutler/shared/context';
+	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
+	import { getContextStoreBySymbol, inject } from '@gitbutler/shared/context';
 	import { persistWithExpiration } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
@@ -57,6 +58,8 @@
 	}: Props = $props();
 
 	const [intelligentScrollingService] = inject(IntelligentScrollingService);
+	const userSettings = getContextStoreBySymbol<Settings>(SETTINGS);
+	const zoom = $derived($userSettings.zoom);
 
 	let headerDiv = $state<HTMLDivElement>();
 	let containerDiv = $state<HTMLDivElement>();
@@ -69,6 +72,7 @@
 
 	let headerHeight = $state(0);
 	let contentHeight = $state(0);
+	const totalHeightRem = $derived(pxToRem(headerHeight + contentHeight, zoom));
 </script>
 
 <div
@@ -157,8 +161,8 @@
 			direction="down"
 			imitateBorder
 			{...resizer}
-			maxHeight={resizer.maxHeight
-				? Math.min(resizer.maxHeight, pxToRem(contentHeight + headerHeight, 1))
+			maxHeight={resizer.maxHeight && resizer.minHeight
+				? Math.min(resizer.maxHeight, Math.max(totalHeightRem, resizer.minHeight))
 				: undefined}
 			passive={resizer.passive}
 		/>
@@ -171,7 +175,7 @@
 		position: relative;
 		flex-direction: column;
 		width: 100%;
-		max-height: calc(100% + 1px);
+		max-height: 100%;
 		overflow: hidden;
 		background-color: var(--clr-bg-1);
 

apps/desktop/src/components/Resizer.svelte

@@ -113,31 +113,19 @@
 		let overflow: number;
 		switch (direction) {
 			case 'down':
-				newValue =
-					minHeight > maxHeight
-						? Math.max(value, minHeight)
-						: Math.min(Math.max(value, minHeight), maxHeight);
+				newValue = Math.min(Math.max(value, minHeight), maxHeight);
 				overflow = minHeight - value;
 				break;
 			case 'up':
-				newValue =
-					minHeight > maxHeight
-						? Math.max(value, minHeight)
-						: Math.min(Math.max(value, minHeight), maxHeight);
+				newValue = Math.min(Math.max(value, minHeight), maxHeight);
 				overflow = minHeight - value;
 				break;
 			case 'right':
-				newValue =
-					minWidth > maxWidth
-						? Math.max(value, minWidth)
-						: Math.min(Math.max(value, minWidth), maxWidth);
+				newValue = Math.min(Math.max(value, minWidth), maxWidth);
 				overflow = minWidth - value;
 				break;
 			case 'left':
-				newValue =
-					minWidth > maxWidth
-						? Math.max(value, minWidth)
-						: Math.min(Math.max(value, minWidth), maxWidth);
+				newValue = Math.min(Math.max(value, minWidth), maxWidth);
 				overflow = minWidth - value;
 				break;
 		}