From 40dd2233936ddfd3d470962e1a9f0aad1fb78028 Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Wed, 25 Feb 2026 12:41:56 -0500
Subject: [PATCH] Fix sr-only text leaking visually in template builder

The page.vue component uses container-type: size for CSS container
queries. This containment context interferes with the clip: rect(0,0,0,0)
technique used by Tailwind's sr-only class, causing the hidden page text
to render visually below the PDF image.

Replace sr-only class with position: absolute; left: -9999px off-screen
technique which is robust against CSS containment contexts.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/template_builder/page.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index c732f6cc..c2040393 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -17,7 +17,7 @@
     >
     <div
       v-if="pageText"
-      class="sr-only"
+      style="position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;"
       :aria-label="`Page ${number + 1} text content`"
     >
       {{ pageText }}