优化UI

app/javascript/mastodon/components/status.js

@@ -502,7 +502,7 @@ class Status extends ImmutablePureComponent {
 
     if (rebloggedByText && status.get('in_reply_to_id')) {
       quote = ancestorsText ?
-            <div className='status__tree__quote__wrapper'>
+            <div className='status__tree__quote__wrapper' onClick={this.handleClick}>
               <Icon id="tree" />
               {ancestorsText}
             </div>

app/javascript/mastodon/containers/status_container.js

@@ -77,7 +77,7 @@ const makeMapStateToProps = () => {
   const getAncestorsText =  createSelector([
     (_, {ids}) => ids,
     state => state.get('statuses'),
-  ], (ids, statuses) => ids.map(i => {
+  ], (ids, statuses) => '>> '+ids.map(i => {
     let text = statuses.get(i) ? statuses.get(i).get('search_index') : i;
     if(text.length > 16)
       text = text.slice(0,13) + "...";

app/javascript/styles/closed-social/global.scss

@@ -48,7 +48,6 @@ div {
 }
 
 .status__quote__wrapper {
-  margin-top:16px;
   border-left: 5px solid #dbdbdb80;
   background: #dbdbdb40;
  
@@ -66,9 +65,9 @@ div {
 }
 
 .status__tree__quote__wrapper {
-  margin-top:16px;
   padding: 10px 5px;
   background: #dbdbdb40;
+  cursor: pointer;
 } 
 
 @keyframes like {

app/javascript/styles/closed-social/timeline_comments.scss

@@ -1,30 +1,33 @@
 .comments-timeline {
-	max-height: 160px;
+  max-height: 160px;
   min-width: 60%;
-	overflow: hidden;
-	-webkit-mask-image: linear-gradient(#1a1a1a,transparent);
-	mask-image: linear-gradient(#1a1a1a,transparent);
-	transform: scale(0.85);
-	transform-origin: 100% 0%;
-	margin-bottom: -32px;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(#1a1a1a,transparent);
+  mask-image: linear-gradient(#1a1a1a,transparent);
+  transform: scale(0.85);
+  transform-origin: 100% 0%;
+  margin-bottom: -32px;
   margin-right:8px;
   position: absolute;
   z-index:9;
-	&:hover {
-	  max-height: none;
-		-webkit-mask-image: none;
-		mask-image: none;
+  &:hover {
+    max-height: 60vh;
+    overflow-y: auto;
+    -webkit-mask-image: none;
+    mask-image: none;
     z-index:99;
     background: $tc-background;
     box-shadow: $primary-text-color 3.2px 3.2px 8px;
-	}
-	&:active {
-	  max-height: none;
-		-webkit-mask-image: none;
-		mask-image: none;
+  }
+  &:active {
+    max-height: 60vh;
+    overflow-y: auto;
+    -webkit-mask-image: none;
+    mask-image: none;
+    z-index:99;
     background: $tc-background;
     box-shadow: $primary-text-color 3.2px 3.2px 8px;
-	}
+  }
   & .comments-timeline-2 {
     margin-left:42px;
   }