Fix list overflow

diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index b2e0982f1345233ffe7658f77b4d3bd8094d4fac..ea22a3445c9028384caa5339fbb8ce50b8334467 100644 (file)
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -1,4 +1,4 @@
-<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+<div #itemsParent class="list-overflow-parent">
   <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
     <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
   </span>
@@ -8,7 +8,11 @@
       <span class="glyphicon glyphicon-chevron-down"></span>
     </button>
 
-    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+    <div
+      *ngIf="!isInMobileView" class="list-overflow-menu"
+      ngbDropdown container="body" #dropdown="ngbDropdown"
+      (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"
+    >
       <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
         ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
       >

diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 19c055fd36d1f9fe3c1fb67b2fb48a17faf69985..b064185683a1a8eae348ab948e4704dc16c70ea6 100644 (file)
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -7,6 +7,9 @@
 
 .list-overflow-parent {
   overflow: hidden;
+  display: flex;
+  // For the menu icon
+  max-width: calc(100vw - 30px);
 }
 
 .list-overflow-menu {

diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index fbc4810932c58891526763dc8695b8b7088da951..541991f7438f34a8b098e4d8edc5eb6880ab7c23 100644 (file)
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -15,6 +15,9 @@ import {
 } from '@angular/core'
 import { ScreenService } from '@app/core'
 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import * as debug from 'debug'
+
+const logger = debug('peertube:main:ListOverflowItem')
 
 export interface ListOverflowItem {
   label: string
@@ -37,7 +40,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
 
   showItemsUntilIndexExcluded: number
   active = false
-  isInTouchScreen = false
   isInMobileView = false
 
   private openedOnHover = false
@@ -58,13 +60,14 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
 
   @HostListener('window:resize')
   onWindowResize () {
-    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
     this.isInMobileView = !!this.screenService.isInMobileView()
 
     const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
     let showItemsUntilIndexExcluded: number
     let accWidth = 0
 
+    logger('Parent width is %d', parentWidth)
+
     for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
       accWidth += el.nativeElement.getBoundingClientRect().width
       if (showItemsUntilIndexExcluded === undefined) {
@@ -76,6 +79,8 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
       e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
     }
 
+    logger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
+
     this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
     this.cdr.markForCheck()
   }