adjust registration form width on mobile (#3274)

[github/Chocobozzz/PeerTube.git] / client / src / app / +login / login.component.scss

diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index fde6cc15e1f86f49693651b19c8644aa2bb52f97..9ba09e9e446f4ba0da0d136ae7786b72d201cd74 100644 (file)
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -17,6 +17,35 @@ input[type=submit] {
   @include orange-button;
 }
 
+.modal-body {
+  text-align: left;
+
+  .forgot-password-instructions {
+    margin-bottom: 20px;
+  }
+}
+
+.modal-footer.inputs {
+  .action-button.action-button-cancel {
+    width: auto !important;
+    display: inline-block;
+  }
+}
+
+@media screen and (max-width: #{map-get($container-max-widths, sm)}) {
+  .modal-body {
+    #forgot-password-email {
+      width: 100%;
+    }
+  }
+
+  .modal-footer.inputs {
+    .action-button.action-button-cancel {
+      display: none;
+    }
+  }
+}
+
 .create-an-account, .forgot-password-button {
   color: pvar(--mainForegroundColor);
   cursor: pointer;