From 2deca9743129584a63a9be96f86723956c98531b Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 15 Jul 2020 22:19:37 -0700
Subject: [PATCH] Fixes brave/brave-browser#10757 - Specifies widget card
 toggle icon height/width

---
 .../components/default/settings/index.ts          | 10 ++++++++++
 .../containers/newTab/settings/moreCards.tsx      | 15 +++++++++------
 2 files changed, 19 insertions(+), 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
index 820dafdfbd61..2b5ae3b3f5ac 100644
--- 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
index d836ff5756ad..30ea8d5e6c94 100644
--- 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>
     )
   }