ntp: small style fixes for locales

Author: shakyShane

special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.js

@@ -31,7 +31,7 @@ export function BrowserThemeSection(props) {
                 >
                     <span class="sr-only">{t('customizer_browser_theme_label', { type: 'light' })}</span>
                 </button>
-                {t('customizer_browser_theme_light')}
+                <span>{t('customizer_browser_theme_light')}</span>
             </li>
             <li class={styles.themeItem}>
                 <button
@@ -44,7 +44,7 @@ export function BrowserThemeSection(props) {
                 >
                     <span class="sr-only">{t('customizer_browser_theme_label', { type: 'dark' })}</span>
                 </button>
-                {t('customizer_browser_theme_dark')}
+                <span>{t('customizer_browser_theme_dark')}</span>
             </li>
             <li class={styles.themeItem}>
                 <button
@@ -57,7 +57,7 @@ export function BrowserThemeSection(props) {
                 >
                     <span class="sr-only">{t('customizer_browser_theme_label', { type: 'system' })}</span>
                 </button>
-                {t('customizer_browser_theme_system')}
+                <span>{t('customizer_browser_theme_system')}</span>
             </li>
         </ul>
     );

special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.module.css

@@ -5,9 +5,16 @@
     --chip-size-half: calc(var(--chip-size) / 2);
 }
 .themeItem {
-    display: grid;
-    justify-items: center;
-    grid-row-gap: 4px;
+    width: 42px;
+
+    span {
+        margin-top: 6px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+    }
 }
 .themeButton {
     display: block;

special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css

@@ -18,6 +18,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 6px;
+
+    > * {
+        overflow: hidden;
+    }
 }
 
 .internal {
@@ -30,6 +35,7 @@
     width: 24px;
     height: 24px;
     position: relative;
+    flex-shrink: 0;
 
     color: var(--color-black-at-84);
     background-color: var(--color-black-at-9);
@@ -91,7 +97,6 @@
 .bgListItem {
     display: grid;
     grid-row-gap: 4px;
-    white-space: nowrap;
     position: relative;
 
     &:hover {