From b0c1c7b631da20f129c6e643edd5dc67d64616e4 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 30 Jun 2026 13:13:39 +0200
Subject: [PATCH 1/3] fix: scale template overview title to avoid line wrap

The overview title was fixed at 32px and wrapped onto multiple lines for
long template names. Add a `prose-value-big-fit` utility that scales the
monospace title down by character count (via a container query) between
16px and 32px, and stack the template ID below the name instead of beside it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../templates/detail/overview/template-section.tsx  |  9 ++++++---
 src/styles/theme.css                                | 13 +++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/features/dashboard/templates/detail/overview/template-section.tsx b/src/features/dashboard/templates/detail/overview/template-section.tsx
index e3882c326..ac2f19b47 100644
--- a/src/features/dashboard/templates/detail/overview/template-section.tsx
+++ b/src/features/dashboard/templates/detail/overview/template-section.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 import type { TemplateDetail } from '@/core/modules/templates/models'
 import { getTemplateDisplayName } from '@/features/dashboard/templates/helpers'
 import { useClipboard } from '@/lib/hooks/use-clipboard'
@@ -35,8 +35,11 @@ export function TemplateSection({ template, teamSlug }: TemplateSectionProps) {
 
   return (
     <OverviewSection label="Template" divider={false}>
-      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
-        <h2 className="prose-value-big font-mono uppercase tracking-tight break-all">
+      <div className="@container flex flex-col gap-1">
+        <h2
+          style={{ '--char-count': displayName.length } as CSSProperties}
+          className="prose-value-big-fit font-mono uppercase tracking-tight break-all"
+        >
           {displayName}
         </h2>
         <TemplateIdCopy templateID={template.templateID} />
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 67d639654..73351b0ae 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -591,6 +591,19 @@
   font-weight: 700 !important;
 }
 
+/* Scales a monospace value down by character count to fit its container's
+ * inline size, avoiding line wrap. Requires `--char-count` and a container
+ * query context (e.g. Tailwind's `@container`). 0.6 ≈ glyph advance per em. */
+@utility prose-value-big-fit {
+  font-size: clamp(
+    1rem,
+    calc(100cqi / (var(--char-count, 1) * 0.6)),
+    2rem
+  ) !important;
+  line-height: 1.1 !important;
+  font-weight: 700 !important;
+}
+
 /* Loader utilities */
 @utility loader {
   display: inline-flex;

From 042ec60c873f2ff77b49bc8997795a146b91b390 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Tue, 30 Jun 2026 13:29:20 +0200
Subject: [PATCH 2/3] fix: lower template title min font size to 15px

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/styles/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/theme.css b/src/styles/theme.css
index 73351b0ae..197762e6f 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -596,7 +596,7 @@
  * query context (e.g. Tailwind's `@container`). 0.6 ≈ glyph advance per em. */
 @utility prose-value-big-fit {
   font-size: clamp(
-    1rem,
+    0.9375rem,
     calc(100cqi / (var(--char-count, 1) * 0.6)),
     2rem
   ) !important;

From 172abb5de5fda47c45dcc66eca7513c3f5efcbb7 Mon Sep 17 00:00:00 2001
From: Alex Drankou <alex@e2b.dev>
Date: Wed, 1 Jul 2026 11:01:13 +0200
Subject: [PATCH 3/3] fix: stack template overview skeleton header to match
 loaded layout

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/features/dashboard/templates/detail/overview/skeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/dashboard/templates/detail/overview/skeleton.tsx b/src/features/dashboard/templates/detail/overview/skeleton.tsx
index 40f49fbf8..f3ae0f5b7 100644
--- a/src/features/dashboard/templates/detail/overview/skeleton.tsx
+++ b/src/features/dashboard/templates/detail/overview/skeleton.tsx
@@ -5,7 +5,7 @@ export function TemplateOverviewSkeleton() {
   return (
     <div className="flex flex-col gap-8">
       <OverviewSection label="Template" divider={false}>
-        <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
+        <div className="flex flex-col gap-1">
           <Skeleton className="h-8 w-40" />
           <Skeleton className="h-5 w-56" />
         </div>