From: Oliver White <46496055+oliverwhite19@users.noreply.github.com>
Date: Fri, 7 Jul 2023 12:22:50 +0000 (-0400)
Subject: fix: Adjust sidebar banner to wrap bellow the title (#1819)
X-Git-Url: http://these/git/ui/assets/static/%7Bthis.state.url%7D?a=commitdiff_plain;h=53a5bfe59271ec6de08c43e0731784e33519cc3a;p=lemmy-ui.git

fix: Adjust sidebar banner to wrap bellow the title (#1819)

* fix: Adjust sidebar banner to wrap bellow the title

* remove flex and add bottom border when uncollapsed

* use classnames utility
---

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 78090dd..52ecbbc 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { mdToHtml } from "../../markdown";
@@ -32,10 +33,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     return (
       <div className="site-sidebar accordion">
         <section id="sidebarInfo" className="card border-secondary mb-3">
-          <header
-            className="card-header d-flex align-items-center"
-            id="sidebarInfoHeader"
-          >
+          <header className="card-header" id="sidebarInfoHeader">
             {this.siteName()}
             {!this.state.collapsed && (
               <BannerIconHeader banner={this.props.site.banner} />
@@ -54,7 +52,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   siteName() {
     return (
-      <>
+      <div className={classNames({ "mb-2": !this.state.collapsed })}>
         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
         {!this.props.isMobile && (
           <button
@@ -83,7 +81,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             )}
           </button>
         )}
-      </>
+      </div>
     );
   }