Skip to content

Commit b350598

Browse files
committed
style: reduce spacing between thinking block and prose on mobile
- Add mobile-specific margin/padding reductions to BlockWrapper - Reset first-child margin in prose div after thinking blocks - Use max-sm variants to tighten spacing on small screens https://claude.ai/code/session_014uDue4fXGx4p1MLUDzufvu
1 parent 7300f0a commit b350598

File tree

2 files changed

+5
-3
lines changed

2 files changed

+5
-3
lines changed

src/lib/components/chat/BlockWrapper.svelte

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
}: Props = $props();
2121
</script>
2222

23-
<div class="group flex gap-2 has-[+.prose]:mb-1.5 [.prose+&]:mt-3">
23+
<div
24+
class="group flex gap-2 has-[+.prose]:mb-1.5 has-[+.prose]:max-sm:mb-0.5 [.prose+&]:mt-3 [.prose+&]:max-sm:mt-1"
25+
>
2426
<!-- Left column: icon + connector line -->
2527
<div class="flex w-[22px] flex-shrink-0 flex-col items-center">
2628
<div
@@ -53,7 +55,7 @@
5355
</div>
5456

5557
<!-- Right column: content -->
56-
<div class="min-w-0 flex-1 pb-2 pt-px">
58+
<div class="min-w-0 flex-1 pb-2 pt-px max-sm:pb-1">
5759
{@render children()}
5860
</div>
5961
</div>

src/lib/components/chat/ChatMessage.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@
304304
/>
305305
{:else if part && part.trim().length > 0}
306306
<div
307-
class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:cursor-pointer prose-img:rounded-lg dark:prose-pre:bg-gray-900"
307+
class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:cursor-pointer prose-img:rounded-lg dark:prose-pre:bg-gray-900 [&>:first-child]:mt-0"
308308
>
309309
<MarkdownRenderer content={part} loading={isLast && loading} />
310310
</div>

0 commit comments

Comments
 (0)