Merge pull request #721 from StampyAI/mobile-fixes

misc fixes
StampyAI · Jun 12, 2024 · af73627 · af73627
2 parents e6bef50 + 5e6f13a
commit af73627
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 43 deletions.
diff --git a/app/assets/icons/settings.svg b/app/assets/icons/settings.svg
diff --git a/app/components/Button/button.css b/app/components/Button/button.css
@@ -9,6 +9,7 @@
   box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(32, 44, 89, 0.05);
   border-radius: var(--border-radius);
   box-sizing: border-box;
+  position: relative;
 
   background: var(--colors-white, #ffffff);
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
@@ -164,7 +165,10 @@
   border: 1px solid var(--colors-teal-200, #a6d9d7);
 }
 
-.button-secondary:hover .tool-tip-secondary {
+.button-secondary:hover .tool-tip {
+  opacity: 1;
+}
+.button:hover .tool-tip {
   opacity: 1;
 }
 
@@ -236,20 +240,7 @@
   height: min-content;
 }
 
-.tooltip::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  transform: translateY(var(--spacing-56, 56px));
-  padding: var(--spacing-16);
-  color: var(--colors-white);
-  background: var(--colors-black);
-  border-radius: 5px;
-  display: none;
-  z-index: 1;
-  font-size: 16px; /* hard to set via classes, what with this being a pseudoclass */
-}
-
-.tool-tip-secondary {
+.tool-tip {
   opacity: 0;
   position: absolute;
   top: -42px;
@@ -273,3 +264,8 @@
   opacity: 0.6;
   cursor: inherit;
 }
+.button-secondary:disabled,
+.button-secondary[disabled] {
+  opacity: 0.8;
+  cursor: inherit;
+}
diff --git a/app/components/Button/index.tsx b/app/components/Button/index.tsx
@@ -28,7 +28,6 @@ const Button = ({
   const classes = [
     (secondary && 'button-secondary') || 'button',
     className,
-    tooltip && !secondary && 'tooltip',
     secondary && active && 'active',
     secondary && !active && !disabled && 'inactive',
   ]
@@ -39,7 +38,6 @@ const Button = ({
       <Link
         to={action}
         className={classes}
-        data-tooltip={tooltip}
         onClick={(e) => {
           if (disabled) {
             e.preventDefault()
@@ -48,24 +46,14 @@ const Button = ({
         {...props}
       >
         {children}
-        {secondary && tooltip && !disabled && !mobile && (
-          <p className="tool-tip-secondary xs">{tooltip}</p>
-        )}
+        {tooltip && !disabled && !mobile && <p className="tool-tip xs z-index-1">{tooltip}</p>}
       </Link>
     )
   }
   return (
-    <button
-      className={classes}
-      onClick={action}
-      data-tooltip={tooltip}
-      disabled={disabled}
-      {...props}
-    >
+    <button className={classes} onClick={action} disabled={disabled} {...props}>
       {children}
-      {secondary && tooltip && !disabled && !mobile && (
-        <p className="tool-tip-secondary xs">{tooltip}</p>
-      )}
+      {tooltip && !disabled && !mobile && <p className="tool-tip xs z-index-1">{tooltip}</p>}
     </button>
   )
 }

diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
@@ -123,7 +123,7 @@ const ReferencePopup = (
       className={`reference-popup background z-index-2 ${citation.className || ''}`}
       onClick={citation.onClose}
     >
-      <div className="reference-contents bordered">
+      <div onClick={(e) => e.stopPropagation()} className="reference-contents bordered">
         <ReferenceSummary {...citation} titleClass="large-bold" />
         <div className="grey padding-bottom-16 padding-top-32 xs">Referenced excerpt</div>
         <div

diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
@@ -177,12 +177,11 @@ article.stampy {
     transform: translate(-50%, 35px);
     min-width: 30vw;
   }
-}
-
-.reference-popup:hover,
-.reference-link:hover + .reference-popup {
-  visibility: visible;
-  transition-delay: 0s;
+  .reference-popup:hover,
+  .reference-link:hover + .reference-popup {
+    visibility: visible;
+    transition-delay: 0s;
+  }
 }
 
 .chat-entry article {
@@ -195,4 +194,13 @@ article.stampy {
     align-items: start;
     justify-content: flex-start;
   }
+  .reference-contents {
+    flex-shrink: 0;
+    width: 87.2vw;
+    margin-top: 48px;
+  }
+  .reference-popup {
+    display: flex;
+    flex-direction: column;
+  }
 }
diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx
@@ -157,7 +157,7 @@ const Followups = ({title, followups, onSelect, className}: FollowupsProps) => {
         ].slice(0, 3)
   return (
     <>
-      {title && <div className={'padding-bottom-24 grey' + (className || '')}>{title}</div>}
+      {title && <div className={'padding-bottom-24' + (className || '')}>{title}</div>}
 
       {items?.map(({text, pageid}, i) => (
         <div key={i} className="padding-bottom-16">

diff --git a/app/components/icons-generated/Settings.tsx b/app/components/icons-generated/Settings.tsx
@@ -13,7 +13,7 @@ const SvgSettings = (props: SVGProps<SVGSVGElement>) => (
       stroke="#1D9089"
       strokeLinecap="square"
       strokeLinejoin="round"
-      d="M20.883 15.122a.5.5 0 0 1 .056.561l-1.437 2.636a.5.5 0 0 1-.544.25l-1.325-.285h0a2.7 2.7 0 0 0-1.998.346 3.03 3.03 0 0 0-1.294 1.689v.004h0l-.427 1.33a.5.5 0 0 1-.477.347h-2.874a.5.5 0 0 1-.48-.357l-.403-1.35a3.03 3.03 0 0 0-1.292-1.687 2.7 2.7 0 0 0-1.998-.346h0l-1.325.285a.5.5 0 0 1-.542-.246l-1.46-2.624a.5.5 0 0 1 .054-.565l.899-1.069h0c.475-.561.74-1.292.74-2.053s-.265-1.492-.74-2.052v-.001l-.899-1.069a.5.5 0 0 1-.055-.563L4.5 5.691a.5.5 0 0 1 .544-.248l1.325.285h0a2.7 2.7 0 0 0 1.997-.346A3.03 3.03 0 0 0 9.66 3.693V3.69h0l.427-1.342A.5.5 0 0 1 10.563 2h2.874a.5.5 0 0 1 .477.35l.427 1.353v.002a3.03 3.03 0 0 0 1.294 1.69 2.7 2.7 0 0 0 1.997.345h0l1.326-.285a.5.5 0 0 1 .544.25l1.437 2.636a.5.5 0 0 1-.056.56l-.898 1.069zm0 0-.898-1.068m.898 1.068-.898-1.068m0 0h0a3.18 3.18 0 0 1-.73-2.042c0-.756.261-1.482.73-2.042z"
+      d="M20.883 15.122a.5.5 0 0 1 .056.561l-1.437 2.636a.5.5 0 0 1-.544.25l-1.325-.285h0a2.7 2.7 0 0 0-1.998.346 3.03 3.03 0 0 0-1.294 1.689v.004h0l-.427 1.33a.5.5 0 0 1-.477.347h-2.874a.5.5 0 0 1-.48-.357l-.403-1.35a3.03 3.03 0 0 0-1.292-1.687 2.7 2.7 0 0 0-1.998-.346h0l-1.325.285a.5.5 0 0 1-.542-.246l-1.46-2.624a.5.5 0 0 1 .054-.565l.899-1.069h0c.475-.561.74-1.292.74-2.053s-.265-1.492-.74-2.052v-.001l-.899-1.069a.5.5 0 0 1-.055-.563L4.5 5.691a.5.5 0 0 1 .544-.248l1.325.285h0a2.7 2.7 0 0 0 1.997-.346A3.03 3.03 0 0 0 9.66 3.693V3.69h0l.427-1.342A.5.5 0 0 1 10.563 2h2.874a.5.5 0 0 1 .477.35l.427 1.353v.002a3.03 3.03 0 0 0 1.294 1.69 2.7 2.7 0 0 0 1.997.345h0l1.326-.285a.5.5 0 0 1 .544.25l1.437 2.636a.5.5 0 0 1-.056.56l-.898 1.069q0 0 0 0a3.18 3.18 0 0 0-.73 2.042c0 .756.261 1.482.73 2.041zm0 0-.898-1.068z"
     />
   </svg>
 )

diff --git a/app/components/popups.ts b/app/components/popups.ts
@@ -1,5 +1,5 @@
 export const scrollToElement = (e: HTMLElement, offset?: number) => {
-  const elementPosition = e.getBoundingClientRect().top + window.pageYOffset
+  const elementPosition = e.getBoundingClientRect().top + window.scrollY
   const offsetPosition = elementPosition - (offset || 0)
 
   window.scrollTo({top: offsetPosition, behavior: 'smooth'})

diff --git a/app/root.css b/app/root.css
@@ -561,6 +561,9 @@ svg {
 /* mobile */
 
 @media (max-width: 780px) {
+  body {
+    overflow-x: hidden;
+  }
   .page-body {
     padding: 0px var(--spacing-48);
   }

diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx
@@ -28,7 +28,10 @@ export default function App() {
   const ModeButton = ({name, mode}: {name: string; mode: Mode}) => (
     <Button
       className={chatSettings.mode === mode ? 'secondary-selected' : 'secondary'}
-      action={() => setChatSettings({...chatSettings, mode})}
+      action={() => {
+        setShowSettings(false)
+        setChatSettings({...chatSettings, mode})
+      }}
     >
       {name}
     </Button>