3 files changed, 35 insertions, 45 deletions

diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index b42e41855..f7ae69717 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
 import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { objectKeysTyped } from '@shared/core-utils'
 import { getCompleteLocale, getShortLocale, I18N_LOCALES } from '@shared/core-utils/i18n'
 
 @Component({
@@ -17,8 +18,8 @@ export class LanguageChooserComponent {
     private modalService: NgbModal,
     @Inject(LOCALE_ID) private localeId: string
   ) {
-    const l = Object.keys(I18N_LOCALES)
-                    .map(k => ({ id: k, label: I18N_LOCALES[k], iso: getShortLocale(k) }))
+    const l = objectKeysTyped(I18N_LOCALES)
+      .map(k => ({ id: k, label: I18N_LOCALES[k], iso: getShortLocale(k) }))
 
     this.languages = sortBy(l, 'label')
   }
@@ -35,7 +36,7 @@ export class LanguageChooserComponent {
     const english = 'English'
     const locale = isOnDevLocale() ? getDevLocale() : getCompleteLocale(this.localeId)
 
-    if (locale) return I18N_LOCALES[locale] || english
+    if (locale) return I18N_LOCALES[locale as keyof typeof I18N_LOCALES] || english
     return english
   }
 }
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 8b90fb78b..c23bb4f5b 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
         <div>
           <div
             class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
-            container="body" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
+            container="body" (openChange)="onDropdownOpenChange($event)"
           >
             <button class="border-0 text-start" ngbDropdownToggle>
               <my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
@@ -33,21 +33,21 @@
 
               <button
                 myPluginSelector pluginSelectorId="menu-user-dropdown-language-item"
-                ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()"
+                ngbDropdownItem class="dropdown-item" (click)="openLanguageChooser()"
               >
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
                 <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
               </button>
 
-              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
+              <a ngbDropdownItem class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
                 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
                 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
                 <span i18n>Videos:</span>
                 <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
               </a>
 
-              <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
+              <a ngbDropdownItem class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
                 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
                 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
               >
@@ -57,24 +57,24 @@
                 <span class="ms-auto muted">{{ nsfwPolicy }}</span>
               </a>
 
-              <button ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
+              <button class="dropdown-item" (click)="toggleUseP2P()" (mousedown)="$event.stopPropagation()" ngbDropdownItem>
                 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Help share videos</ng-container>
 
-                <my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
+                <my-input-switch inputName="p2p-enabled" class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
               </button>
 
               <div class="dropdown-divider"></div>
 
-              <a *ngIf="!isInMobileView" ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
+              <button *ngIf="!isInMobileView" ngbDropdownItem class="dropdown-item" (click)="openHotkeysCheatSheet()">
                 <my-global-icon iconName="command" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Keyboard shortcuts</ng-container>
-              </a>
+              </button>
 
-              <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#">
+              <button ngbDropdownItem (click)="logout($event)" class="dropdown-item">
                 <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Log out</ng-container>
-              </a>
+              </button>
             </div>
           </div>
 
@@ -121,10 +121,10 @@
 
     <div class="footer">
       <div class="footer-block">
-        <a *ngIf="!isLoggedIn" class="menu-link" (click)="openQuickSettings()">
+        <button *ngIf="!isLoggedIn" class="menu-link button-unstyle" (click)="openQuickSettings()">
           <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
           <ng-container i18n>My settings</ng-container>
-        </a>
+        </button>
 
         <a class="menu-link" routerLink="/about" routerLinkActive="active">
           <my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
@@ -135,7 +135,7 @@
       <div class="footer-bottom">
 
         <div class="footer-links">
-          <span *ngIf="isLoggedIn === false" role="button" (click)="openLanguageChooser()" class="c-hand" i18n>Interface: {{ currentInterfaceLanguage }}</span>
+          <button *ngIf="isLoggedIn === false" (click)="openLanguageChooser()" class="button-unstyle" i18n>Interface: {{ currentInterfaceLanguage }}</button>
 
           <div>
             <a i18n routerLink="/about/instance">Contact</a>
@@ -143,7 +143,7 @@
             <a i18n href="https://joinpeertube.org/faq" i18n-title title="Frequently asked questions about PeerTube" target="_blank" rel="noopener noreferrer">FAQ</a>
             <a i18n routerLink="/about/instance" fragment="statistics">Stats</a>
             <a i18n href="https://docs.joinpeertube.org/api/rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a>
-            <a role="button" (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Keyboard shortcuts</a>
+            <button (click)="openHotkeysCheatSheet()" class="button-unstyle" i18n>Keyboard shortcuts</button>
           </div>
         </div>
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index d88025c33..08d6fb900 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -20,6 +20,7 @@ $footer-links-base-opacity: .8;
   word-break: break-word;
   transition: background-color .1s ease-in-out;
   line-height: $line-height-normal;
+  width: 100%;
 
   &.active {
     background-color: rgba(255, 255, 255, 0.15);
@@ -113,16 +114,13 @@ my-notification {
       .dropdown-toggle-indicator {
         display: inherit !important;
       }
-
-      &.dropdown-toggle {
-        max-width: 88% !important;
-      }
     }
   }
 
   @include margin-left(13px);
 
   flex: 1;
+  min-width: 1px;
   border-radius: 25px;
   transition: all .1s ease-in-out;
   cursor: pointer;
@@ -140,22 +138,24 @@ my-notification {
   /* smartphones and touchscreens */
   @media (hover: none) and (pointer: coarse) {
     @include display-hints($is-mobile: true);
+  }
 
-    /* fill space when on mobile */
-    max-width: calc(100% - 80px);
-
-    &.dropdown-toggle {
-      max-width: 100%;
-    }
+  > .dropdown-toggle {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 5px 7px;
 
-    .logged-in-info {
-      max-width: calc(100% - 45px) !important;
+    &::after {
+      // Disable bootstrap toggle
+      border: 0;
     }
   }
 
   .dropdown-toggle-indicator {
     position: relative;
     display: none;
+    width: 17px;
 
     span {
       position: absolute;
@@ -163,17 +163,6 @@ my-notification {
       color: #808080;
     }
   }
-
-  .dropdown-toggle::after {
-    border: 0;
-  }
-
-  > .dropdown-toggle:first-child {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 5px 25px 5px 7px;
-  }
 }
 
 my-actor-avatar {
@@ -181,9 +170,8 @@ my-actor-avatar {
 }
 
 .logged-in-info {
-  max-width: 105px;
-
-  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 1px;
 }
 
 .logged-in-display-name,
@@ -286,7 +274,8 @@ my-actor-avatar {
     margin-bottom: 25px;
   }
 
-  a {
+  a,
+  button {
     min-height: 40px;
   }
 }
@@ -306,7 +295,7 @@ my-actor-avatar {
   }
 
   a,
-  span[role=button] {
+  button {
     @include margin-right(8px);
     @include disable-default-a-behaviour;