scale height of creator custom header image in siteBanner

This fixes vertical clipping of the header image when the browser is very wide. See brave/brave-browser#2015.
brave · Jun 18, 2019 · f5304fe · f5304fe
1 parent 7ceda45
commit f5304fe
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -9,6 +9,7 @@ import {
   StyledDonation,
   StyledContent,
   StyledBanner,
+  StyledBannerFiller,
   StyledBannerImage,
   StyledClose,
   StyledContentWrapper,
@@ -263,7 +264,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
@@ -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;