diff --git a/web/sidebar/community-drawer-content.react.js b/web/sidebar/community-drawer-content.react.js --- a/web/sidebar/community-drawer-content.react.js +++ b/web/sidebar/community-drawer-content.react.js @@ -46,6 +46,7 @@ key={item.threadInfo.id} toggleExpanded={setOpenCommunityOrClose} expanded={item.threadInfo.id === openCommunity} + paddingLeft={10} /> )); diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css --- a/web/sidebar/community-drawer-item.css +++ b/web/sidebar/community-drawer-item.css @@ -1,8 +1,8 @@ .threadEntry { display: flex; flex-direction: row; - margin-top: 8px; - margin-bottom: 8px; + padding-top: 8px; + padding-bottom: 8px; } .threadListContainer { @@ -12,6 +12,7 @@ .titleWrapper { overflow: hidden; + width: 100%; } .title { @@ -44,14 +45,9 @@ display: flex; } -.chatItem { - margin-left: 16px; -} - .communityBase { padding: 2px; - padding-right: 24px; - padding-left: 8px; + padding-right: 4px; overflow: hidden; } @@ -62,7 +58,6 @@ } .subchannelsButton { - margin-left: 24px; margin-bottom: 6px; margin-top: 4px; display: flex; diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js --- a/web/sidebar/community-drawer-item.react.js +++ b/web/sidebar/community-drawer-item.react.js @@ -16,13 +16,18 @@ +itemData: CommunityDrawerItemData, +toggleExpanded: (threadID: string) => void, +expanded: boolean, + +paddingLeft: number, }; +const indentation = 12; +const subchannelsButtonIndentation = 24; + function CommunityDrawerItem(props: DrawerItemProps): React.Node { const { itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle }, expanded, toggleExpanded, + paddingLeft, } = props; const children = React.useMemo(() => { @@ -30,8 +35,12 @@ return null; } if (hasSubchannelsButton) { + const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation; return ( -
+
); @@ -43,9 +52,10 @@ )); - }, [expanded, hasSubchannelsButton, itemChildren, threadInfo]); + }, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]); const onExpandToggled = React.useCallback(() => { toggleExpanded(threadInfo.id); @@ -91,10 +101,12 @@ const titleLabel = classnames(css.title, css[labelStyle]); + const wrapper = React.useMemo(() => ({ paddingLeft }), [paddingLeft]); + return ( <> -
+