fix: Dropdown menu results in internal scroll bar (#5766)

Co-authored-by: Areeb Jamal <[email protected]>

Author: codepool867

app/components/tables/default.js

@@ -4,4 +4,7 @@ import Component from '@ember/component';
 @classic
 export default class Tables extends Component {
 
+  didRender() {
+    this.rendered?.();
+  }
 }

app/controllers/events/view/sessions/list.js

@@ -1,11 +1,34 @@
 import Controller from '@ember/controller';
-import { action } from '@ember/object';
+import { computed, action } from '@ember/object';
 import { mapBy } from '@ember/object/computed';
 import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
+import $ from 'jquery';
 
 export default class extends Controller.extend(EmberTableControllerMixin) {
   @mapBy('model.feedbacks', 'session.id') ratedSessions;
 
+  @computed('model.sessions.data')
+  get sessions() {
+    const len = this.model.sessions.data.length;
+    this.model.sessions.data.forEach((item, idx) => {
+      if (len >= 4 && idx >= len - 2) {
+        item.set('dir', 'upward');
+      } else if (len > 2) {
+        if (idx === len - 1) {
+          item.set('dir', 'upward');
+        } else if (idx < 2) {
+          item.set('dir', 'downward');
+        } else {
+          item.set('dir', 'auto');
+        }
+      } else {
+        item.set('dir', 'downward');
+      }
+    });
+
+    return this.model.sessions.data;
+  }
+
   get columns() {
     return [
       {
@@ -15,7 +38,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
         width           : 75,
         valuePath       : 'state',
         isSortable      : true,
-        extraValuePaths : ['id', 'status'],
+        extraValuePaths : ['id', 'status', 'dir'],
         options         : {
           sessionStateMap: this.model.sessionStateMap
         },
@@ -105,6 +128,22 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
     ];
   }
 
+  @action
+  tableRendered() {
+    let margin = 0;
+    const len = this.model.sessions.data.length;
+
+    if (len > 0 && len <= 2) {
+      margin = 150;
+    } else if (len <= 3) {
+      margin = 50;
+    } else {
+      margin = 0;
+    }
+
+    $('.ember-table table').css('margin-bottom', margin);
+  }
+
   @action
   async deleteSession(session_id) {
     this.set('isLoading', true);

app/templates/components/ui-table/cell/events/view/sessions/cell-buttons.hbs

@@ -1,4 +1,4 @@
-<UiDropdown @class="ui floating dropdown button">
+<UiDropdown @class="ui floating dropdown button" @direction={{if this.extraRecords this.extraRecords.dir}}>
   <div class="ui {{this.color}} empty circular label"></div>
   {{t-var (capitalize this.extraRecords.status)}}
   <div class="menu">

app/templates/events/view/sessions/list.hbs

@@ -1,7 +1,7 @@
 <div class="sixteen wide column">
   <Tables::Default
     @columns={{this.columns}}
-    @rows={{this.model.sessions.data}}
+    @rows={{this.sessions}}
     @feedbacks={{this.model.feedbacks}}
     @currentPage={{this.page}}
     @pageSize={{this.per_page}}
@@ -12,5 +12,6 @@
     @filterOptions={{this.filterOptions}}
     @widthConstraint="eq-container"
     @resizeMode="fluid"
+    @rendered={{action "tableRendered"}}
     @fillMode="equal-column" />
 </div>