From ff4d37d03aa683801711199f774cfd633f858f5d Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 13:51:21 -0400
Subject: [PATCH 01/10] fix(a11y): Fix some a11y issues in Site Sidebar and use
 native Bootstrap Collapse and Card classes

---
 .../components/common/banner-icon-header.tsx  |  4 +-
 src/shared/components/home/site-sidebar.tsx   | 49 ++++++++++++-------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/shared/components/common/banner-icon-header.tsx b/src/shared/components/common/banner-icon-header.tsx
index 1df23bef..d2fae2e1 100644
--- a/src/shared/components/common/banner-icon-header.tsx
+++ b/src/shared/components/common/banner-icon-header.tsx
@@ -14,7 +14,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
   render() {
     const banner = this.props.banner;
     const icon = this.props.icon;
-    return (
+    return banner || icon ? (
       <div className="position-relative mb-2">
         {banner && <PictrsImage src={banner} banner alt="" />}
         {icon && (
@@ -26,6 +26,6 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
           />
         )}
       </div>
-    );
+    ) : null;
   }
 }
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 66a48ca1..283ddf83 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -29,17 +29,23 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <section id="sidebarInfo" className="card border-secondary mb-3">
-        <div className="card-body">
-          <div>
-            <div className="mb-2">{this.siteName()}</div>
-            {!this.state.collapsed && (
-              <>
-                <BannerIconHeader banner={this.props.site.banner} />
-                {this.siteInfo()}
-              </>
-            )}
-          </div>
+      <section
+        id="sidebarInfo"
+        className="card border-secondary mb-3 overflow-hidden"
+      >
+        <header className="card-header" id="sidebarInfoHeader">
+          {this.siteName()}
+          {!this.state.collapsed && (
+            <BannerIconHeader banner={this.props.site.banner} />
+          )}
+        </header>
+
+        <div
+          id="sidebarInfoBody"
+          className="collapse show"
+          aria-labelledby="sidebarInfoHeader"
+        >
+          <div className="card-body">{this.siteInfo()}</div>
         </div>
       </section>
     );
@@ -47,13 +53,22 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   siteName() {
     return (
-      <h5 className="mb-0 d-inline">
-        {this.props.site.name}
+      <div className="d-flex align-items-center">
+        <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
         <button
-          className="btn btn-sm text-muted"
+          type="button"
+          className="btn btn-sm"
           onClick={linkEvent(this, this.handleCollapseSidebar)}
-          aria-label={i18n.t("collapse")}
-          data-tippy-content={i18n.t("collapse")}
+          aria-label={
+            this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+          }
+          data-tippy-content={
+            this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+          }
+          data-bs-toggle="collapse"
+          data-bs-target="#sidebarInfoBody"
+          aria-expanded="true"
+          aria-controls="sidebarInfoBody"
         >
           {this.state.collapsed ? (
             <Icon icon="plus-square" classes="icon-inline" />
@@ -61,7 +76,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             <Icon icon="minus-square" classes="icon-inline" />
           )}
         </button>
-      </h5>
+      </div>
     );
   }
 

From 878e0f0f85d078b5e7ee09d738ef9f39d253a224 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 14:24:13 -0400
Subject: [PATCH 02/10] fix: Add .accordion wrapper around sidebar to obtain
 negative bottom margin

---
 src/shared/components/home/site-sidebar.tsx | 38 +++++++++++----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 283ddf83..b09f27d2 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -29,25 +29,27 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <section
-        id="sidebarInfo"
-        className="card border-secondary mb-3 overflow-hidden"
-      >
-        <header className="card-header" id="sidebarInfoHeader">
-          {this.siteName()}
-          {!this.state.collapsed && (
-            <BannerIconHeader banner={this.props.site.banner} />
-          )}
-        </header>
-
-        <div
-          id="sidebarInfoBody"
-          className="collapse show"
-          aria-labelledby="sidebarInfoHeader"
+      <div className="accordion">
+        <section
+          id="sidebarInfo"
+          className="card border-secondary mb-3 overflow-hidden"
         >
-          <div className="card-body">{this.siteInfo()}</div>
-        </div>
-      </section>
+          <header className="card-header" id="sidebarInfoHeader">
+            {this.siteName()}
+            {!this.state.collapsed && (
+              <BannerIconHeader banner={this.props.site.banner} />
+            )}
+          </header>
+
+          <div
+            id="sidebarInfoBody"
+            className="collapse show"
+            aria-labelledby="sidebarInfoHeader"
+          >
+            <div className="card-body">{this.siteInfo()}</div>
+          </div>
+        </section>
+      </div>
     );
   }
 

From 072d253baa978b66708abe6bc31a8267b37e4595 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 15:09:10 -0400
Subject: [PATCH 03/10] fix(a11y): Apply same accordion/collapse markup to
 Subscribed Communities sidebar card

---
 src/shared/components/home/home.tsx         | 80 +++++++++++++--------
 src/shared/components/home/site-sidebar.tsx |  9 ++-
 2 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 4d79bc63..851c5c25 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -492,12 +492,14 @@ export class Home extends Component<any, HomeState> {
           showLocal={showLocal(this.isoData)}
         />
         {this.hasFollows && (
-          <section
-            id="sidebarSubscribed"
-            className="card border-secondary mb-3"
-          >
-            <div className="card-body">{this.subscribedCommunities}</div>
-          </section>
+          <div className="accordion">
+            <section
+              id="sidebarSubscribed"
+              className="card border-secondary mb-3"
+            >
+              {this.subscribedCommunities}
+            </section>
+          </div>
         )}
       </div>
     );
@@ -543,39 +545,59 @@ export class Home extends Component<any, HomeState> {
     const { subscribedCollapsed } = this.state;
 
     return (
-      <div>
-        <h5>
-          <T class="d-inline" i18nKey="subscribed_to_communities">
-            #
-            <Link className="text-body" to="/communities">
+      <>
+        <header
+          className="card-header d-flex align-items-center"
+          id="sidebarSubscribedHeader"
+        >
+          <h5 className="mb-0 d-inline">
+            <T class="d-inline" i18nKey="subscribed_to_communities">
               #
-            </Link>
-          </T>
+              <Link className="text-body" to="/communities">
+                #
+              </Link>
+            </T>
+          </h5>
           <button
+            type="button"
             className="btn btn-sm text-muted"
             onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            aria-label={i18n.t("collapse")}
-            data-tippy-content={i18n.t("collapse")}
+            aria-label={
+              subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-tippy-content={
+              subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebarSubscribedBody"
+            aria-expanded="true"
+            aria-controls="sidebarSubscribedBody"
           >
             <Icon
               icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
               classes="icon-inline"
             />
           </button>
-        </h5>
-        {!subscribedCollapsed && (
-          <ul className="list-inline mb-0">
-            {UserService.Instance.myUserInfo?.follows.map(cfv => (
-              <li
-                key={cfv.community.id}
-                className="list-inline-item d-inline-block"
-              >
-                <CommunityLink community={cfv.community} />
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+        </header>
+        <div
+          id="sidebarSubscribedBody"
+          className="collapse show"
+          aria-labelledby="sidebarSubscribedHeader"
+        >
+          <div className="card-body">
+            <ul className="list-inline mb-0">
+              {UserService.Instance.myUserInfo?.follows.map(cfv => (
+                <li
+                  key={cfv.community.id}
+                  className="list-inline-item d-inline-block"
+                >
+                  <CommunityLink community={cfv.community} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </>
     );
   }
 
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index b09f27d2..3df4eb69 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -34,7 +34,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
           id="sidebarInfo"
           className="card border-secondary mb-3 overflow-hidden"
         >
-          <header className="card-header" id="sidebarInfoHeader">
+          <header
+            className="card-header d-flex align-items-center"
+            id="sidebarInfoHeader"
+          >
             {this.siteName()}
             {!this.state.collapsed && (
               <BannerIconHeader banner={this.props.site.banner} />
@@ -55,7 +58,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   siteName() {
     return (
-      <div className="d-flex align-items-center">
+      <>
         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
         <button
           type="button"
@@ -78,7 +81,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             <Icon icon="minus-square" classes="icon-inline" />
           )}
         </button>
-      </div>
+      </>
     );
   }
 

From cf5c8a1c07a73581eb11aeaf7829460863ce2b5b Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 15:24:55 -0400
Subject: [PATCH 04/10] fix(a11y): Fix some mobile styles for Sidebar Cards

---
 src/shared/components/home/home.tsx         | 53 +++++++++++----------
 src/shared/components/home/site-sidebar.tsx | 45 +++++++++--------
 2 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 851c5c25..23b09414 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -443,16 +443,17 @@ export class Home extends Component<any, HomeState> {
               admins={admins}
               counts={counts}
               showLocal={showLocal(this.isoData)}
+              isMobile={true}
             />
           )}
           {showTrendingMobile && (
-            <div className="col-12 card border-secondary mb-3">
+            <div className="card border-secondary mb-3">
               <div className="card-body">{this.trendingCommunities(true)}</div>
             </div>
           )}
           {showSubscribedMobile && (
-            <div className="col-12 card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
+            <div className="card border-secondary mb-3">
+              {this.subscribedCommunities(true)}
             </div>
           )}
         </div>
@@ -497,7 +498,7 @@ export class Home extends Component<any, HomeState> {
               id="sidebarSubscribed"
               className="card border-secondary mb-3"
             >
-              {this.subscribedCommunities}
+              {this.subscribedCommunities(false)}
             </section>
           </div>
         )}
@@ -541,7 +542,7 @@ export class Home extends Component<any, HomeState> {
     }
   }
 
-  get subscribedCommunities() {
+  subscribedCommunities(isMobile = false) {
     const { subscribedCollapsed } = this.state;
 
     return (
@@ -558,26 +559,28 @@ export class Home extends Component<any, HomeState> {
               </Link>
             </T>
           </h5>
-          <button
-            type="button"
-            className="btn btn-sm text-muted"
-            onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            aria-label={
-              subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
-            }
-            data-tippy-content={
-              subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
-            }
-            data-bs-toggle="collapse"
-            data-bs-target="#sidebarSubscribedBody"
-            aria-expanded="true"
-            aria-controls="sidebarSubscribedBody"
-          >
-            <Icon
-              icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
-              classes="icon-inline"
-            />
-          </button>
+          {!isMobile && (
+            <button
+              type="button"
+              className="btn btn-sm text-muted"
+              onClick={linkEvent(this, this.handleCollapseSubscribe)}
+              aria-label={
+                subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+              }
+              data-tippy-content={
+                subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+              }
+              data-bs-toggle="collapse"
+              data-bs-target="#sidebarSubscribedBody"
+              aria-expanded="true"
+              aria-controls="sidebarSubscribedBody"
+            >
+              <Icon
+                icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
+                classes="icon-inline"
+              />
+            </button>
+          )}
         </header>
         <div
           id="sidebarSubscribedBody"
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 3df4eb69..f4081737 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -12,6 +12,7 @@ interface SiteSidebarProps {
   showLocal: boolean;
   counts?: SiteAggregates;
   admins?: PersonView[];
+  isMobile?: boolean;
 }
 
 interface SiteSidebarState {
@@ -60,27 +61,29 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     return (
       <>
         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
-        <button
-          type="button"
-          className="btn btn-sm"
-          onClick={linkEvent(this, this.handleCollapseSidebar)}
-          aria-label={
-            this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
-          }
-          data-tippy-content={
-            this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
-          }
-          data-bs-toggle="collapse"
-          data-bs-target="#sidebarInfoBody"
-          aria-expanded="true"
-          aria-controls="sidebarInfoBody"
-        >
-          {this.state.collapsed ? (
-            <Icon icon="plus-square" classes="icon-inline" />
-          ) : (
-            <Icon icon="minus-square" classes="icon-inline" />
-          )}
-        </button>
+        {!this.props.isMobile && (
+          <button
+            type="button"
+            className="btn btn-sm"
+            onClick={linkEvent(this, this.handleCollapseSidebar)}
+            aria-label={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-tippy-content={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebarInfoBody"
+            aria-expanded="true"
+            aria-controls="sidebarInfoBody"
+          >
+            {this.state.collapsed ? (
+              <Icon icon="plus-square" classes="icon-inline" />
+            ) : (
+              <Icon icon="minus-square" classes="icon-inline" />
+            )}
+          </button>
+        )}
       </>
     );
   }

From 0d302c0e40c52a15d39f0531c4d1af56bd9d873e Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 15:32:29 -0400
Subject: [PATCH 05/10] fix: Cleaner logic

---
 .../components/common/banner-icon-header.tsx  | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/shared/components/common/banner-icon-header.tsx b/src/shared/components/common/banner-icon-header.tsx
index d2fae2e1..7028ef4f 100644
--- a/src/shared/components/common/banner-icon-header.tsx
+++ b/src/shared/components/common/banner-icon-header.tsx
@@ -14,18 +14,20 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
   render() {
     const banner = this.props.banner;
     const icon = this.props.icon;
-    return banner || icon ? (
-      <div className="position-relative mb-2">
-        {banner && <PictrsImage src={banner} banner alt="" />}
-        {icon && (
-          <PictrsImage
-            src={icon}
-            iconOverlay
-            pushup={!!this.props.banner}
-            alt=""
-          />
-        )}
-      </div>
-    ) : null;
+    return (
+      (banner || icon) && (
+        <div className="position-relative mb-2">
+          {banner && <PictrsImage src={banner} banner alt="" />}
+          {icon && (
+            <PictrsImage
+              src={icon}
+              iconOverlay
+              pushup={!!this.props.banner}
+              alt=""
+            />
+          )}
+        </div>
+      )
+    );
   }
 }

From c8758317f7ed08b05ec80597fd3df06e3618d514 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 15:32:49 -0400
Subject: [PATCH 06/10] fix: Fix Trending sidebar card too

---
 src/shared/components/home/home.tsx | 68 +++++++++++++++--------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 23b09414..0acef492 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent, MouseEventHandler } from "inferno";
 import { T } from "inferno-i18next-dess";
@@ -448,7 +449,7 @@ export class Home extends Component<any, HomeState> {
           )}
           {showTrendingMobile && (
             <div className="card border-secondary mb-3">
-              <div className="card-body">{this.trendingCommunities(true)}</div>
+              {this.trendingCommunities(true)}
             </div>
           )}
           {showSubscribedMobile && (
@@ -472,19 +473,7 @@ export class Home extends Component<any, HomeState> {
     return (
       <div id="sidebarContainer">
         <section id="sidebarMain" className="card border-secondary mb-3">
-          <div className="card-body">
-            {this.trendingCommunities()}
-            {canCreateCommunity(this.state.siteRes) && (
-              <LinkButton
-                path="/create_community"
-                translationKey="create_a_community"
-              />
-            )}
-            <LinkButton
-              path="/communities"
-              translationKey="explore_communities"
-            />
-          </div>
+          {this.trendingCommunities()}
         </section>
         <SiteSidebar
           site={site}
@@ -517,25 +506,40 @@ export class Home extends Component<any, HomeState> {
       case "success": {
         const trending = this.state.trendingCommunitiesRes.data.communities;
         return (
-          <div className={!isMobile ? "mb-2" : ""}>
-            <h5>
-              <T i18nKey="trending_communities">
-                #
-                <Link className="text-body" to="/communities">
+          <div
+            className={classNames({
+              "mb-2": !isMobile,
+            })}
+          >
+            <header className="card-header d-flex align-items-center">
+              <h5 className="mb-0">
+                <T i18nKey="trending_communities">
                   #
-                </Link>
-              </T>
-            </h5>
-            <ul className="list-inline mb-0">
-              {trending.map(cv => (
-                <li
-                  key={cv.community.id}
-                  className="list-inline-item d-inline-block"
-                >
-                  <CommunityLink community={cv.community} />
-                </li>
-              ))}
-            </ul>
+                  <Link className="text-body" to="/communities">
+                    #
+                  </Link>
+                </T>
+              </h5>
+            </header>
+            <div className="card-body">
+              <ul className="list-inline">
+                {trending.map(cv => (
+                  <li key={cv.community.id} className="list-inline-item">
+                    <CommunityLink community={cv.community} />
+                  </li>
+                ))}
+              </ul>
+              {canCreateCommunity(this.state.siteRes) && (
+                <LinkButton
+                  path="/create_community"
+                  translationKey="create_a_community"
+                />
+              )}
+              <LinkButton
+                path="/communities"
+                translationKey="explore_communities"
+              />
+            </div>
           </div>
         );
       }

From 3564c6c379ff7be50b26dea9240080656bc30316 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 17:01:14 -0400
Subject: [PATCH 07/10] fix: Fix some small style issues

---
 src/shared/components/home/home.tsx         | 25 +++++++++------------
 src/shared/components/home/site-sidebar.tsx |  5 +----
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 0acef492..483d8ccb 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent, MouseEventHandler } from "inferno";
 import { T } from "inferno-i18next-dess";
@@ -506,11 +505,7 @@ export class Home extends Component<any, HomeState> {
       case "success": {
         const trending = this.state.trendingCommunitiesRes.data.communities;
         return (
-          <div
-            className={classNames({
-              "mb-2": !isMobile,
-            })}
-          >
+          <>
             <header className="card-header d-flex align-items-center">
               <h5 className="mb-0">
                 <T i18nKey="trending_communities">
@@ -522,13 +517,15 @@ export class Home extends Component<any, HomeState> {
               </h5>
             </header>
             <div className="card-body">
-              <ul className="list-inline">
-                {trending.map(cv => (
-                  <li key={cv.community.id} className="list-inline-item">
-                    <CommunityLink community={cv.community} />
-                  </li>
-                ))}
-              </ul>
+              {trending.length > 0 && (
+                <ul className="list-inline">
+                  {trending.map(cv => (
+                    <li key={cv.community.id} className="list-inline-item">
+                      <CommunityLink community={cv.community} />
+                    </li>
+                  ))}
+                </ul>
+              )}
               {canCreateCommunity(this.state.siteRes) && (
                 <LinkButton
                   path="/create_community"
@@ -540,7 +537,7 @@ export class Home extends Component<any, HomeState> {
                 translationKey="explore_communities"
               />
             </div>
-          </div>
+          </>
         );
       }
     }
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index f4081737..cc587bfb 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -31,10 +31,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
   render() {
     return (
       <div className="accordion">
-        <section
-          id="sidebarInfo"
-          className="card border-secondary mb-3 overflow-hidden"
-        >
+        <section id="sidebarInfo" className="card border-secondary mb-3">
           <header
             className="card-header d-flex align-items-center"
             id="sidebarInfoHeader"

From ffaa3c4fc5eb1230a559a60b3acbbe575d013583 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 19:16:24 -0400
Subject: [PATCH 08/10] fix: Remove unused var

---
 src/shared/components/home/home.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 483d8ccb..c7fccb8e 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -448,7 +448,7 @@ export class Home extends Component<any, HomeState> {
           )}
           {showTrendingMobile && (
             <div className="card border-secondary mb-3">
-              {this.trendingCommunities(true)}
+              {this.trendingCommunities}
             </div>
           )}
           {showSubscribedMobile && (
@@ -472,7 +472,7 @@ export class Home extends Component<any, HomeState> {
     return (
       <div id="sidebarContainer">
         <section id="sidebarMain" className="card border-secondary mb-3">
-          {this.trendingCommunities()}
+          {this.trendingCommunities}
         </section>
         <SiteSidebar
           site={site}
@@ -494,7 +494,7 @@ export class Home extends Component<any, HomeState> {
     );
   }
 
-  trendingCommunities(isMobile = false) {
+  trendingCommunities() {
     switch (this.state.trendingCommunitiesRes?.state) {
       case "loading":
         return (

From f702cbd2564bca9cfa28beadb28ff9934cc0a66b Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 19:27:11 -0400
Subject: [PATCH 10/10] fix: Fix build error

---
 src/shared/components/home/home.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index c7fccb8e..4f9b9694 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -448,7 +448,7 @@ export class Home extends Component<any, HomeState> {
           )}
           {showTrendingMobile && (
             <div className="card border-secondary mb-3">
-              {this.trendingCommunities}
+              {this.trendingCommunities()}
             </div>
           )}
           {showSubscribedMobile && (
@@ -472,7 +472,7 @@ export class Home extends Component<any, HomeState> {
     return (
       <div id="sidebarContainer">
         <section id="sidebarMain" className="card border-secondary mb-3">
-          {this.trendingCommunities}
+          {this.trendingCommunities()}
         </section>
         <SiteSidebar
           site={site}