fix(language-selector): add ellipsis to buttons, closes #90

sign · Jan 31, 2024 · 36ee283 · 36ee283
1 parent adba5a5
commit 36ee283
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/app/pages/translate/language-selector/language-selector.component.html b/src/app/pages/translate/language-selector/language-selector.component.html
@@ -32,7 +32,7 @@
       expand="full"
       fill="clear">
       <app-flag-icon *ngIf="flags" [country]="langCountries[detectedLanguage]" [squared]="true"></app-flag-icon>
-      {{ t('detected', {lang: langNames[detectedLanguage]}) }}
+      <span class="wrap-text">{{ t('detected', {lang: langNames[detectedLanguage]}) }}</span>
     </ion-button>
   </ng-container>
   <ng-template #detectLanguage>
@@ -44,7 +44,7 @@
       fill="clear">
       <ng-container *ngIf="language; else noLanguage">
         <app-flag-icon *ngIf="flags" [country]="langCountries[language]" [squared]="true"></app-flag-icon>
-        {{ langNames[language] }}
+        <span class="wrap-text">{{ langNames[language] }}</span>
       </ng-container>
       <ng-template #noLanguage>{{ t('detect') }}</ng-template>
     </ion-button>

diff --git a/src/app/pages/translate/language-selector/language-selector.component.scss b/src/app/pages/translate/language-selector/language-selector.component.scss
@@ -28,9 +28,6 @@ ion-button.menu-language-button {
   width: 100%;
   height: 100%;
   margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 @media #{$breakpoint-lt-md} {
@@ -52,3 +49,9 @@ ion-button.menu-language-button {
 ::ng-deep .language-selector-menu {
   max-height: calc(100vh - 64px - 68px - 48px) !important;
 }
+
+.wrap-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}