From 90ab2ddb9f2f6c33b843fe8171472c10a59cb2f4 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adjohnso@redhat.com>
Date: Sun, 8 Sep 2024 01:09:37 -0400
Subject: [PATCH] docs(logo-wall): use container queries, fix overflow (#1800)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>
Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 .../patterns/logo-wall/logo-wall-lightdom.css | 39 +++++++------
 .../logo-wall/patterns/1x1-grid-flat.html     | 56 ++++++++++---------
 .../patterns/logo-wall/patterns/1x1-grid.html | 54 +++++++++---------
 .../patterns/logo-wall/patterns/2x2-grid.html | 36 ++++++------
 .../patterns/logo-wall/patterns/2x3-grid.html | 52 ++++++++---------
 5 files changed, 124 insertions(+), 113 deletions(-)

diff --git a/docs/patterns/logo-wall/logo-wall-lightdom.css b/docs/patterns/logo-wall/logo-wall-lightdom.css
index d618b48d78..e59d12e902 100644
--- a/docs/patterns/logo-wall/logo-wall-lightdom.css
+++ b/docs/patterns/logo-wall/logo-wall-lightdom.css
@@ -1,12 +1,18 @@
 :root {
+  --logo-wall-container-max-width: 1070px;
   --logo-wall-logo-max-height: 40px;
   --logo-wall-logo-min-height: 40px;
   --logo-wall-logo-max-width: 190px;
   --logo-wall-logo-min-width: 130px;
 }
 
+.logo-wall-container {
+  container: logo-wall-container / inline-size;
+}
+
 .logo-wall {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--rh-space-2xl, 32px);
   justify-content: center;
 }
@@ -80,36 +86,33 @@
   outline-offset: 0;
 }
 
-.logo-wall--two-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
+.logo-wall--two-columns,
 .logo-wall--three-columns {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
 }
 
-@media (max-width: 1199px) {
-  .logo-wall {
-    flex-wrap: wrap;
+@container logo-wall-container (min-width: 300px) {
+  .logo-wall--two-columns,
+  .logo-wall--three-columns {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@container host (max-width: 992px) {
-  .logo-wall {
-    flex-wrap: wrap;
+@container logo-wall-container (min-width: 450px) {
+  .logo-wall--three-columns {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (max-width: 768px) {
-  .logo-wall--three-columns {
-    grid-template-columns: repeat(auto-fill, minmax(var(--logo-wall-logo-min-width), 1fr)) !important;
+@container logo-wall-container (min-width: 992px) {
+  .logo-wall {
+    flex-wrap: nowrap;
+    max-width: var(--logo-wall-container-max-width, 1070px);
   }
 }
 
-@container host (max-width: 768px) {
-  .logo-wall--three-columns {
-    grid-template-columns: repeat(auto-fill, minmax(var(--logo-wall-logo-min-width), 1fr)) !important;
+@container logo-wall-container (min-width: 1200px) {
+  .logo-wall {
+    max-width: none;
   }
 }
diff --git a/docs/patterns/logo-wall/patterns/1x1-grid-flat.html b/docs/patterns/logo-wall/patterns/1x1-grid-flat.html
index d120aa3255..e54baf8d7a 100644
--- a/docs/patterns/logo-wall/patterns/1x1-grid-flat.html
+++ b/docs/patterns/logo-wall/patterns/1x1-grid-flat.html
@@ -1,33 +1,35 @@
 <div class="example-1x1-grid-flat">
   <h6>Organizations succeeding with Red Hat</h6>
-  <div class="logo-wall logo-wall--borderless">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
-    <a href="#">
-      <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
-      <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
-    </a>
-    <a href="#">
-      <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
-      <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--borderless">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+      <a href="#">
+        <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
+        <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
+      </a>
+      <a href="#">
+        <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
+        <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
+      </a>
+    </div>
+    <rh-cta href="#">See all customer stories</rh-cta>
+    </div>
   </div>
-  <rh-cta href="#">See all customer stories</rh-cta>
-</div>
 
 <link rel="stylesheet" href="../logo-wall-lightdom.css">
 
diff --git a/docs/patterns/logo-wall/patterns/1x1-grid.html b/docs/patterns/logo-wall/patterns/1x1-grid.html
index 2bd66f2b58..d57a4589d6 100644
--- a/docs/patterns/logo-wall/patterns/1x1-grid.html
+++ b/docs/patterns/logo-wall/patterns/1x1-grid.html
@@ -1,32 +1,34 @@
 <div class="example-1x1-grid">
   <h6>Organizations succeeding with Red Hat</h6>
-  <div class="logo-wall logo-wall--bordered">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
-    <a href="#">
-      <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
-      <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
-    </a>
-    <a href="#">
-      <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
-      <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--bordered">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+      <a href="#">
+        <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
+        <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
+      </a>
+      <a href="#">
+        <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
+        <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
+      </a>
+    </div>
+    <rh-cta href="#">See all customer stories</rh-cta>
   </div>
-  <rh-cta href="#">See all customer stories</rh-cta>
 </div>
 
 <link rel="stylesheet" href="../logo-wall-lightdom.css">
diff --git a/docs/patterns/logo-wall/patterns/2x2-grid.html b/docs/patterns/logo-wall/patterns/2x2-grid.html
index c5a324661b..710dff9b3b 100644
--- a/docs/patterns/logo-wall/patterns/2x2-grid.html
+++ b/docs/patterns/logo-wall/patterns/2x2-grid.html
@@ -4,23 +4,25 @@ <h4>Need a business partner?</h4>
     <p>In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. </p>
     <rh-cta variant="primary" href="#">Find a business partner</rh-cta>
   </div>
-  <div class="logo-wall logo-wall--two-columns logo-wall--bordered">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--two-columns logo-wall--bordered">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+    </div>
   </div>
 </div>
 
diff --git a/docs/patterns/logo-wall/patterns/2x3-grid.html b/docs/patterns/logo-wall/patterns/2x3-grid.html
index de36538d2d..62f04f870c 100644
--- a/docs/patterns/logo-wall/patterns/2x3-grid.html
+++ b/docs/patterns/logo-wall/patterns/2x3-grid.html
@@ -4,31 +4,33 @@ <h4>Need a business partner?</h4>
     <p>In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. </p>
     <rh-cta variant="primary" href="#">Find a business partner</rh-cta>
   </div>
-  <div class="logo-wall logo-wall--three-columns logo-wall--bordered">
-    <a href="#">
-      <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
-      <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
-    </a>
-    <a href="#">
-      <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
-      <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
-    </a>
-    <a href="#">
-      <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
-      <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
-    </a>
-    <a href="#">
-      <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
-      <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
-    </a>
-    <a href="#">
-      <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
-      <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
-    </a>
-    <a href="#">
-      <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
-      <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
-    </a>
+  <div class="logo-wall-container">
+    <div class="logo-wall logo-wall--three-columns logo-wall--bordered">
+      <a href="#">
+        <img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
+        <img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
+      </a>
+      <a href="#">
+        <img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
+        <img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
+      </a>
+      <a href="#">
+        <img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
+        <img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
+      </a>
+      <a href="#">
+        <img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
+        <img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
+      </a>
+      <a href="#">
+        <img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
+        <img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
+      </a>
+      <a href="#">
+        <img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
+        <img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
+      </a>
+    </div>
   </div>
 </div>