From f8e98cd5c66b98fa55a23f36ee4fec22cb6bc94e Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Fri, 21 Oct 2022 14:32:50 +0300
Subject: [PATCH] Merge pull request #10030 from
 overleaf/ii-dashboard-survey-react-mobile-view

[web] Project dashboard survey mobile view

GitOrigin-RevId: 19612f75a9987625f10626f5f9ea9b53321d5fe2
---
 .../components/project-list-root.tsx          | 10 ++---
 .../project-list/components/survey-widget.tsx | 26 +++++++------
 .../stylesheets/app/project-list-react.less   | 38 +++++++++++++++++++
 .../frontend/stylesheets/core/variables.less  |  3 ++
 4 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx
index 0396f71749..b532b69cd3 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx
+++ b/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">
diff --git a/services/web/frontend/js/features/project-list/components/survey-widget.tsx b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
index ee5e9129ca..3d160620a9 100644
--- a/services/web/frontend/js/features/project-list/components/survey-widget.tsx
+++ b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
@@ -19,24 +19,26 @@ export default function SurveyWidget() {
   }
 
   return (
-    <div className="project-list-sidebar-survey">
-      {survey.preText}&nbsp;
-      <a
-        className="project-list-sidebar-survey-link"
-        href={survey.url}
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        {survey.linkText}
-      </a>
+    <>
       <button
         className="project-list-sidebar-survey-dismiss"
         type="button"
         title="Dismiss Overleaf survey"
         onClick={dismissSurvey}
       >
-        <span aria-hidden> &times;</span>
+        <span aria-hidden>&times;</span>
       </button>
-    </div>
+      <div className="project-list-sidebar-survey">
+        {survey.preText}&nbsp;
+        <a
+          className="project-list-sidebar-survey-link"
+          href={survey.url}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {survey.linkText}
+        </a>
+      </div>
+    </>
   )
 }
diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less
index 45882ab68b..6ee83b6242 100644
--- a/services/web/frontend/stylesheets/app/project-list-react.less
+++ b/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;
+    }
   }
 }
 
diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less
index 15aab5ea35..e61242ec83 100644
--- a/services/web/frontend/stylesheets/core/variables.less
+++ b/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;