Merge pull request #11719 from overleaf/em-survey-sidebar

Make survey notification the width of the dashboard sidebar

GitOrigin-RevId: 754ec21692505107e683369628a2b5481e7cef9a

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">

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({

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;
+  position: sticky;
-  z-index: 1;
   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;