Improve channel and account display on medium devices

client/src/app/+accounts/accounts.component.scss

@@ -1,3 +1,9 @@
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
 @import '_variables';
 @import '_mixins';
 
@@ -13,7 +19,16 @@
   display: flex;
   height: max-content;
   margin-left: auto;
-  margin-top: 20px;
+  margin-top: 10px;
+
+  @include media-breakpoint-down(lg) {
+    flex-flow: column-reverse;
+
+    a {
+      margin-top: 0.25rem;
+      margin-right: 0 !important;
+    }
+  }
 
   a {
     @include peertube-button-outline;

client/src/app/+admin/users/user-edit/user-edit.component.html

@@ -123,7 +123,7 @@
       <div class="form-group">
         <label i18n for="role">Role</label>
         <div class="peertube-select-container">
-            <select id="role" formControlName="role">
+            <select id="role" formControlName="role" class="form-control">
               <option *ngFor="let role of roles" [value]="role.value">
                {{ role.label }}
               </option>
@@ -138,7 +138,7 @@
       <div class="form-group">
         <label i18n for="videoQuota">Video quota</label>
         <div class="peertube-select-container">
-          <select id="videoQuota" formControlName="videoQuota">
+          <select id="videoQuota" formControlName="videoQuota" class="form-control">
             <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
               {{ videoQuotaOption.label }}
             </option>
@@ -154,7 +154,7 @@
       <div class="form-group">
         <label i18n for="videoQuotaDaily">Daily video quota</label>
         <div class="peertube-select-container">
-          <select id="videoQuotaDaily" formControlName="videoQuotaDaily">
+          <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
             <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
               {{ videoQuotaDailyOption.label }}
             </option>

client/src/app/+admin/users/user-edit/user-password.component.html

@@ -2,7 +2,7 @@
   <div class="form-group">
 
     <div class="input-group">
-      <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
+      <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
         formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       >
       <div class="input-group-append">

client/src/app/+video-channels/video-channels.component.scss

@@ -1,3 +1,9 @@
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
 @import '_variables';
 @import '_mixins';
 
@@ -14,7 +20,7 @@
     grid-template-rows: 1fr auto / 1fr auto;
     grid-template-areas: "name buttons" "lower buttons";
 
-    @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
+    @include media-breakpoint-down(lg) {
       grid-template-areas: "name name" "lower buttons";
     }
   }
@@ -38,11 +44,20 @@
   display: flex;
   height: max-content;
   margin-left: auto;
-  margin-top: 20px;
+  margin-top: 10px;
 
   grid-row: buttons-start / span buttons-end;
   grid-column: buttons-start;
 
+  @include media-breakpoint-down(lg) {
+    flex-flow: column-reverse;
+
+    a {
+      margin-top: 0.25rem;
+      margin-right: 0 !important;
+    }
+  }
+
   a {
     @include peertube-button-outline;
     line-height: 1.8;

client/src/app/shared/user-subscription/subscribe-button.component.scss

@@ -13,9 +13,17 @@
     font-size: 15px;
   }
 
+  &:not(.big) {
+    white-space: nowrap;
+  }
+
   &.big {
     height: 35px;
 
+    & > button:first-child {
+      width: 175px;
+    }
+
     button .extra-text {
       span:first-child {
         line-height: 80%;

client/src/sass/application.scss

@@ -77,10 +77,6 @@ input, textarea {
   color: var(--mainForegroundColor);
 }
 
-.btn-outline-secondary {
-  border-color: $input-border-color;
-}
-
 label {
   font-weight: $font-bold;
   font-size: 15px;
@@ -108,7 +104,7 @@ label {
 }
 
 .row {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .main-col {
@@ -280,6 +276,7 @@ table {
 
       .sub-menu {
         padding-left: 50px;
+        padding-right: 50px;
 
         .title-page {
           font-size: 17px;

client/src/sass/bootstrap.scss

@@ -221,10 +221,23 @@ ngb-tooltip-window {
   z-index: z(tooltip) !important;
 }
 
+.btn-outline-secondary {
+  border-color: $input-border-color;
+
+  &:focus-within,
+  &:focus,
+  &:hover {
+    color: #fff;
+    background-color: #6c757d;
+  }
+}
+
 .btn-outline-tertiary {
   color: var(--secondaryColor);
   border-color: var(--secondaryColor);
 
+  &:focus-within,
+  &:focus,
   &:hover {
     color: var(--mainBackgroundColor);
     background-color: var(--secondaryColor);
@@ -247,3 +260,7 @@ ngb-tooltip-window {
     }
   }
 }
+
+.input-group > .form-control {
+  flex: initial;
+}