From 455524d5375d8aa8e677324b3b66d4f160b87b93 Mon Sep 17 00:00:00 2001
From: Christopher Cooper <ccooper@brave.com>
Date: Wed, 29 May 2019 15:13:09 -0700
Subject: [PATCH] scale height of creator custom header image in siteBanner

This fixes vertical clipping of the header image when the browser is
very wide.

Resolves brave/brave-browser#2015.
---
 .../rewards/siteBanner/__snapshots__/spec.tsx.snap        | 3 ++-
 src/features/rewards/siteBanner/index.tsx                 | 3 ++-
 src/features/rewards/siteBanner/style.ts                  | 8 +++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap b/src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap
index cbe78cf20..f6e5e1d75 100644
--- a/src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap
+++ b/src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap
@@ -88,7 +88,8 @@ exports[`List tests basic tests matches the snapshot 1`] = `
   font-weight: 600;
   line-height: 0.74;
   color: #d1d1db;
-  height: 176px;
+  min-height: 176px;
+  overflow: hidden;
   background: url(test-file-stub) no-repeat top left,url(test-file-stub) no-repeat top right,#9e9fab;
 }
 
diff --git a/src/features/rewards/siteBanner/index.tsx b/src/features/rewards/siteBanner/index.tsx
index 8b8d986c6..dc0d2140a 100644
--- a/src/features/rewards/siteBanner/index.tsx
+++ b/src/features/rewards/siteBanner/index.tsx
@@ -9,6 +9,7 @@ import {
   StyledDonation,
   StyledContent,
   StyledBanner,
+  StyledBannerFiller,
   StyledBannerImage,
   StyledClose,
   StyledContentWrapper,
@@ -255,7 +256,7 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
             {
               !bgImage
               ? this.getBannerImageContent(name, screenName, domain, provider)
-              : null
+              : <StyledBannerFiller />
             }
           </StyledBannerImage>
           <StyledContentWrapper>
diff --git a/src/features/rewards/siteBanner/style.ts b/src/features/rewards/siteBanner/style.ts
index d01f5f87b..111962155 100644
--- a/src/features/rewards/siteBanner/style.ts
+++ b/src/features/rewards/siteBanner/style.ts
@@ -60,13 +60,19 @@ export const StyledBannerImage = styled<Partial<Props>, 'div'>('div')`
   font-weight: 600;
   line-height: 0.74;
   color: #d1d1db;
-  height: 176px;
+  min-height: 176px;
+  overflow: hidden;
   background: ${p => p.bgImage
     ? `url(${p.bgImage}) no-repeat top center / cover`
     : `url(${bg1Url}) no-repeat top left, url(${bg2Url}) no-repeat top right, #9e9fab`
   };
 `
 
+// 900:176 is the aspect ratio for banner images.
+export const StyledBannerFiller = styled<{}, 'div'>('div')`
+  padding-top: calc(176 / 900 * 100%);
+`
+
 export const StyledClose = styled<{}, 'button'>('button')`
   top: 16px;
   right: 16px;