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 78090dd9e40661c094ecf8074e81cd178011558d..52ecbbc7b3dc8c4d2dbb7385e87021cd91f50d98 100644 (file)
--- 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>
     );
   }