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.

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 && (

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>
   );
 }