Fixes brave/brave-browser#10757 - Specifies widget card toggle icon height/width

Author: ryanml

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;
 `

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>
     )
   }