fixed transfers dropdown being clipped by the terminal - fixes #4688

tabby-core/src/components/appRoot.component.pug

@@ -57,15 +57,20 @@ title-bar(
                         div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
             .d-flex(
-                *ngIf='activeTransfers.length > 0',
                 ngbDropdown,
-                [(open)]='activeTransfersDropdownOpen'
+                container='body',
+                #activeTransfersDropdown='ngbDropdown'
             )
                 button.btn.btn-secondary.btn-tab-bar(
+                    *ngIf='activeTransfers.length > 0',
                     title='File transfers',
                     ngbDropdownToggle
                 ) !{require('../icons/download-solid.svg')}
-                transfers-menu(ngbDropdownMenu, [(transfers)]='activeTransfers')
+                transfers-menu(
+                    ngbDropdownMenu,
+                    [(transfers)]='activeTransfers',
+                    (transfersChange)='onTransfersChange()'
+                )
 
         .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
 

tabby-core/src/components/appRoot.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { Component, Inject, Input, HostListener, HostBinding, ViewChildren } from '@angular/core'
+import { Component, Inject, Input, HostListener, HostBinding, ViewChildren, ViewChild } from '@angular/core'
 import { trigger, style, animate, transition, state } from '@angular/animations'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
 
 import { HostAppService, Platform } from '../api/hostApp'
@@ -60,10 +60,10 @@ export class AppRootComponent {
     @HostBinding('class.platform-linux') platformClassLinux = process.platform === 'linux'
     @HostBinding('class.no-tabs') noTabs = true
     @ViewChildren(TabBodyComponent) tabBodies: TabBodyComponent[]
+    @ViewChild('activeTransfersDropdown') activeTransfersDropdown: NgbDropdown
     unsortedTabs: BaseTabComponent[] = []
     updatesAvailable = false
     activeTransfers: FileTransfer[] = []
-    activeTransfersDropdownOpen = false
     private logger: Logger
 
     constructor (
@@ -147,7 +147,7 @@ export class AppRootComponent {
 
         platform.fileTransferStarted$.subscribe(transfer => {
             this.activeTransfers.push(transfer)
-            this.activeTransfersDropdownOpen = true
+            this.activeTransfersDropdown.open()
         })
 
         config.ready$.toPromise().then(() => {
@@ -200,6 +200,12 @@ export class AppRootComponent {
         this.app.emitTabsChanged()
     }
 
+    onTransfersChange () {
+        if (this.activeTransfers.length === 0) {
+            this.activeTransfersDropdown.close()
+        }
+    }
+
     private getToolbarButtons (aboveZero: boolean): ToolbarButton[] {
         let buttons: ToolbarButton[] = []
         this.config.enabledServices(this.toolbarButtonProviders).forEach(provider => {

tabby-core/src/components/transfersMenu.component.scss

@@ -51,3 +51,7 @@
 button {
     flex: none;
 }
+
+svg {
+    height: 14px;
+}