Fix #6395 - overlapping profile name and domain (#7927)

2 files changed, 22 insertions, 2 deletions

diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index f1ed2c90b..e4fd6c1f1 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -352,7 +352,7 @@ code {
     position: relative;
 
     .input input {
-      padding-right: 127px;
+      padding-right: 142px;
     }
 
     .append {
@@ -366,6 +366,20 @@ code {
       font-family: inherit;
       pointer-events: none;
       cursor: default;
+      max-width: 140px;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 1px;
+        width: 5px;
+        background-image: linear-gradient(to right, rgba($classic-base-color, 0), $classic-base-color);
+      }
     }
   }
 }
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index e9099a9e9..8c9508004 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -206,13 +206,19 @@ body.rtl {
   }
 
   .simple_form .input-with-append .input input {
-    padding-left: 127px;
+    padding-left: 142px;
     padding-right: 0;
   }
 
   .simple_form .input-with-append .append {
     right: auto;
     left: 0;
+
+    &::after {
+      right: auto;
+      left: 0;
+      background-image: linear-gradient(to left, rgba($classic-base-color, 0), $classic-base-color);
+    }
   }
 
   .table th,