From 4e18d7e505665f02b739f4db33bc8556bed2b16c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Oct 2021 11:59:59 -0500
Subject: [PATCH] FollowRecommendations: fix transparent background

---
 app/soapbox/features/home_timeline/index.js | 5 +++--
 app/styles/components/columns.scss          | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/home_timeline/index.js b/app/soapbox/features/home_timeline/index.js
index 69b8e81b4..d746e9991 100644
--- a/app/soapbox/features/home_timeline/index.js
+++ b/app/soapbox/features/home_timeline/index.js
@@ -96,10 +96,11 @@ class HomeTimeline extends React.PureComponent {
   render() {
     const { intl, siteTitle, isLoading, isEmpty, features } = this.props;
     const { done } = this.state;
+    const showSuggestions = features.suggestions && isEmpty && !isLoading && !done;
 
     return (
-      <Column label={intl.formatMessage(messages.title)} transparent>
-        {(features.suggestions && isEmpty && !isLoading && !done) ? (
+      <Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions}>
+        {showSuggestions ? (
           <BundleContainer fetchComponent={FollowRecommendationsContainer}>
             {Component => <Component onDone={this.handleDone} />}
           </BundleContainer>
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 2748bab91..88bfab6c6 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -858,6 +858,10 @@
 
 .column-list {
   position: relative;
+
+  &__empty-message {
+    padding: 0 20px;
+  }
 }
 
 .column-loading {