From 204e7a0c87b8e38e8f5a6a8c76d06a7f36c8ca37 Mon Sep 17 00:00:00 2001
From: Eric Mc Sween <eric.mcsween@overleaf.com>
Date: Wed, 8 Feb 2023 09:45:21 -0500
Subject: [PATCH] Merge pull request #11719 from overleaf/em-survey-sidebar

Make survey notification the width of the dashboard sidebar

GitOrigin-RevId: 754ec21692505107e683369628a2b5481e7cef9a
---
 .../project-list/components/project-list-root.tsx    |  2 +-
 .../project-list/components/sidebar/sidebar.tsx      |  4 ++++
 .../frontend/stylesheets/app/project-list-react.less | 12 +++---------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx
index 244d625cae..a684ace0fc 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-root.tsx
@@ -87,7 +87,7 @@ function ProjectListPageContent() {
                   </div>
                 </Col>
               </Row>
-              <div className="project-list-sidebar-survey-wrapper">
+              <div className="project-list-sidebar-survey-wrapper visible-xs">
                 <SurveyWidget />
               </div>
               <div className="visible-xs mt-1">
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
index 76ceb794f2..2a3f05038e 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
@@ -1,6 +1,7 @@
 import NewProjectButton from '../new-project-button'
 import SidebarFilters from './sidebar-filters'
 import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
+import SurveyWidget from '../survey-widget'
 import { usePersistedResize } from '../../../../shared/hooks/use-resize'
 
 function Sidebar() {
@@ -25,6 +26,9 @@ function Sidebar() {
           {showAddAffiliationWidget && <hr />}
           <AddAffiliation />
         </aside>
+        <div className="project-list-sidebar-survey-wrapper">
+          <SurveyWidget />
+        </div>
       </div>
       <div
         {...getHandleProps({
diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less
index 4d455924f4..8c1bec381c 100644
--- a/services/web/frontend/stylesheets/app/project-list-react.less
+++ b/services/web/frontend/stylesheets/app/project-list-react.less
@@ -1,8 +1,6 @@
 @project-list-sidebar-wrapper-flex: 0 0 15%;
 
 .project-list-react {
-  overflow-x: hidden;
-
   body > .content& {
     padding-top: @header-height;
     padding-bottom: 0;
@@ -46,7 +44,7 @@
       height: 100%;
 
       .project-list-sidebar-react {
-        height: 100%;
+        flex-grow: 1;
         padding-left: 15px;
         padding-right: 15px;
         -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -81,6 +79,7 @@
 
   .project-list-main-react {
     max-width: 100%;
+    overflow-x: hidden;
     padding: @content-margin-vertical @grid-gutter-width / 2;
   }
 
@@ -724,11 +723,8 @@
 }
 
 .project-list-sidebar-survey-wrapper {
-  position: fixed;
-  z-index: 1;
+  position: sticky;
   bottom: 0;
-  left: 0;
-  width: 15%;
 
   .alert-info-alt {
     font-size: @font-size-small;
@@ -741,9 +737,7 @@
 
   @media (max-width: @screen-xs-max) {
     position: static;
-    display: block;
     margin-top: @margin-sm;
-    width: initial;
 
     .alert-info-alt {
       font-size: unset;