From 022ccc7da23d89232759a5161a75040163f9ebb1 Mon Sep 17 00:00:00 2001
From: Siarhei Iukou <siarhei_iukou@epam.com>
Date: Thu, 28 Mar 2024 20:22:14 +0300
Subject: [PATCH] EPMRPP-90025 || bug fix sidebar

---
 app/src/controllers/user/selectors.js         |  6 ++---
 .../organizationsItem/organizationsItem.jsx   |  4 ++-
 .../organizationsItem/organizationsItem.scss  | 26 +++++++++++++++----
 .../projectItem/projectItem.scss              | 11 +++++---
 4 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/src/controllers/user/selectors.js b/app/src/controllers/user/selectors.js
index e92edb81db..38cfd87f5a 100644
--- a/app/src/controllers/user/selectors.js
+++ b/app/src/controllers/user/selectors.js
@@ -50,7 +50,7 @@ export const availableProjectsSelector = createSelector(
     );
 
     return Object.keys(assignedOrganizations)
-      .sort((a, b) => a.toLowerCase() - b.toLowerCase())
+      .sort((a, b) => (a.toLowerCase() > b.toLowerCase() ? 1 : -1))
       .reduce((projects, assignedOrganization) => {
         const { organizationSlug, organizationId, organizationName } = assignedOrganizations[
           assignedOrganization
@@ -65,8 +65,8 @@ export const availableProjectsSelector = createSelector(
               {
                 organizationSlug,
                 organizationName,
-                projects: organizationProjects.sort(
-                  (a, b) => a.projectName.toLowerCase() - b.projectName.toLowerCase(),
+                projects: organizationProjects.sort((a, b) =>
+                  a.projectName.toLowerCase() > b.projectName.toLowerCase() ? 1 : -1,
                 ),
               },
             ]
diff --git a/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.jsx b/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.jsx
index ff2eaf7550..9592583757 100644
--- a/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.jsx
+++ b/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.jsx
@@ -93,7 +93,9 @@ export const OrganizationsItem = ({
       >
         <div className={cx('header-item-wrapper')}>
           <button
-            className={cx('collapse-projects', { focus: isFocusedCollapsedButton })}
+            className={cx('collapse-projects', {
+              focus: isFocusedCollapsedButton,
+            })}
             onClick={onClickCollapseButton}
             onFocus={onFocusCollapseButton}
             onBlur={onBlurCollapseButton}
diff --git a/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.scss b/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.scss
index bcbea7598c..4980e8306e 100644
--- a/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.scss
+++ b/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/organizationsItem.scss
@@ -75,7 +75,9 @@
 
 .collapse-projects {
   color: $COLOR--darkmode-gray-100;
-  width: 215px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 0;
 
   &:focus-visible {
     color: $COLOR--darkmode-gray-100;
@@ -88,17 +90,29 @@
 }
 
 .organization-open {
-  opacity: 0;
   color: $COLOR--darkmode-topaz-text;
-  min-width: 69px;
+  max-width: 0;
+  font-size: 0;
+  padding: 0;
+  border-width: 0;
 
   svg {
     margin-left: 8px;
+    width: 0;
+    height: 0;
   }
 }
 
 .displayed {
-  opacity: 1;
+  max-width: 100%;
+  font-size: 13px;
+  padding: 8px;
+  border-width: 2px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .project-item {
@@ -113,5 +127,7 @@
 
 .organization-name {
   margin-left: 8px;
-  @include truncate(185px);
+  width: 100%;
+  text-align: start;
+  @include truncate();
 }
diff --git a/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/projectItem/projectItem.scss b/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/projectItem/projectItem.scss
index 0cbb4c17de..81eadd7540 100644
--- a/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/projectItem/projectItem.scss
+++ b/app/src/layouts/appLayout/projectSidebar/organizationsControl/organizationsPopover/organizationsItem/projectItem/projectItem.scss
@@ -23,9 +23,6 @@
 }
 
 .project-item-link {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
   max-width: 100%;
   display: flex;
   align-items: center;
@@ -45,6 +42,14 @@
     outline: none;
     border: 2px solid $COLOR--topaz-focused;
   }
+
+  span {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 244px;
+  }
 }
 
 .active {