fix(css): enforce explicit layout limits via tailwind utilities across all container blocks
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🚀 Deploy (push) Successful in 26s
Build & Deploy / 🧪 QA (push) Successful in 1m22s
Build & Deploy / 🏗️ Build (push) Successful in 2m48s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 56s
Build & Deploy / 🔔 Notify (push) Successful in 3s

This commit is contained in:
2026-07-10 20:31:00 +02:00
parent 0ed28915cc
commit 0f95f09711
7 changed files with 32 additions and 18 deletions

View File

@@ -3,18 +3,32 @@
@config "../tailwind.config.cjs";
/* Fix for Tailwind v4 missing container center & padding */
@layer components {
.container {
width: 100%;
margin-inline: auto !important;
padding-inline: 1rem;
/* Tailwind v4 Container Polyfill */
@utility container {
width: 100%;
margin-inline: auto !important;
padding-inline: 1rem;
@media (min-width: 640px) {
max-width: 640px;
padding-inline: 1.5rem;
}
@media (min-width: 768px) {
max-width: 768px;
padding-inline: 2rem;
}
@media (min-width: 1024px) {
max-width: 1024px;
padding-inline: 2.5rem;
}
@media (min-width: 1280px) {
max-width: 1280px;
padding-inline: 3rem;
}
@media (min-width: 1536px) {
max-width: 1536px;
padding-inline: 4rem;
}
@media (width >= 640px) { .container { max-width: 640px; padding-inline: 1.5rem; } }
@media (width >= 768px) { .container { max-width: 768px; padding-inline: 2rem; } }
@media (width >= 1024px) { .container { max-width: 1024px; padding-inline: 2.5rem; } }
@media (width >= 1280px) { .container { max-width: 1280px; padding-inline: 3rem; } }
@media (width >= 1536px) { .container { max-width: 1536px; padding-inline: 4rem; } }
}
/* E-TIB Custom Utilities */