From 5ac05a64e5bc0e68f296cfdf2dd0c0c96b47a2c4 Mon Sep 17 00:00:00 2001
From: Kirill Langer <kirilllanger@Kirills-MacBook-Pro.local>
Date: Thu, 21 May 2026 07:18:45 -0600
Subject: [PATCH] Constrain blueprint slug text

---
 src/app/components/BlueprintTitle.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/app/components/BlueprintTitle.tsx b/src/app/components/BlueprintTitle.tsx
index e8139704..50693e9c 100644
--- a/src/app/components/BlueprintTitle.tsx
+++ b/src/app/components/BlueprintTitle.tsx
@@ -41,12 +41,14 @@ export const BlueprintTitle = ({
   };
 
   return (
-    <div className="rounded-3xl border border-grey-200 bg-[#FFFFFF] p-6 shadow-sm">
-      <div className="mb-1 flex w-full items-center gap-2 justify-between">
-        <div className="flex-1 flex items-center gap-2 min-w-0">
-          <h2 className="text-xl font-bold text-grey-900 break-words text-wrap truncate">{blueprint.props.title}</h2>
+    <div className="w-full min-w-0 rounded-3xl border border-grey-200 bg-[#FFFFFF] p-6 shadow-sm">
+      <div className="mb-1 flex w-full items-center justify-between gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <h2 className="truncate text-wrap break-words text-xl font-bold text-grey-900">
+            {blueprint.props.title}
+          </h2>
         </div>
-        <div className="flex items-center gap-3 text-sm flex-shrink-0">
+        <div className="flex flex-shrink-0 items-center gap-3 text-sm">
           <span className="flex flex-row items-center gap-1 rounded-lg px-2 py-1 font-medium text-grey-800">
             <Image width={16} height={16} src="/assets/Users.svg" alt="views" />
             {blueprint.props.totalProofs}
@@ -71,8 +73,13 @@ export const BlueprintTitle = ({
       </div>
 
       <div className="mb-5 space-y-3">
-        <p className="text-sm font-medium text-grey-700">{blueprint.props.slug}</p>
-        <p className="text-sm text-grey-800 break-words text-wrap">{blueprint.props.description}</p>
+        <p
+          className="min-w-0 max-w-full break-words text-sm font-medium text-grey-700 [overflow-wrap:anywhere]"
+          title={blueprint.props.slug}
+        >
+          {blueprint.props.slug}
+        </p>
+        <p className="text-wrap break-words text-sm text-grey-800">{blueprint.props.description}</p>
 
         {blueprint.props.decomposedRegexes?.length > 0 && (
           <div className="flex flex-wrap items-center gap-2">