adjust registration form width on mobile (#3274)

Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

3 files changed, 18 insertions, 6 deletions

diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index 1bd378b13..edb93b8ed 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -20,7 +20,7 @@
 
     <div class="input-group">
       <input
-        type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
+        type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe"
         formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
       <div class="input-group-append">
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 6a7e361e3..4221354ee 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -20,6 +20,10 @@
 
     &.register-form {
       width: 450px;
+
+      @media screen and (max-width: $mobile-view) {
+        width: 100%;
+      }
     }
 
     &.instance-information {
@@ -35,6 +39,9 @@
       @media screen and (max-width: 1500px) {
         width: 450px;
       }
+      @media screen and (max-width: $mobile-view) {
+        width: 100%;
+      }
 
       ngb-accordion ::ng-deep {
         .btn {
@@ -43,10 +50,6 @@
         }
       }
     }
-
-    @media screen and (max-width: $mobile-view) {
-      width: auto;
-    }
   }
 }
 
@@ -64,7 +67,6 @@
 
 input:not([type=submit]) {
   @include peertube-input-text(400px);
-
   display: block;
 
   &#username,
@@ -74,10 +76,19 @@ input:not([type=submit]) {
   }
 }
 
+@media screen and (max-width: $mobile-view) {
+  .form-group-terms,
+  .input-group,
+  input:not([type=submit]) {
+    width: 100%;
+  }
+}
+
 input[type=submit],
 button {
   @include peertube-button;
   @include orange-button;
+  
 }
 
 .name-information {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e6491b492..1a94de5b2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -121,6 +121,7 @@
   min-height: $button-height;
   padding-top: 0;
   padding-bottom: 0;
+  flex-wrap: nowrap;
 
   .input-group-text{
     font-size: 14px;