Merge pull request #9559 from overleaf/jel-dash-scroll

[web] Project dashboard scrolling

GitOrigin-RevId: bd427f29e411d57dbc7c5e79c79195cee664ff88

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

@@ -45,81 +45,81 @@ function ProjectListPageContent() {
       <LoadingBranded loadProgress={loadProgress} />
     </div>
   ) : (
-    <div className="project-list-row fill">
-      <div className="project-list-wrapper clearfix">
-        {error ? <DashApiError /> : ''}
-        {totalProjectsCount > 0 ? (
-          <>
-            <div className="project-list-sidebar-wrapper hidden-xs">
-              <aside className="project-list-sidebar">
-                <NewProjectButton id="new-project-button-sidebar" />
-                <SidebarFilters />
-              </aside>
-              <SurveyWidget />
-            </div>
-            <div className="project-list-main">
-              <Row>
-                <Col xs={12}>
-                  <UserNotifications />
-                </Col>
-              </Row>
-              <Row>
-                <Col md={7} className="hidden-xs">
-                  <SearchForm
-                    inputValue={searchText}
-                    setInputValue={setSearchText}
-                  />
-                </Col>
-                <Col md={5}>
-                  <div className="project-tools">
-                    <div className="hidden-xs">
-                      {selectedProjects.length === 0 ? (
-                        <CurrentPlanWidget />
-                      ) : (
-                        <ProjectTools />
-                      )}
-                    </div>
-                    <div className="visible-xs">
+    <div className="project-list-wrapper clearfix">
+      {error ? <DashApiError /> : ''}
+      {totalProjectsCount > 0 ? (
+        <>
+          <div className="project-list-sidebar-wrapper-react hidden-xs">
+            <aside className="project-list-sidebar">
+              <NewProjectButton id="new-project-button-sidebar" />
+              <SidebarFilters />
+            </aside>
+            <SurveyWidget />
+          </div>
+          <div className="project-list-main-react">
+            <Row>
+              <Col xs={12}>
+                <UserNotifications />
+              </Col>
+            </Row>
+            <Row>
+              <Col md={7} className="hidden-xs">
+                <SearchForm
+                  inputValue={searchText}
+                  setInputValue={setSearchText}
+                />
+              </Col>
+              <Col md={5}>
+                <div className="project-tools">
+                  <div className="hidden-xs">
+                    {selectedProjects.length === 0 ? (
                       <CurrentPlanWidget />
-                    </div>
+                    ) : (
+                      <ProjectTools />
+                    )}
+                  </div>
+                  <div className="visible-xs">
+                    <CurrentPlanWidget />
                   </div>
-                </Col>
-              </Row>
-              <div className="visible-xs mt-1">
-                <div role="toolbar" className="projects-toolbar">
-                  <ProjectsDropdown />
-                  <SortByDropdown />
                 </div>
+              </Col>
+            </Row>
+            <div className="visible-xs mt-1">
+              <div role="toolbar" className="projects-toolbar">
+                <ProjectsDropdown />
+                <SortByDropdown />
               </div>
-              <Row className="row-spaced">
-                <Col xs={12}>
-                  <div className="card project-list-card">
-                    <div className="visible-xs pt-2 pb-3">
-                      <div className="clearfix">
-                        <NewProjectButton
-                          id="new-project-button-projects-table"
-                          className="pull-left me-2"
-                        />
-                        <SearchForm
-                          inputValue={searchText}
-                          setInputValue={setSearchText}
-                          className="overflow-hidden"
-                          formGroupProps={{ className: 'mb-0' }}
-                        />
-                      </div>
+            </div>
+            <Row className="row-spaced">
+              <Col xs={12}>
+                <div className="card project-list-card">
+                  <div className="visible-xs pt-2 pb-3">
+                    <div className="clearfix">
+                      <NewProjectButton
+                        id="new-project-button-projects-table"
+                        className="pull-left me-2"
+                      />
+                      <SearchForm
+                        inputValue={searchText}
+                        setInputValue={setSearchText}
+                        className="overflow-hidden"
+                        formGroupProps={{ className: 'mb-0' }}
+                      />
                     </div>
-                    <ProjectListTable />
                   </div>
-                </Col>
-              </Row>
-              <Row className="row-spaced">
-                <Col xs={12}>
-                  <LoadMore />
-                </Col>
-              </Row>
-            </div>
-          </>
-        ) : (
+                  <ProjectListTable />
+                </div>
+              </Col>
+            </Row>
+            <Row className="row-spaced">
+              <Col xs={12}>
+                <LoadMore />
+              </Col>
+            </Row>
+          </div>
+        </>
+      ) : (
+        <div className="project-list-welcome-wrapper">
           <Row className="row-spaced">
             <Col
               xs={8}
@@ -131,8 +131,8 @@ function ProjectListPageContent() {
               <WelcomeMessage />
             </Col>
           </Row>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   )
 }

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

@@ -24,23 +24,13 @@
     }
   }
 
-  .project-list-row {
-    height: 100%;
-    min-height: calc(~'100vh -' @header-height);
-  }
-
   .project-list-wrapper {
-    position: absolute;
-    width: 100%;
-    height: 100%;
+    display: flex;
+    align-items: stretch;
   }
 
-  .project-list-sidebar-wrapper {
-    float: left;
-    position: static;
-    width: 15%;
-    min-width: 160px;
-
+  .project-list-sidebar-wrapper-react {
+    flex: 0 0 15%;
     .project-list-sidebar {
       > .dropdown {
         width: 100%;
@@ -52,12 +42,12 @@
     }
   }
 
-  .project-list-main {
-    position: static;
-    overflow: auto;
-    padding-left: @grid-gutter-width / 2;
-    padding-right: @grid-gutter-width / 2;
-    margin-left: initial;
+  .project-list-welcome-wrapper {
+    width: 100%;
+  }
+
+  .project-list-main-react {
+    padding: @content-margin-vertical @grid-gutter-width / 2;
   }
 
   ul.folders-menu {
@@ -574,12 +564,6 @@
   }
 }
 
-.project-list-react.container,
-.project-list-react .project-list-sidebar-wrapper,
-.project-list-react .project-list-main {
-  height: 100%;
-}
-
 .current-plan {
   vertical-align: middle;
   line-height: @line-height-base;