From 0bb14543457a0a1203e85ec9fbd6605a552ea68a Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 27 Oct 2026 16:42:53 +0100
Subject: [PATCH] web,blog,docs: wrap text pretty from body instead of per
 element

Signed-off-by: eti <eti@eti.tf>
---
 blog/src/components/SignupBanner.svelte                 | 2 +-
 blog/src/pages/index.astro                              | 8 ++++----
 blog/src/styles/global.css                              | 7 ++++---
 docs/src/styles/tangled.css                             | 6 ++++--
 web/src/lib/components/profile/StringCardContent.svelte | 2 +-
 web/src/lib/components/repo/RepoCardContent.svelte      | 2 +-
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/blog/src/components/SignupBanner.svelte b/blog/src/components/SignupBanner.svelte
index 634f93448..efe7d42c8 100644
--- a/blog/src/components/SignupBanner.svelte
+++ b/blog/src/components/SignupBanner.svelte
@@ -7,7 +7,7 @@
 
 <Card padding="none" class="relative isolate mt-3xl flex flex-col items-center gap-lg px-lg py-2xl text-center bg-background-subtle/50 dark:bg-background-subtle">
 	<div class="dots" aria-hidden="true"></div>
-	<p class="typography-heading-4 text-pretty"><span class="text-foreground-subtle dark:text-foreground-muted">Your code, your network.</span><br/>Come build with us on Tangled.</p>
+	<p class="typography-heading-4"><span class="text-foreground-subtle dark:text-foreground-muted">Your code, your network.</span><br/>Come build with us on Tangled.</p>
 	<Button variant="primary" href={resolve("/signup")} icon={ArrowRight} iconSide="right">
 		Sign up
 	</Button>
diff --git a/blog/src/pages/index.astro b/blog/src/pages/index.astro
index d857f10ee..1bf2eea56 100644
--- a/blog/src/pages/index.astro
+++ b/blog/src/pages/index.astro
@@ -51,8 +51,8 @@ const jsonLd = {
 						</time>
 					</span>
 					<span class="flex flex-col gap-2xs">
-						<span class="typography-heading-4 leading-tight text-pretty text-foreground-default">{latest.data.title}</span>
-						<span class="typography-paragraph-large leading-tight text-pretty">{latest.data.subtitle}</span>
+						<span class="typography-heading-4 leading-tight text-foreground-default">{latest.data.title}</span>
+						<span class="typography-paragraph-large leading-tight">{latest.data.subtitle}</span>
 					</span>
 				</LayerCardSecondary>
 				{latest.data.image && (
@@ -73,7 +73,7 @@ const jsonLd = {
 						class="flex flex-col gap-xs px-sm py-md transition-colors hover:bg-background-subtle"
 					>
 						<span class="flex items-baseline justify-between gap-md">
-							<span class="typography-paragraph-large leading-tight font-medium text-pretty flex flex-row items-center gap-xs">
+							<span class="typography-paragraph-large leading-tight font-medium flex flex-row items-center gap-xs">
 								{post.data.title}
 								{post.data.draft && <span class="font-normal text-foreground-subtle">· draft</span>}
 							</span>
@@ -84,7 +84,7 @@ const jsonLd = {
 							</span>
 						</span>
 						<span class="flex flex-row justify-between items-center gap-2">
-    						<span class="line-clamp-2 typography-paragraph-large leading-tight text-pretty text-foreground-muted">{post.data.subtitle}</span>
+    						<span class="line-clamp-2 typography-paragraph-large leading-tight text-foreground-muted">{post.data.subtitle}</span>
     						<span class="flex -space-x-1.5">
     							{post.data.authors.map((a) => <Avatar src={avatarSrc(a.handle)} handle={a.handle} size="small" />)}
     						</span>
diff --git a/blog/src/styles/global.css b/blog/src/styles/global.css
index 0933241f1..c2ab022f0 100644
--- a/blog/src/styles/global.css
+++ b/blog/src/styles/global.css
@@ -28,6 +28,7 @@ html {
 
     body {
         @apply flex min-h-screen flex-col bg-background-default typography-paragraph-body text-foreground-default;
+        text-wrap-style: pretty;
     }
 
     a {
@@ -49,7 +50,7 @@ html {
 	   subtitle only greyed */
     .title,
     .lede {
-        @apply typography-heading-2 text-pretty;
+        @apply typography-heading-2;
     }
 
     .lede {
@@ -73,7 +74,7 @@ html {
     }
 
     .post :is(h1, h2, h3, h4, h5, h6) {
-        @apply mt-3xl mb-md text-pretty;
+        @apply mt-3xl mb-md;
     }
 
     .post :is(h1, h2, h3, h4, h5, h6) + * {
@@ -98,7 +99,7 @@ html {
     }
 
     .post :is(p, li, dd, blockquote) {
-        @apply text-pretty wrap-break-word;
+        @apply wrap-break-word;
     }
 
     .post a {
diff --git a/docs/src/styles/tangled.css b/docs/src/styles/tangled.css
index 22fb3d70a..b04fac9e8 100644
--- a/docs/src/styles/tangled.css
+++ b/docs/src/styles/tangled.css
@@ -483,9 +483,7 @@ starlight-menu-button button:focus-visible {
   border-block-end: 0;
 }
 
-/* prose stays left-aligned; just avoid orphans and overlong tokens */
 .markup :is(p, li, dd, blockquote) {
-  text-wrap: pretty;
   overflow-wrap: break-word;
 }
 
@@ -644,3 +642,7 @@ starlight-menu-button button:focus-visible {
   overflow-wrap: normal;
   white-space: nowrap;
 }
+
+body {
+  text-wrap-style: pretty;
+}
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte
index f5b91bb14..5ffcc6032 100644
--- a/web/src/lib/components/profile/StringCardContent.svelte
+++ b/web/src/lib/components/profile/StringCardContent.svelte
@@ -28,7 +28,7 @@
 		{#if layout === "card" && entry.description}
 			<p
 				data-vt="fade"
-				class="line-clamp-2 pr-24 typography-paragraph-small text-pretty text-foreground-muted"
+				class="line-clamp-2 pr-24 typography-paragraph-small text-foreground-muted"
 			>
 				{entry.description}
 			</p>
diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
index 403cb2a64..18d9c09b4 100644
--- a/web/src/lib/components/repo/RepoCardContent.svelte
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -104,7 +104,7 @@
 		<p
 			data-vt="fade"
 			class={[
-				"line-clamp-2 pr-24 typography-paragraph-small text-pretty text-foreground-muted",
+				"line-clamp-2 pr-24 typography-paragraph-small text-foreground-muted",
 				uniformHeight && "min-h-[2lh]"
 			]}
 		>
-- 
2.54.0