X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-user-subscription%2Fsubscribe-button.component.scss;h=a39ce90e3475627794d0c46986912f3db98130f8;hb=HEAD;hp=f6cdc11c002cb92378a7c11b6bb4c053fec46376;hpb=efd31a6ae276ae0337b8b342861103551de32753;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index f6cdc11c0..a39ce90e3 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -1,16 +1,14 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .btn-group-subscribe {
   @include peertube-button;
-  @include disable-default-a-behaviour;
 
-  float: right;
   padding: 0;
 
-  & > .btn,
-  & > .dropdown > .dropdown-toggle {
-    font-size: 15px;
+  button.dropdown-toggle {
+    font-size: $button-font-size;
+    line-height: 1.2;
   }
 
   &:not(.big) {
@@ -20,7 +18,7 @@
   &.big {
     height: 35px;
 
-    & > button:first-child {
+    > button:first-child {
       width: max-content;
       min-width: 175px;
     }
@@ -29,7 +27,7 @@
       span:first-child {
         line-height: 80%;
       }
-    
+
       span:not(:first-child) {
         font-size: 75%;
       }
@@ -37,16 +35,16 @@
   }
 
   // Unlogged
-  & > .dropdown > .dropdown-toggle span {
-    padding-right: 3px;
+  > .dropdown > .dropdown-toggle span {
+    @include padding-right(5px);
   }
 
   // Logged
-  & > .btn {
-    padding-right: 4px;
+  > .btn {
+    @include padding-right(4px);
 
-    & + .dropdown > button {
-      padding-left: 2px;
+    + .dropdown > button {
+      @include padding-left(2px);
 
       &::after {
         position: relative;
@@ -62,12 +60,14 @@
     }
 
     span.followers-count {
-      padding-left: 5px;
+      @include padding-left(5px);
     }
   }
+
   &.unsubscribe-button {
     .btn {
       @include grey-button;
+
       font-weight: 600;
     }
   }
@@ -79,6 +79,12 @@
       cursor: pointer;
     }
 
+    .dropdown-item {
+      @media screen and (max-width: $mobile-view) {
+        white-space: normal;
+      }
+    }
+
     .dropdown-item-neutral {
       cursor: default;
 
@@ -108,6 +114,6 @@
 
   span:not(:first-child) {
     font-size: 60%;
-    text-align: left;
+    text-align: start;
   }
 }