From e27d2b8b512e3942cb35c20da86a8e7be12e18c8 Mon Sep 17 00:00:00 2001
From: Florian Dieminger <me@fiji-flo.de>
Date: Tue, 2 Jul 2024 00:12:31 +0200
Subject: [PATCH] fix(pong): remove div/p (#11393)

* fix(pong): remove div/p

Remove an unnecessary p and resolve an
invalid DOM nesting issue.

* fix height if not inherited
---
 client/src/playground/index.scss             |  44 +++---
 client/src/ui/organisms/placement/index.scss | 134 +++++++++----------
 client/src/ui/organisms/placement/index.tsx  |  68 +++++-----
 3 files changed, 118 insertions(+), 128 deletions(-)

diff --git a/client/src/playground/index.scss b/client/src/playground/index.scss
index 663f01493987..82bd16faf519 100644
--- a/client/src/playground/index.scss
+++ b/client/src/playground/index.scss
@@ -242,34 +242,28 @@ main.play {
               min-height: 0;
               width: 25rem;
 
-              > div {
-                .pong-cta {
-                  margin: 0.5rem auto 1rem 1rem;
-                }
+              .pong-cta {
+                margin: 0.5rem auto 1rem 1rem;
+              }
+
+              .pong-note {
+                margin: 0.5rem 0.5rem auto auto;
+              }
 
-                .pong-note {
-                  margin: 0.5rem 0.5rem auto auto;
+              .pong {
+                > img {
+                  height: 100%;
+                  width: auto;
                 }
 
-                .pong {
-                  > img {
-                    height: 100%;
-                    width: auto;
-                  }
-
-                  > div.content {
-                    align-items: end;
-                    background: linear-gradient(
-                      to left,
-                      #111 16rem,
-                      transparent
-                    );
-                    flex-direction: column;
-                    height: 100%;
-                    justify-content: end;
-                    padding-left: 8rem;
-                    width: 100%;
-                  }
+                > div.content {
+                  align-items: end;
+                  background: linear-gradient(to left, #111 16rem, transparent);
+                  flex-direction: column;
+                  height: 100%;
+                  justify-content: end;
+                  padding-left: 8rem;
+                  width: 100%;
                 }
               }
             }
diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
index 21eb8d018e22..1cdec194babe 100644
--- a/client/src/ui/organisms/placement/index.scss
+++ b/client/src/ui/organisms/placement/index.scss
@@ -14,93 +14,89 @@ section.place {
     --border-radius: 0.5rem;
     border: 1px solid var(--border-primary);
     border-radius: var(--border-radius);
+    height: 100%;
     margin: 0;
     min-height: 20rem;
     overflow: hidden;
     position: relative;
     width: 11rem;
 
-    > div {
+    .pong-note {
+      background-color: #fff6;
+      border-radius: 0.25rem;
+      color: #fff;
+      font-size: 0.625rem;
+      margin: 0.5rem;
+      padding: 0 0.25rem;
+      position: absolute;
+      right: 0;
+      text-decoration: none;
+      text-decoration: underline;
+      text-transform: uppercase;
+      top: 0;
+      width: max-content;
+
+      &:hover {
+        background-color: #fff;
+        color: #111;
+      }
+    }
+
+    .pong {
       height: 100%;
+      padding: 0;
       width: 100%;
 
-      .pong-note {
-        background-color: #fff6;
-        border-radius: 0.25rem;
-        color: #fff;
-        font-size: 0.625rem;
-        margin: 0.5rem;
-        padding: 0 0.25rem;
-        position: absolute;
-        right: 0;
-        text-decoration: none;
-        text-decoration: underline;
-        text-transform: uppercase;
-        top: 0;
-        width: max-content;
-
-        &:hover {
-          background-color: #fff;
-          color: #111;
-        }
+      > img {
+        height: auto;
+        width: 100%;
       }
 
-      .pong {
+      > div.content {
+        background: linear-gradient(to top, #111 9rem, transparent);
+        border-radius: var(--border-radius);
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
         height: 100%;
-        padding: 0;
+        justify-content: end;
+        position: absolute;
+        top: 0;
         width: 100%;
 
-        > img {
-          height: auto;
-          width: 100%;
+        strong {
+          font-size: 0.8875rem;
+          line-height: 1.25;
+          padding: 0 1rem;
         }
 
-        > div.content {
-          background: linear-gradient(to top, #111 9rem, transparent);
-          border-radius: var(--border-radius);
-          color: #fff;
-          display: flex;
-          flex-direction: column;
-          gap: 0.25rem;
-          height: 100%;
-          justify-content: end;
-          position: absolute;
-          top: 0;
-          width: 100%;
-
-          strong {
-            font-size: 0.8875rem;
-            line-height: 1.25;
-            padding: 0 1rem;
-          }
-
-          span {
-            font-size: 0.75rem;
-            line-height: 1.25;
-            padding: 0 1rem;
-          }
+        span {
+          font-size: 0.75rem;
+          line-height: 1.25;
+          padding: 0 1rem;
+        }
 
-          .pong-cta {
-            --color: #fff;
-            --icon-primary: var(--color);
-            background-color: #fff1;
-            border: solid 2px;
-            border-radius: 2rem;
-            color: var(--color);
-            font-size: 0.75rem;
-            font-weight: 600;
-            margin: 0.5rem auto 1rem 1rem;
-            padding: 0.5em 1em;
+        .pong-cta {
+          --color: #fff;
+          --icon-primary: var(--color);
+          background-color: #fff1;
+          border: solid 2px;
+          border-radius: 2rem;
+          color: var(--color);
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin: 0.5rem auto 1rem 1rem;
+          padding: 0.5em 1em;
+          transition: all 0.3s ease-in-out;
+
+          &::after {
             transition: all 0.3s ease-in-out;
+          }
 
-            &::after {
-              transition: all 0.3s ease-in-out;
-            }
-
-            &:hover {
-              --color: #111;
-              background-color: #fff;
-            }
+          &:hover {
+            --color: #111;
+            background-color: #fff;
           }
         }
       }
@@ -175,11 +171,13 @@ section.place {
 
   &.side {
     flex-direction: column;
+    height: fit-content;
     max-width: 12rem;
     min-height: 20rem;
   }
 
   &.new-side {
+    height: fit-content;
     min-height: 22rem;
   }
 
diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
index 557961ee629e..5ca0a9ef5bed 100644
--- a/client/src/ui/organisms/placement/index.tsx
+++ b/client/src/ui/organisms/placement/index.tsx
@@ -515,41 +515,39 @@ function RenderNewSideBanner({
       className={["place", ...extraClassNames].join(" ")}
       style={style}
     >
-      <p className="pong-box2">
-        <div>
-          <a
-            className="pong"
-            data-glean={`pong: pong->click ${typ}`}
-            href={`/pong/click?code=${encodeURIComponent(
-              click
-            )}&version=${version}`}
-            target="_blank"
-            rel="sponsored noreferrer"
-          >
-            <img
-              src={`/pimg/${encodeURIComponent(image || "")}`}
-              aria-hidden={!Boolean(alt)}
-              alt={alt || ""}
-              width={imageWidth}
-              height={imageHeight}
-            ></img>
-            <div className="content">
-              <strong>{heading}</strong>
-              <span>{copy}</span>
-              {cta && <span className="pong-cta external">{cta}</span>}
-            </div>
-          </a>
-          <a
-            href="/en-US/advertising"
-            className="pong-note"
-            data-glean="pong: pong->about"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Ad
-          </a>
-        </div>
-      </p>
+      <div className="pong-box2">
+        <a
+          className="pong"
+          data-glean={`pong: pong->click ${typ}`}
+          href={`/pong/click?code=${encodeURIComponent(
+            click
+          )}&version=${version}`}
+          target="_blank"
+          rel="sponsored noreferrer"
+        >
+          <img
+            src={`/pimg/${encodeURIComponent(image || "")}`}
+            aria-hidden={!Boolean(alt)}
+            alt={alt || ""}
+            width={imageWidth}
+            height={imageHeight}
+          ></img>
+          <div className="content">
+            <strong>{heading}</strong>
+            <span>{copy}</span>
+            {cta && <span className="pong-cta external">{cta}</span>}
+          </div>
+        </a>
+        <a
+          href="/en-US/advertising"
+          className="pong-note"
+          data-glean="pong: pong->about"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Ad
+        </a>
+      </div>
 
       <a
         className="no-pong"