Fix moderation dropdown overflow on mobile

2 files changed, 13 insertions, 1 deletions

diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 017355bd0..37cf63fcd 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -18,7 +18,7 @@
           <ng-template #templateActionLabel let-action>
             <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
 
-            <div class="d-flex flex-column">
+            <div class="item-label">
               <span i18n>{{ action.label }}</span>
               <small class="muted" *ngIf="action.description">{{ action.description }}</small>
             </div>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
index fe65d6e7e..4c8a591aa 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -53,6 +53,8 @@
 }
 
 .dropdown-menu {
+  max-width: 75vw;
+
   .dropdown-header {
     padding: 0.2rem 1rem;
   }
@@ -72,3 +74,13 @@
     }
   }
 }
+
+.item-label {
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+
+  > * {
+    @include ellipsis;
+  }
+}