From 9720c34fd6fdf19359cb2337a6fb5b0ef9c74aeb Mon Sep 17 00:00:00 2001
From: Anton <sab94a@yandex.ru>
Date: Wed, 28 Jun 2023 11:13:04 +0300
Subject: [PATCH] fix(ProjectListItemCollapsable): fix border error

---
 src/components/CollapsableItem.tsx            | 31 +++++++++----------
 .../ProjectListItemCollapsable.tsx            |  6 ++--
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/CollapsableItem.tsx b/src/components/CollapsableItem.tsx
index 647f55a32..356ac91d8 100644
--- a/src/components/CollapsableItem.tsx
+++ b/src/components/CollapsableItem.tsx
@@ -56,7 +56,7 @@ const StyledHeaderContent = styled.div<{ highlighted?: boolean }>`
     `}
 `;
 
-const StyledCollapsableContainer = styled.div<{ collapsed: boolean; deep: number; showLine: boolean }>`
+const StyledCollapsableContainer = styled.div<{ collapsed: boolean; deep: number }>`
     position: relative;
 
     border-radius: ${radiusM};
@@ -156,19 +156,16 @@ export const CollapsableItem: FC<{
     content: ReactNode;
     deep?: number;
     collapsed: boolean;
-    showLine?: boolean;
-}> = ({ onClick, children, header, collapsed, deep = 0, showLine = true, content }) => {
-    return (
-        <StyledCollapsableContainer collapsed={collapsed} deep={deep} showLine={showLine}>
-            <StyledCollapsableHeader onClick={onClick}>
-                <StyledParentDot />
-                <StyledDot />
-                <StyledHeaderContent highlighted={!!onClick && collapsed}>{header}</StyledHeaderContent>
-            </StyledCollapsableHeader>
-            {nullable(children, (ch) => (
-                <StyledCollapsableItem>{ch}</StyledCollapsableItem>
-            ))}
-            {!collapsed ? content : null}
-        </StyledCollapsableContainer>
-    );
-};
+}> = ({ onClick, children, header, collapsed, deep = 0, content }) => (
+    <StyledCollapsableContainer collapsed={collapsed} deep={deep}>
+        <StyledCollapsableHeader onClick={onClick}>
+            <StyledParentDot />
+            <StyledDot />
+            <StyledHeaderContent highlighted={!!onClick && collapsed}>{header}</StyledHeaderContent>
+        </StyledCollapsableHeader>
+        {nullable(children, (ch) => (
+            <StyledCollapsableItem>{ch}</StyledCollapsableItem>
+        ))}
+        {!collapsed ? content : null}
+    </StyledCollapsableContainer>
+);
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
index f8d10c855..b457cd3cb 100644
--- a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
+++ b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -38,12 +38,12 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     loading = false,
     deep = 0,
 }) => {
-    const contentHidden = collapsed || loading;
-
-    const offset = collapseOffset * (contentHidden ? deep - 1 : deep);
     const childs = useMemo(() => project.children.map(({ id }) => id), [project]);
 
     const onClickEnabled = childs.length;
+    const contentHidden = !childs.length || collapsed || loading;
+
+    const offset = collapseOffset * (contentHidden ? deep - 1 : deep);
 
     const onGoalsButtonClick = useCallback(
         (e: MouseEvent) => {