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

Revert "[web] Project dashboard scrolling"

GitOrigin-RevId: dc18d2717714b8c044a5c2bd04c3bef0b579663d

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-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 ? (
+    <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">
                       <CurrentPlanWidget />
-                    ) : (
-                      <ProjectTools />
-                    )}
-                  </div>
-                  <div className="visible-xs">
-                    <CurrentPlanWidget />
+                    </div>
                   </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>
-            </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' }}
-                      />
+              <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>
+                    <ProjectListTable />
                   </div>
-                  <ProjectListTable />
-                </div>
-              </Col>
-            </Row>
-            <Row className="row-spaced">
-              <Col xs={12}>
-                <LoadMore />
-              </Col>
-            </Row>
-          </div>
-        </>
-      ) : (
-        <div className="project-list-welcome-wrapper">
+                </Col>
+              </Row>
+              <Row className="row-spaced">
+                <Col xs={12}>
+                  <LoadMore />
+                </Col>
+              </Row>
+            </div>
+          </>
+        ) : (
           <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,13 +24,23 @@
     }
   }
 
+  .project-list-row {
+    height: 100%;
+    min-height: calc(~'100vh -' @header-height);
+  }
+
   .project-list-wrapper {
-    display: flex;
-    align-items: stretch;
+    position: absolute;
+    width: 100%;
+    height: 100%;
   }
 
-  .project-list-sidebar-wrapper-react {
-    flex: 0 0 15%;
+  .project-list-sidebar-wrapper {
+    float: left;
+    position: static;
+    width: 15%;
+    min-width: 160px;
+
     .project-list-sidebar {
       > .dropdown {
         width: 100%;
@@ -42,12 +52,12 @@
     }
   }
 
-  .project-list-welcome-wrapper {
-    width: 100%;
-  }
-
-  .project-list-main-react {
-    padding: @content-margin-vertical @grid-gutter-width / 2;
+  .project-list-main {
+    position: static;
+    overflow: auto;
+    padding-left: @grid-gutter-width / 2;
+    padding-right: @grid-gutter-width / 2;
+    margin-left: initial;
   }
 
   ul.folders-menu {
@@ -560,6 +570,12 @@
   }
 }
 
+.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;