From 1b0b9cad9455182bf590a3cb69cc50992b0f6103 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 7 Mar 2022 14:56:56 +0800
Subject: [PATCH] Cleanup ad container css

- Non hardcoded way to reserve space.
- Replace hardcoded margin.
---
 ui/scss/component/_ads.scss | 9 ++-------
 web/component/ads/view.jsx  | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/ui/scss/component/_ads.scss b/ui/scss/component/_ads.scss
index 7f08d5112..ad7f7b38c 100644
--- a/ui/scss/component/_ads.scss
+++ b/ui/scss/component/_ads.scss
@@ -26,11 +26,6 @@
   flex-wrap: wrap;
   width: 100%;
 
-  .ad__container {
-    width: 314px;
-    height: 201px;
-  }
-
   > div,
   ins {
     width: 100%;
@@ -39,7 +34,7 @@
     min-width: 15rem;
   }
 
-  .ads__injected-video {
+  .ad__container {
     aspect-ratio: 16 / 9;
   }
 
@@ -57,7 +52,7 @@
 }
 
 .ads__claim-text {
-  margin-top: 5px;
+  margin-top: var(--spacing-m);
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx
index b57bdebd5..594318bbe 100644
--- a/web/component/ads/view.jsx
+++ b/web/component/ads/view.jsx
@@ -120,7 +120,7 @@ function Ads(props: Props) {
   const videoAd = (
     <div className="ads__claim-item">
       <div className="ad__container">
-        <div id={adConfig.tag} className="ads__injected-video" style={{ display: 'none' }} />
+        <div id={adConfig.tag} style={{ display: 'none' }} />
       </div>
       <div
         className={classnames('ads__claim-text', {