Always show message actions for mobile UI + improvements for user message sizing (#16076)

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte

@@ -50,7 +50,7 @@
 
 <div class="relative {justify === 'start' ? 'mt-2' : ''} flex h-6 items-center justify-{justify}">
 	<div
-		class="flex items-center text-xs text-muted-foreground transition-opacity group-hover:opacity-0"
+		class="hidden items-center text-xs text-muted-foreground transition-opacity md:flex md:group-hover:opacity-0"
 	>
 		{new Date(message.timestamp).toLocaleTimeString(undefined, {
 			hour: '2-digit',
@@ -61,14 +61,14 @@
 	<div
 		class="absolute top-0 {actionsPosition === 'left'
 			? 'left-0'
-			: 'right-0'} flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100"
+			: 'right-0'} flex items-center gap-2 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
 	>
 		{#if siblingInfo && siblingInfo.totalSiblings > 1}
 			<ChatMessageBranchingControls {siblingInfo} {onNavigateToSibling} />
 		{/if}
 
 		<div
-			class="pointer-events-none inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+			class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150 md:pointer-events-none md:opacity-0 md:group-hover:pointer-events-auto md:group-hover:opacity-100"
 		>
 			<ActionButton icon={Copy} tooltip="Copy" onclick={onCopy} />
 

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte

@@ -52,11 +52,38 @@
 		onShowDeleteDialogChange,
 		textareaElement = $bindable()
 	}: Props = $props();
+
+	let isMultiline = $state(false);
+	let messageElement: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (!messageElement || !message.content.trim()) return;
+
+		if (message.content.includes('\n')) {
+			isMultiline = true;
+			return;
+		}
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const element = entry.target as HTMLElement;
+				const estimatedSingleLineHeight = 24; // Typical line height for text-md
+
+				isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
+			}
+		});
+
+		resizeObserver.observe(messageElement);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
 </script>
 
 <div
 	aria-label="User message with actions"
-	class="group flex flex-col items-end gap-2 {className}"
+	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
 	role="group"
 >
 	{#if isEditing}
@@ -92,10 +119,13 @@
 		{/if}
 
 		{#if message.content.trim()}
-			<Card class="max-w-[80%] rounded-2xl bg-primary px-2.5 py-1.5 text-primary-foreground">
-				<div class="text-md whitespace-pre-wrap">
+			<Card
+				class="max-w-[80%] rounded-[1.125rem] bg-primary px-3.75 py-1.5 text-primary-foreground data-[multiline]:py-2.5"
+				data-multiline={isMultiline ? '' : undefined}
+			>
+				<span bind:this={messageElement} class="text-md whitespace-pre-wrap">
 					{message.content}
-				</div>
+				</span>
 			</Card>
 		{/if}
 

tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte

@@ -196,7 +196,7 @@
 
 <style>
 	/* Base typography styles */
-	div :global(p) {
+	div :global(p:not(:last-child)) {
 		margin-bottom: 1rem;
 		line-height: 1.75;
 	}