Merge pull request #9895 from overleaf/jel-react-dash-survey

[web] Fixed position survey at bottom left of viewport on React dash

GitOrigin-RevId: a48c50e0cb90ef7356b461c0a480f7b163692303

services/web/frontend/js/features/project-list/components/project-list-root.tsx

@@ -54,7 +54,6 @@ function ProjectListPageContent() {
                 <NewProjectButton id="new-project-button-sidebar" />
                 <SidebarFilters />
               </aside>
-              <SurveyWidget />
             </div>
           </div>
           <div className="project-list-main-react">
@@ -119,6 +118,11 @@ function ProjectListPageContent() {
               </Col>
             </Row>
           </div>
+          <div className="project-list-sidebar-survey-wrapper hidden-xs">
+            <div className="project-list-sidebar-survey-subwrapper">
+              <SurveyWidget />
+            </div>
+          </div>
         </>
       ) : (
         <div className="project-list-welcome-wrapper">

services/web/frontend/stylesheets/app/project-list-react.less

@@ -1,3 +1,5 @@
+@project-list-sidebar-wrapper-flex: 0 0 15%;
+
 .project-list-react {
   overflow-x: hidden;
 
@@ -32,7 +34,7 @@
 
   .project-list-sidebar-wrapper-react {
     background-color: @sidebar-bg;
-    flex: 0 0 15%;
+    flex: @project-list-sidebar-wrapper-flex;
     min-height: calc(~'100vh -' @header-height);
 
     .project-list-sidebar-subwrapper {
@@ -695,3 +697,15 @@
     background-color: @ol-green;
   }
 }
+
+.project-list-sidebar-survey-wrapper {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  .project-list-sidebar-survey-subwrapper {
+    flex: @project-list-sidebar-wrapper-flex;
+  }
+}