Merge pull request #716 from StampyAI/Ticket-#677

column spacing & mobile fixes
StampyAI · Jun 11, 2024 · d691337 · d691337
2 parents 6593238 + d7cdd87
commit d691337
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 19 deletions.
diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
@@ -144,8 +144,10 @@ article.stampy {
   width: var(--spacing-32);
   height: var(--spacing-32);
   border-radius: var(--border-radius);
-  text-align: center;
-  line-height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .reference .source-link {

diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx
@@ -84,10 +84,11 @@ const QuestionInput = ({
         />
         <SendIcon className="send pointer" onClick={() => handleAsk(question)} />
       </div>
-      {fixed && <div className="white-space"></div>}
+      {fixed && <div className="white-space" />}
 
-      <div className="mobile-only grey padding-top-8">
-        <ExclamationIcon /> <span>Stampy can be inaccurate. Always verify its sources.</span>
+      <div className="mobile-only grey mobile-caution xxs">
+        <ExclamationIcon />{' '}
+        <span className="padding-left-4">Stampy can be inaccurate. Always verify its sources.</span>
       </div>
     </div>
   )
@@ -319,7 +320,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
         <ChatEntry key={`chat-entry-${i}`} {...item} no={i} />
       ))}
 
-      <div className="padding-bottom-128">
+      <div className="followups-container">
         {followups ? (
           <Followups
             title="Continue the conversation"
@@ -336,7 +337,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
         fixed
       />
 
-      <div className="desktop-only warning-floating">
+      <div className="desktop-only warning-floating z-index-1">
         <p className="xs">
           <span className="red xs-bold">Caution! </span>
           This is an early prototype. Don’t automatically trust what it says, and make sure to

diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
@@ -21,7 +21,7 @@
 }
 .widget-ask.fixed {
   position: fixed;
-  bottom: var(--spacing-48);
+  bottom: 42px;
 }
 
 .right-icon {
@@ -44,6 +44,12 @@
   left: var(--spacing-32);
 }
 
+.mobile-caution {
+  position: absolute;
+  top: calc(100% + var(--spacing-8));
+  display: flex;
+}
+
 .settings {
   padding: var(--spacing-32);
   margin-bottom: var(--spacing-8);
@@ -57,7 +63,8 @@
   justify-content: start;
   padding: var(--spacing-8) var(--spacing-12);
   position: absolute;
-  top: calc(-1 * var(--spacing-56));
+  bottom: 100%;
+  height: auto;
 }
 
 .widget-ask .suggestion:hover {
@@ -66,16 +73,26 @@
 
 .widget-ask .send {
   position: absolute;
-  right: 4px;
-  bottom: 4px;
+  right: var(--spacing-8);
+  bottom: var(--spacing-8);
 }
 
 .white-space {
   position: absolute;
   left: -1000px;
   width: calc(100% + 2000px);
-  height: 100px;
-  top: 100%;
+  height: 120px;
+  top: 0;
   z-index: -1;
   background: #ffffff;
 }
+
+.followups-container {
+  padding-bottom: calc(106px + var(--spacing-48));
+}
+
+@media (max-width: 780px) {
+  .widget-ask.fixed {
+    bottom: 56px;
+  }
+}
diff --git a/app/components/Input/input.css b/app/components/Input/input.css
@@ -7,9 +7,9 @@
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
   color: var(--colors-cool-grey-900, #1b2b3e);
-  padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-12);
+  padding: var(--spacing-8) var(--height-48) var(--spacing-8) var(--spacing-12);
   /* This can't be a variable because it shouldn't shrink when the screen gets small */
-  height: 48px;
+  height: var(--height-48);
   font-size: 16px;
   font-weight: 300;
   line-height: 170%; /* 27.2px */
@@ -24,9 +24,10 @@
 /* size */
 
 .input.large {
-  height: 56px;
+  height: var(--height-64);
   font-size: 18px;
   letter-spacing: -0.18px;
+  padding-right: var(--height-64);
 }
 
 /* states */

diff --git a/app/root.css b/app/root.css
@@ -164,6 +164,13 @@ h2 {
   letter-spacing: -0.14px;
 }
 
+.xxs {
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 150%; /* 23.8px */
+  letter-spacing: -0.1px;
+}
+
 .leading-0 {
   line-height: 0 !important;
 }
@@ -353,7 +360,7 @@ h2 {
 }
 
 .col-6 {
-  width: clamp(0px, 35.28vw, 640px);
+  width: clamp(270px, 35.28vw, 640px);
 }
 
 .col-7 {
@@ -369,7 +376,7 @@ h2 {
 }
 
 .col-10 {
-  width: clamp(0px, 60.62vw, 1109px);
+  width: clamp(300px, 60.62vw, 1109px);
 }
 
 .col-11 {

diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx
@@ -38,7 +38,7 @@ export default function App() {
     <Page noFooter>
       <div className="page-body full-height padding-top-32">
         <Chatbot question={question} questions={questions} settings={chatSettings} />
-        <div className="settings-container z-index-1" ref={clickDetectorRef}>
+        <div className="settings-container z-index-1 desktop-only" ref={clickDetectorRef}>
           {showSettings && (
             <div className="settings bordered flex-container">
               <div>Answer detail</div>