Rewards: Imported from brave-ui: scale height of creator custom heade…

…r image in siteBanner This fixes vertical clipping of the header image when the browser is very wide. See brave/brave-browser#2015.
brave · Sep 19, 2019 · 2596d86 · 2596d86
1 parent b8ea407
commit 2596d86
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/components/brave_rewards/resources/ui/components/siteBanner/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/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/components/brave_rewards/resources/ui/components/siteBanner/index.tsx b/components/brave_rewards/resources/ui/components/siteBanner/index.tsx
@@ -9,6 +9,7 @@ import {
   StyledDonation,
   StyledContent,
   StyledBanner,
+  StyledBannerFiller,
   StyledBannerImage,
   StyledClose,
   StyledContentWrapper,
@@ -269,7 +270,7 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
             {
               !bgImage
               ? this.getBannerImageContent(name, screenName, domain, provider)
-              : null
+              : <StyledBannerFiller />
             }
           </StyledBannerImage>
           <StyledContentWrapper>

diff --git a/components/brave_rewards/resources/ui/components/siteBanner/style.ts b/components/brave_rewards/resources/ui/components/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;