Adjust "signed in as" pages (#4720)

* Adjust "signed in as" pages

Fix min-width

Set width of .account-header .name

To apply text-overflow and overflow settings
Set overflow for detailed-status__display-name

* Remove trailing whitespace

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 32cf450b72520add00595c4898c7922b3f53d489..3a6672b9f187088e6931cb81ae3417c6c225d95e 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1057,6 +1057,8 @@
   strong,
   span {
     display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   strong {

diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index cfe8ea6438bcfd97a70ed5ab97efbcef69d118bc..af2589e23c32076e7ea955130318105148d232aa 100644 (file)
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -72,7 +72,7 @@
   margin-bottom: -30px;
   margin-top: 40px;
 
-  @media screen and (max-width: 400px) {
+  @media screen and (max-width: 440px) {
     width: 100%;
     margin: 0;
     margin-bottom: 10px;
@@ -97,10 +97,13 @@
   .name {
     flex: 1 1 auto;
     color: $ui-secondary-color;
+    width: calc(100% - 88px);
 
     .username {
       display: block;
       font-weight: 500;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 
@@ -108,5 +111,6 @@
     display: block;
     font-size: 32px;
     line-height: 40px;
+    margin-left: 8px;
   }
 }

diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index 8e41bb00232970723b4036950075df97d228e037..78f13270a7214f7b8c20809883404571e0cf6355 100644 (file)
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -359,6 +359,10 @@ code {
     color: $ui-secondary-color;
     font-weight: 500;
   }
+
+  @media screen and (max-width: 740px) and (min-width: 441px) {
+    margin-top: 40px;
+  }
 }
 
 .qr-wrapper {