Merge pull request #10030 from overleaf/ii-dashboard-survey-react-mobile-view

[web] Project dashboard survey mobile view

GitOrigin-RevId: 19612f75a9987625f10626f5f9ea9b53321d5fe2

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

@@ -94,6 +94,11 @@ function ProjectListPageContent() {
                   </div>
                 </Col>
               </Row>
+              <div className="project-list-sidebar-survey-wrapper">
+                <div className="project-list-sidebar-survey-subwrapper">
+                  <SurveyWidget />
+                </div>
+              </div>
               <div className="visible-xs mt-1">
                 <div role="toolbar" className="projects-toolbar">
                   <ProjectsDropdown />
@@ -127,11 +132,6 @@ 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/js/features/project-list/components/survey-widget.tsx

@@ -19,6 +19,15 @@ export default function SurveyWidget() {
   }
 
   return (
+    <>
+      <button
+        className="project-list-sidebar-survey-dismiss"
+        type="button"
+        title="Dismiss Overleaf survey"
+        onClick={dismissSurvey}
+      >
+        <span aria-hidden>&times;</span>
+      </button>
       <div className="project-list-sidebar-survey">
         {survey.preText}&nbsp;
         <a
@@ -29,14 +38,7 @@ export default function SurveyWidget() {
         >
           {survey.linkText}
         </a>
-      <button
-        className="project-list-sidebar-survey-dismiss"
-        type="button"
-        title="Dismiss Overleaf survey"
-        onClick={dismissSurvey}
-      >
-        <span aria-hidden> &times;</span>
-      </button>
       </div>
+    </>
   )
 }

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

@@ -50,6 +50,7 @@
         padding-top: @content-margin-vertical;
         padding-bottom: @content-margin-vertical;
         color: @sidebar-color;
+
         .small {
           color: @sidebar-color;
         }
@@ -710,6 +711,43 @@
 
   .project-list-sidebar-survey-subwrapper {
     flex: @project-list-sidebar-wrapper-flex;
+
+    @media (max-width: @screen-xs-max) {
+      line-height: @mobile-action-element-height;
+    }
+  }
+
+  .project-list-sidebar-survey-dismiss {
+    position: relative;
+    z-index: 1;
+    float: right;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    position: static;
+    display: block;
+    margin-top: @margin-sm;
+
+    .project-list-sidebar-survey {
+      font-size: unset;
+
+      &:before {
+        display: none;
+      }
+
+      .project-list-sidebar-survey-link {
+        display: inline-flex;
+        align-items: center;
+        min-width: @mobile-action-element-width;
+        min-height: @mobile-action-element-height;
+      }
+    }
+
+    .project-list-sidebar-survey-dismiss {
+      width: @mobile-action-element-width;
+      height: @mobile-action-element-height;
+      border: 0;
+    }
   }
 }
 

services/web/frontend/stylesheets/core/variables.less

@@ -1136,3 +1136,6 @@
 // Editor fonts
 @editor-font-lucida: 'Lucida Console', 'Source Code Pro', monospace;
 @editor-font-monaco: Monaco, Menlo, 'Ubuntu Mono', 'Consolas', monospace;
+
+@mobile-action-element-width: 48px;
+@mobile-action-element-height: @mobile-action-element-width;