Skip to content
Permalink
Browse files

UX: better handling of width and overflow for login/signup

  • Loading branch information...
awesomerobot committed Mar 8, 2019
1 parent f03b293 commit e3e681ebf7a626e195b8a23c186e0e39b0c98060
Showing with 26 additions and 5 deletions.
  1. +19 −5 app/assets/stylesheets/desktop/login.scss
  2. +7 −0 app/assets/stylesheets/mobile/login.scss
@@ -53,9 +53,23 @@
padding: 5px 0 0 0;
}
}

tr.input label {
.tip,
td label {
display: block;
overflow: hidden;
word-wrap: break-word;
margin-bottom: 0;
max-width: 280px;
@media screen and (min-width: 500px) {
max-width: 400px;
}
}
}

.has-alt-auth {
.tip,
td label {
max-width: 250px;
}
}

@@ -129,7 +143,6 @@
padding: 15px;
margin-bottom: 5px;
max-height: 475px;
max-width: 350px;
@media screen and (max-height: 768px) {
max-height: 60vh;
}
@@ -220,9 +233,10 @@
}
&:not(:empty),
&:empty + td {
display: block;
min-height: 1.75em;
max-width: 240px;
&.bad .svg-icon {
vertical-align: middle;
}
}
}
}
@@ -50,6 +50,13 @@
margin-top: 0.75em;
}

td label {
max-width: 280px;
display: block;
overflow: hidden;
word-wrap: break-word;
}

&:not(.instructions) td {
padding: 2px 0 0 0;
}

1 comment on commit e3e681e

@discoursebot

This comment has been minimized.

Copy link

commented on e3e681e Mar 8, 2019

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/signup-form-is-not-displaying-correctly/111083/6

Please sign in to comment.
You can’t perform that action at this time.