From e441aa43bd2b69a5188ba6a25b41e14617de3eb1 Mon Sep 17 00:00:00 2001
From: Kshitij Sobti <kshitij@sobti.in>
Date: Mon, 28 Mar 2022 18:24:05 +0530
Subject: [PATCH] fix: align empty state in the center and auto-grow container
 (#103)

Makes the empty page illustration be centrally aligned on the page.

Makes the content container expand to take the full vertical space.
---
 .../discussions-home/DiscussionsHome.jsx      |  2 +-
 src/discussions/empty-posts/EmptyPage.jsx     | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
index 9dd46b86..e97e9849 100644
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -79,7 +79,7 @@ export default function DiscussionsHome() {
           path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
           component={provider === DiscussionProvider.LEGACY ? LegacyBreadcrumbMenu : BreadcrumbMenu}
         />
-        <div className="d-flex flex-row overflow-hidden">
+        <div className="d-flex flex-row overflow-hidden flex-grow-1">
           <DiscussionSidebar displaySidebar={displaySidebar} />
           {displayContentArea && <DiscussionContent />}
           {!displayContentArea && (
diff --git a/src/discussions/empty-posts/EmptyPage.jsx b/src/discussions/empty-posts/EmptyPage.jsx
index 193f647a..90dd0cca 100644
--- a/src/discussions/empty-posts/EmptyPage.jsx
+++ b/src/discussions/empty-posts/EmptyPage.jsx
@@ -15,20 +15,22 @@ function EmptyPage({
   fullWidth = false,
 }) {
   const containerClasses = classNames(
-    'align-content-start align-items-center d-flex w-100 flex-column pt-5',
+    'justify-content-center align-items-center d-flex w-100 flex-column pt-5',
     { 'bg-light-300': !fullWidth },
   );
 
   return (
     <div className={containerClasses}>
-      <EmptyIcon />
-      <h3 className="pt-3">{title}</h3>
-      {subTitle && <p className="pb-2">{subTitle}</p>}
-      {action && actionText && (
-        <Button onClick={action} variant="outline-dark">
-          {actionText}
-        </Button>
-      )}
+      <div className="d-flex flex-column align-items-center">
+        <EmptyIcon />
+        <h3 className="pt-3">{title}</h3>
+        {subTitle && <p className="pb-2">{subTitle}</p>}
+        {action && actionText && (
+          <Button onClick={action} variant="outline-dark">
+            {actionText}
+          </Button>
+        )}
+      </div>
     </div>
   );
 }