Merge pull request #6097 from brave/fix-10757

Fixes movement inside the more cards NTP settings section when interacting
brave · Jul 17, 2020 · e9e71a7 · e9e71a7
2 parents 3582cbb + 2deca97
commit e9e71a7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts
@@ -335,4 +335,14 @@ export const StyledButtonIcon = styled<{}, 'div'>('div')`
   display: inline-block;
   vertical-align: sub;
   margin-right: 5px;
+  height: 20px;
+  width: 20px;
+`
+
+export const StyledButtonLabel = styled<{}, 'span'>('span')`
+  max-width: 100px;
+  text-overflow: ellipsis;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
 `
diff --git a/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx b/components/brave_new_tab_ui/containers/newTab/settings/moreCards.tsx
@@ -14,7 +14,8 @@ import {
   StyledWidgetToggle,
   SettingsWidget,
   StyledButtonIcon,
-  StyledWidgetSettings
+  StyledWidgetSettings,
+  StyledButtonLabel
 } from '../../../components/default'
 import togetherBanner from './assets/bravetogether.png'
 import binanceBanner from './assets/binance.png'
@@ -55,11 +56,13 @@ class MoreCardsSettings extends React.PureComponent<Props, {}> {
             : <AddIcon />
           }
         </StyledButtonIcon>
-        {
-          on
-          ? getLocale('hideWidget')
-          : getLocale('addWidget')
-        }
+        <StyledButtonLabel>
+          {
+            on
+            ? getLocale('hideWidget')
+            : getLocale('addWidget')
+          }
+        </StyledButtonLabel>
       </StyledWidgetToggle>
     )
   }