Show profile preview on hover

app/styles/components/drawer.scss

@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .drawer__pager {

app/styles/components/status.scss

@@ -152,7 +152,6 @@
 .status__info .status__display-name {
   display: block;
   max-width: 100%;
-  padding-right: 25px;
 }
 
 .status__info {
@@ -160,6 +159,27 @@
   z-index: 4;
 }
 
+.status__profile,
+.detailed-status__profile {
+  display: inline-block;
+
+  .user-panel {
+    position: absolute;
+    display: flex;
+    opacity: 0;
+    pointer-events: none;
+    transition-property: opacity;
+    transition-duration: 0.5s;
+    z-index: 999;
+
+    &--visible {
+      opacity: 1;
+      transition-delay: 1s;
+      pointer-events: all;
+    }
+  }
+}
+
 .status-check-box {
   border-bottom: 1px solid var(--background-color);
   display: flex;

app/styles/components/user-panel.scss

@@ -3,7 +3,13 @@
   display: flex;
   width: 265px;
   flex-direction: column;
-  overflow-y: hidden;
+
+  &,
+  .user-panel__account__name,
+  .user-panel__account__username {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   &__header {
     display: block;