Some front end fixes.

ui/src/components/community.tsx

@@ -136,6 +136,7 @@ export class Community extends Component<any, State> {
   render() {
     return (
       <div class="container">
+        {this.selects()}
         {this.state.loading ? (
           <h5>
             <svg class="icon icon-spinner spin">
@@ -158,7 +159,6 @@ export class Community extends Component<any, State> {
                   </small>
                 )}
               </h5>
-              {this.selects()}
               {this.listings()}
               {this.paginator()}
             </div>
@@ -200,7 +200,7 @@ export class Community extends Component<any, State> {
           onChange={this.handleDataTypeChange}
         />
 
-        <span class="mx-2">
+        <span class="mx-3">
           <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
         </span>
         <a
@@ -209,7 +209,7 @@ export class Community extends Component<any, State> {
           }`}
           target="_blank"
         >
-          <svg class="icon mx-2 text-muted small">
+          <svg class="icon text-muted small">
             <use xlinkHref="#icon-rss">#</use>
           </svg>
         </a>

ui/src/components/main.tsx

@@ -386,6 +386,7 @@ export class Main extends Component<any, MainState> {
   posts() {
     return (
       <div class="main-content-wrapper">
+        {this.selects()}
         {this.state.loading ? (
           <h5>
             <svg class="icon icon-spinner spin">
@@ -394,7 +395,6 @@ export class Main extends Component<any, MainState> {
           </h5>
         ) : (
           <div>
-            {this.selects()}
             {this.listings()}
             {this.paginator()}
           </div>
@@ -428,7 +428,7 @@ export class Main extends Component<any, MainState> {
           type_={this.state.dataType}
           onChange={this.handleDataTypeChange}
         />
-        <span class="mx-2">
+        <span class="mx-3">
           <ListingTypeSelect
             type_={this.state.listingType}
             onChange={this.handleListingTypeChange}

ui/src/components/post-listing.tsx

@@ -171,13 +171,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="ml-4">
           <div className="post-title">
             <h5 className="mb-0 d-inline">
-              <Link
+              {this.props.showBody && post.url ? (
-                className="text-body"
+                <a
-                to={`/post/${post.id}`}
+                  className="text-body"
-                title={i18n.t('comments')}
+                  href={post.url}
-              >
+                  target="_blank"
-                {post.name}
+                  title={post.url}
-              </Link>
+                >
+                  {post.name}
+                </a>
+              ) : (
+                <Link
+                  className="text-body"
+                  to={`/post/${post.id}`}
+                  title={i18n.t('comments')}
+                >
+                  {post.name}
+                </Link>
+              )}
             </h5>
             {post.url && (
               <small class="d-inline-block">