Fix UI overflows

4 files changed, 8 insertions, 1 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index f9d097644..2dfb057e7 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -36,6 +36,8 @@
   }
 
   a {
+    @include peertube-word-wrap;
+
     color: pvar(--mainForegroundColor);
   }
 
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 301762695..6124090c9 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -146,6 +146,8 @@ $video-info-margin-left: 44px;
       }
 
       .video-info-name {
+        @include peertube-word-wrap;
+
         margin-right: 30px;
         min-height: 40px; // Align with the action buttons
         font-size: 27px;
@@ -173,6 +175,7 @@ $video-info-margin-left: 44px;
 
         a {
           @include disable-default-a-behaviour;
+          @include peertube-word-wrap;
 
           color: pvar(--mainForegroundColor);
 
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index 75cfc918b..d8699ff69 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -40,7 +40,7 @@
   </ng-container>
 
   <div
-    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right"
+    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left"
     role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
   >
     <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 38bd90ae6..372e7bd24 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -44,6 +44,8 @@
   }
 
   .actor-display-name {
+    @include peertube-word-wrap;
+
     display: flex;
     flex-wrap: wrap;
   }