Ugly hacks to make trending subreddits align with links.

r2/r2/public/static/css/reddit.less

@@ -1855,6 +1855,14 @@ a.star { text-decoration: none; color: #ff8b60 }
     text-align: right;
 }
 
+.rank-spacer {
+    font-size: medium;
+}
+
+.midcol-spacer {
+    font-size: small;
+}
+
 .link.compressed { margin-bottom: 5px; }
 .link.compressed .rank { margin-top: 10px; }
 .link.compressed .title { margin: -2px 0 3px }
@@ -8337,8 +8345,6 @@ body.with-listing-chooser {
 }
 
 .trending-subreddits {
-    // required so that ex units are in sync with .midcol
-    font-size: small;
     margin-top: -4px;
     line-height: 1.75em;
 
@@ -8349,8 +8355,16 @@ body.with-listing-chooser {
         padding-left: 15px;
     }
 
-    strong, ul, a {
-        font-size: x-small;
+    // hax to align trending subreddits list with links/thumbnails
+    // this uses the overflow:hidden trick to create a block formatting context
+    // to shift the left edge of the trending subreddits list over
+    .rank-spacer, .midcol-spacer {
+        float: left;
+        height: 1px;
+    }
+
+    .trending-subreddits-content {
+        overflow: hidden;
     }
 
     strong {

r2/r2/templates/linklisting.html

@@ -23,14 +23,11 @@
 ## a kooky hack to make ranks and voting arrows in the spotlight box line up
 ## without late rendering or blasting style attributes everywhere
 <style>
-  body > .content .link .rank {
+  body > .content .link .rank, .rank-spacer {
     width: ${thing.rank_width}ex
   }
-  body > .content .link .midcol {
+  body > .content .link .midcol, .midcol-spacer {
     width: ${thing.midcol_width}ex
   }
-  .content .trending-subreddits {
-    padding-left: ${thing.midcol_width}ex
-  }
 </style>
 <%include file="listing.html"/>

r2/r2/templates/trendingsubredditsbar.html

@@ -21,11 +21,15 @@
 ###############################################################################
 
 <div class="trending-subreddits">
-  <strong>${_('trending subreddits')}</strong>
-  <ul>
-  %for subreddit_name in thing.subreddit_names:
-    <li><a href="/r/${subreddit_name}" target="_blank">/r/${subreddit_name}</a></li>
-  %endfor
-  </ul>
-  <a href="${thing.comment_url}" class="${thing.comment_label_cls}">${thing.comment_label}</a>
+  <div class="rank-spacer"></div>
+  <div class="midcol-spacer"></div>
+  <div class="trending-subreddits-content">
+    <strong>${_('trending subreddits')}</strong>
+    <ul>
+    %for subreddit_name in thing.subreddit_names:
+      <li><a href="/r/${subreddit_name}" target="_blank">/r/${subreddit_name}</a></li>
+    %endfor
+    </ul>
+    <a href="${thing.comment_url}" class="${thing.comment_label_cls}">${thing.comment_label}</a>
+  </div>
 </div>