Merge pull request #714 from StampyAI/Ticket-#680

miscellaneous mobile fixes
StampyAI · Jun 10, 2024 · 6105867 · 6105867
2 parents cda9f15 + fb922e7
commit 6105867
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
@@ -51,10 +51,12 @@ type TitleProps = {
   hint?: string
 }
 const Title = ({title, Icon, answerType, hint}: TitleProps) => (
-  <div className="flex-container title padding-bottom-16">
+  <div className="title-container padding-bottom-16">
     <Icon width="40" height="40" />
-    <span className="default-bold flex-double">{title}</span>
-    <AnswerInfo answerType={answerType} hint={hint} />
+    <div className="title-inner-container">
+      <span className="default-bold">{title}</span>
+      <AnswerInfo answerType={answerType} hint={hint} />
+    </div>
   </div>
 )
 

diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
@@ -8,12 +8,18 @@ article.stampy {
   border-radius: var(--border-radius);
 }
 
-.chat-entry .title {
+.chat-entry .title-container {
   display: flex;
   gap: var(--spacing-16);
   align-items: center;
 }
 
+.title-inner-container {
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
 .phase-message {
   margin-left: 57px;
   color: var(--colors-cool-grey-600);
@@ -176,3 +182,11 @@ article.stampy {
   visibility: visible;
   transition-delay: 0s;
 }
+
+@media (max-width: 780px) {
+  .title-inner-container {
+    flex-direction: column;
+    align-items: start;
+    justify-content: flex-start;
+  }
+}
diff --git a/app/components/Feedback/Form.tsx b/app/components/Feedback/Form.tsx
@@ -2,6 +2,7 @@ import {useState} from 'react'
 import Button from '~/components/Button'
 import useOutsideOnClick from '~/hooks/useOnOutsideClick'
 import './feedback.css'
+import {XLarge} from '../icons-generated'
 
 export type FeedbackFormProps = {
   onSubmit?: (msg: string, option?: string) => Promise<any>
@@ -27,6 +28,9 @@ const FeedbackForm = ({onSubmit, onClose, options, className}: FeedbackFormProps
 
   return (
     <div ref={clickCheckerRef} className={'feedback-form bordered ' + (className ?? '')}>
+      <button onClick={onClose} className="mobile-only escape-feedback">
+        <XLarge />
+      </button>
       <span className="black small padding-bottom-32">What was the problem?</span>
       {options?.map((option) => (
         <Button

diff --git a/app/components/Feedback/feedback.css b/app/components/Feedback/feedback.css
@@ -29,9 +29,8 @@
   border-radius: var(--border-radius);
 }
 
-/* Comment to Nemo when he reviews: why didn't you just do this the way you did the settings buttons? */
 .select-option {
-  height: var(--spacing-48);
+  height: var(--height-48);
   border-radius: var(--border-radius);
   margin-bottom: var(--spacing-16);
   cursor: pointer;
@@ -70,3 +69,18 @@
   transform: translate(-9vw, var(--spacing-56));
   margin: var(--spacing-24);
 }
+
+.escape-feedback {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  line-height: 0;
+  border: none;
+  background: #fff;
+}
+
+@media (max-width: 780px) {
+  .feedback-form {
+    left: -20px;
+  }
+}
diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx
@@ -44,7 +44,7 @@ export default function App() {
           ]}
           settings={chatSettings}
         />
-        <div className="settings-container" ref={clickDetectorRef}>
+        <div className="settings-container z-index-1" ref={clickDetectorRef}>
           {showSettings && (
             <div className="settings bordered flex-container">
               <div>Answer detail</div>