From 60d360137158e8be28eb34524122b01dd7da4369 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 10 Jun 2022 12:06:12 +0200
Subject: [PATCH] Fix list overflow

---
 .../shared/shared-main/misc/list-overflow.component.html | 8 ++++++--
 .../shared/shared-main/misc/list-overflow.component.scss | 3 +++
 .../shared/shared-main/misc/list-overflow.component.ts   | 9 +++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

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 b2e0982f1..ea22a3445 100644
--- 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 19c055fd3..b06418568 100644
--- 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 fbc481093..541991f74 100644
--- 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()
   }