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/%7B%60%24%7BarchiveTodayUrl%7D/%24%7B%60data:application/static/git-logo.png?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> ); }