From f142370cf1a366a62d34b6169607b5d5b9a9931b Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Mon, 6 Sep 2021 14:58:32 +0200
Subject: [PATCH] Better table style for language selector to prevent
 overlapping columns for large language codes.

---
 .../angular/language-selector.component.html  | 11 +++++++---
 .../angular/language-selector.component.scss  | 20 ++++++++++---------
 .../contents/content-status.component.scss    |  2 +-
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/app/framework/angular/language-selector.component.html b/frontend/app/framework/angular/language-selector.component.html
index 809fdcf23..edbe5a714 100644
--- a/frontend/app/framework/angular/language-selector.component.html
+++ b/frontend/app/framework/angular/language-selector.component.html
@@ -11,9 +11,14 @@
 
     <ng-container *sqxModal="dropdown;closeAlways:true">
         <div class="dropdown-menu" [sqxAnchoredTo]="button" @fade>
-            <div class="dropdown-item" *ngFor="let supported of languages; trackBy: trackByLanguage" [class.active]="supported === language" (click)="selectLanguage(supported)">
-                <strong class="iso-code iso-code-dropdown">{{supported.iso2Code}}</strong> ({{supported.englishName}})
-            </div>
+            <table>
+                <tbody>
+                    <tr class="dropdown-item" *ngFor="let supported of languages; trackBy: trackByLanguage" [class.active]="supported === language" (click)="selectLanguage(supported)">
+                        <td><strong class="iso-code iso-code-dropdown">{{supported.iso2Code}}</strong></td>
+                        <td>({{supported.englishName}})</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </ng-container>
 </ng-container>
\ No newline at end of file
diff --git a/frontend/app/framework/angular/language-selector.component.scss b/frontend/app/framework/angular/language-selector.component.scss
index 551bd9a1c..e646d25c4 100644
--- a/frontend/app/framework/angular/language-selector.component.scss
+++ b/frontend/app/framework/angular/language-selector.component.scss
@@ -1,23 +1,25 @@
 .dropdown-menu {
     max-height: 20rem;
     overflow-x: inherit;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .dropdown-item {
     cursor: pointer;
+
+    td {
+        padding: .25rem 1rem;
+    }
 }
 
-.iso-code {
-    font-family: monospace;
+tr {
+    display: inherit !important;
 }
 
-.iso-code-dropdown {
-    display: inline-block;
-    max-width: 60px;
-    min-width: 40px;
+.btn-outline-secondary {
+    color: $color-text;
 }
 
-.active {
-    background: none;
+.iso-code {
+    font-family: monospace;
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/contents/content-status.component.scss b/frontend/app/shared/components/contents/content-status.component.scss
index b72e320f8..ad1c51950 100644
--- a/frontend/app/shared/components/contents/content-status.component.scss
+++ b/frontend/app/shared/components/contents/content-status.component.scss
@@ -24,5 +24,5 @@
 }
 
 .label {
-    color: lighten($color-text, 20%) !important;
+    color: $color-text !important;
 }
\ No newline at end of file