Better table style for language selector to prevent overlapping columns for large language codes.

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)">
+            <table>
-                <strong class="iso-code iso-code-dropdown">{{supported.iso2Code}}</strong> ({{supported.englishName}})
+                <tbody>
-            </div>
+                    <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>

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 {
+tr {
-    font-family: monospace;
+    display: inherit !important;
 }
 
-.iso-code-dropdown {
+.btn-outline-secondary {
-    display: inline-block;
+    color: $color-text;
-    max-width: 60px;
-    min-width: 40px;
 }
 
-.active {
+.iso-code {
-    background: none;
+    font-family: monospace;
 }

frontend/app/shared/components/contents/content-status.component.scss

@@ -24,5 +24,5 @@
 }
 
 .label {
-    color: lighten($color-text, 20%) !important;
+    color: $color-text !important;
 }