better positionning of the username

src/app/components/stream/status/status.component.html

@@ -1,9 +1,11 @@
 <div class="status">
     <a href class="status__profile-link" title="{{status.account.acct}}">
         <img class="status__avatar" src="{{ status.account.avatar }}" />
-        <span class="status__fullname" innerHTML="{{status.account.display_name}}"></span>       
-        @<span id="status-username">{{status.account.acct}}</span>
+        <span class="status__name">
+            <span class="status__name--displayname" innerHTML="{{status.account.display_name}}"></span><span class="status__name--username">{{status.account.acct}}</span>
+        </span>
     </a>
-    <div class="status__created-at" title="{{ status.created_at | date: 'full' }}">{{ getCompactRelativeTime(status.created_at) }}</div>
+    <div class="status__created-at" title="{{ status.created_at | date: 'full' }}">{{
+        getCompactRelativeTime(status.created_at) }}</div>
     <div class="status__content" innerHTML="{{status.content}}"></div>
-</div> 
+</div>

src/app/components/stream/status/status.component.scss

@@ -15,10 +15,28 @@
         height: 50px; // float: left;
         border-radius: 2px;
     }
-    &__fullname {
-        display: block;
-        color: $status-primary-color;
+    &__name{
+        display: inline-block;
+        width: calc(100% - 40px);
+        white-space: nowrap;
+        overflow: hidden;
+
+        // border: 1px dotted greenyellow;
+
+        &--displayname {
+            display: inline-block;
+            color: $status-primary-color;
+        }
+
+        &--username {
+            display: inline-block;
+            margin-left: 5px;
+            // position: relative;
+            // top: 1px;
+        }
     }
+
+    
     &__profile-link {
         color: $status-secondary-color;
         margin: 7px 0 0 70px;
@@ -37,8 +55,8 @@
     &__created-at {
         color: $status-secondary-color;
         position: absolute;
-        top: 5px;
-        right: 10px;
+        top: 7px;
+        right: 5px;
     }
 }
 

src/app/components/stream/stream.component.scss

@@ -31,7 +31,7 @@
 
 .flexcroll {
     scrollbar-face-color: #08090d;
-    scrollbar-shadow-color: #08090d;
+    // scrollbar-shadow-color: #08090d;
     scrollbar-highlight-color: #08090d;
     scrollbar-3dlight-color: #08090d;
     scrollbar-darkshadow-color: #08090d;
@@ -43,7 +43,8 @@
     &::-webkit-scrollbar-thumb {
         -webkit-border-radius: 0px;
         border-radius: 0px;
-        background: #08090d;
+        // background: #08090d;
+        background: lighten($color-primary, 5);
         -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
     }
 }