Merge pull request #9838 from overleaf/jel-dash-scrolling

[web] React dash scrolling

GitOrigin-RevId: 80d8fe8756df717c19c05e6ad848c32d03e487fc

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

@@ -45,81 +45,84 @@ 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">
+    <div className="project-list-wrapper clearfix">
+      {totalProjectsCount > 0 ? (
+        <>
+          <div className="project-list-sidebar-wrapper-react hidden-xs">
+            <div className="project-list-sidebar-subwrapper">
+              <aside className="project-list-sidebar-react">
                 <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>
+          <div className="project-list-main-react">
+            {error ? <DashApiError /> : ''}
+            <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">
+          {error ? <DashApiError /> : ''}
           <Row className="row-spaced">
             <Col
               xs={8}
@@ -131,8 +134,8 @@ function ProjectListPageContent() {
               <WelcomeMessage />
             </Col>
           </Row>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   )
 }

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

@@ -24,40 +24,53 @@
     }
   }
 
-  .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;
+    min-height: calc(~'100vh -' @header-height);
   }
 
-  .project-list-sidebar-wrapper {
-    float: left;
-    position: static;
-    width: 15%;
-    min-width: 160px;
+  .project-list-sidebar-wrapper-react {
+    background-color: @sidebar-bg;
+    flex: 0 0 15%;
+    min-height: calc(~'100vh -' @header-height);
 
-    .project-list-sidebar {
-      > .dropdown {
-        width: 100%;
+    .project-list-sidebar-subwrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .project-list-sidebar-react {
+        height: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        padding-top: @content-margin-vertical;
+        padding-bottom: @content-margin-vertical;
+        color: @sidebar-color;
+        .small {
+          color: @sidebar-color;
+        }
 
-        .new-project-button {
+        > .dropdown {
           width: 100%;
+
+          .new-project-button {
+            width: 100%;
+          }
         }
       }
     }
   }
 
-  .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 {
@@ -570,12 +583,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;