LGCC
/
cdrdpyj
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix responsive text wrapping in values section titles 

Replace break-all (which sliced words at arbitrary characters) with
word-aware wrapping, add missing min-w-0 that let one grid column
overflow, and tune the title font-size breakpoints so headings never
fracture mid-word in the tight column widths between lg and 2xl.
This commit is contained in:
David Ascanio 2026-08-02 13:45:42 -03:00
parent b63ca6089e
commit 34230624ce
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/section/ColumnsSection.astro
View File

@ -9,17 +9,17 @@ const { props } = Astro.props;
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid md:grid-cols-2 min-w-0"> <div class="grid md:grid-cols-2 min-w-0">
<div class="bg-[#EBE5D0] p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0"> <div class="bg-[#EBE5D0] p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0">
<div class="flex flex-col justify-between min-h-full break-all"> <div class="flex flex-col justify-between min-h-full min-w-0">
<h2 class="text-5xl font-secondary text-tertiary font-bold">{tl("values.justice.title")}</h2> <h2 class="text-3xl lg:text-2xl xl:text-3xl 2xl:text-5xl font-secondary text-tertiary font-bold wrap-break-word">{tl("values.justice.title")}</h2>
<p class="text-lg text-tertiary break-words">{tl("values.justice.text")}</p> <p class="text-lg text-tertiary break-words">{tl("values.justice.text")}</p>
</div> </div>
<div class="flex items-end justify-end min-h-full"> <div class="flex items-end justify-end min-h-full min-w-0 max-w-full">
<Icon name="icon_justice_1" class="text-6xl md:text-9xl text-tertiary" /> <Icon name="icon_justice_1" class="text-6xl md:text-9xl text-tertiary max-w-full h-auto" />
</div> </div>
</div> </div>
<div class="bg-tertiary p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0"> <div class="bg-tertiary p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0">
<div class="flex flex-col justify-between min-h-full min-w-0 max-w-full"> <div class="flex flex-col justify-between min-h-full min-w-0 max-w-full">
<h2 class="text-5xl font-secondary font-bold text-[#CBA16A] break-all">{tl("values.integrity.title")}</h2> <h2 class="text-3xl lg:text-2xl xl:text-3xl 2xl:text-5xl font-secondary font-bold text-[#CBA16A] wrap-break-word">{tl("values.integrity.title")}</h2>
<p class="text-[#CBA16A] text-lg break-words">{tl("values.integrity.text")}</p> <p class="text-[#CBA16A] text-lg break-words">{tl("values.integrity.text")}</p>
</div> </div>
<div class="flex items-end justify-end min-h-full min-w-0 max-w-full"> <div class="flex items-end justify-end min-h-full min-w-0 max-w-full">
@ -28,17 +28,17 @@ const { props } = Astro.props;
</div> </div>
</div> </div>
<div class="grid lg:grid-cols-3"> <div class="grid lg:grid-cols-3">
<div class="bg-tertiary p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square"> <div class="bg-tertiary p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square min-w-0">
<h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">{tl("values.service.title")}</h2> <h2 class="text-3xl 2xl:text-5xl font-secondary font-bold text-white wrap-break-word">{tl("values.service.title")}</h2>
<p class="text-xl text-[#EBE5D0]">{tl("values.service.text")}</p> <p class="text-xl text-[#EBE5D0] wrap-break-word">{tl("values.service.text")}</p>
</div> </div>
<div class="bg-[#BEA48D] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square"> <div class="bg-[#BEA48D] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square min-w-0">
<h2 class="text-3xl xl:text-5xl font-secondary font-bold text-tertiary">{tl("values.excellence.title")}</h2> <h2 class="text-3xl 2xl:text-5xl font-secondary font-bold text-tertiary wrap-break-word">{tl("values.excellence.title")}</h2>
<p class="text-xl text-tertiary">{tl("values.excellence.text")}</p> <p class="text-xl text-tertiary wrap-break-word">{tl("values.excellence.text")}</p>
</div> </div>
<div class="bg-[#22523F] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square"> <div class="bg-[#22523F] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square min-w-0">
<h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">{tl("values.dialogue.title")}</h2> <h2 class="text-3xl 2xl:text-5xl font-secondary font-bold text-white wrap-break-word">{tl("values.dialogue.title")}</h2>
<p class="text-white text-xl">{tl("values.dialogue.text")}</p> <p class="text-white text-xl wrap-break-word">{tl("values.dialogue.text")}</p>
</div> </div>
</div> </div>
</div> </div>