fix: long banner messages get cut off (argoproj#7264)

Signed-off-by: Regina Scott <[email protected]>
dajudge · Sep 27, 2021 · eb2c69d · eb2c69d
1 parent 65012f5
commit eb2c69d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/ui/src/app/ui-banner/ui-banner.scss b/ui/src/app/ui-banner/ui-banner.scss
@@ -15,6 +15,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
+ padding: 5px 10px 5px 70px;
 
  a {
  text-decoration: underline;
@@ -28,3 +29,13 @@
  }
  }
 }
+
+.ui-banner-text {
+ margin-right: 15px;
+ overflow-y: auto;
+ max-height: 50px;
+}
+
+.ui-banner-button {
+ line-height: 1.1;
+}
diff --git a/ui/src/app/ui-banner/ui-banner.tsx b/ui/src/app/ui-banner/ui-banner.tsx
@@ -32,7 +32,7 @@ export const Banner = (props: React.Props<any>) => {
  return (
  <React.Fragment>
  <div className='ui-banner' style={{visibility: show ? 'visible' : 'hidden'}}>
- <div style={{marginRight: '15px'}}>
+ <div className='ui-banner-text'>
  {url !== undefined ? (
  <a href={url} target='_blank' rel='noopener noreferrer'>
  {content}
@@ -41,10 +41,12 @@ export const Banner = (props: React.Props<any>) => {
  <React.Fragment>{content}</React.Fragment>
  )}
  </div>
- <button className='argo-button argo-button--base' style={{marginRight: '5px'}} onClick={() => setVisible(false)}>
+ <button className='ui-banner-button argo-button argo-button--base' style={{marginRight: '5px'}} onClick={() => setVisible(false)}>
  Dismiss for now
  </button>
- <button className='argo-button argo-button--base' onClick={() => services.viewPreferences.updatePreferences({...prefs, hideBannerContent: content})}>
+ <button
+ className='ui-banner-button argo-button argo-button--base'
+ onClick={() => services.viewPreferences.updatePreferences({...prefs, hideBannerContent: content})}>
  Don't show again
  </button>
  </div>