Fix modal sizes to fit smaller screens & bug fixes (#399)

* fix sizing of onboarding modals & lint

* fix extra scrolling on mobile onboarding flow

* added message to use desktop for onboarding

* linting

* change mobile alert copy

* fix div with bullet points to use list-disc instead

---------

Co-authored-by: timothycarambat <[email protected]>

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/AppearanceSetup/index.jsx

@@ -58,7 +58,7 @@ function AppearanceSetup({ prevStep, nextStep }) {
 
   return (
     <div className="w-full">
-      <div className="flex flex-col w-full px-10 py-12">
+      <div className="flex flex-col w-full px-8 py-4">
         <div className="flex flex-col gap-y-2">
           <h2 className="text-white text-sm font-medium">Custom Logo</h2>
           <p className="text-sm font-base text-white/60">
@@ -108,7 +108,7 @@ function AppearanceSetup({ prevStep, nextStep }) {
           </div>
         </div>
       </div>
-      <div className="flex w-full justify-between items-center p-6 space-x-6 border-t rounded-b border-gray-500/50">
+      <div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
         <button
           onClick={prevStep}
           type="button"

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/CreateFirstWorkspace/index.jsx

@@ -46,7 +46,7 @@ function CreateFirstWorkspace() {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-end items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+        <div className="flex w-full justify-end items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
           <button
             type="submit"
             className="border border-slate-200 px-4 py-2 rounded-lg text-slate-800 bg-slate-200 text-sm items-center flex gap-x-2 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow"

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/DataHandling/index.jsx

@@ -153,7 +153,7 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
   return (
     <div className="max-w-[750px]">
       <div className="p-8 flex flex-col gap-8">
-        <div className="flex flex-col gap-y-3.5 border-b border-zinc-500/50 pb-8">
+        <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
           <div className="text-white text-base font-bold">LLM Selection</div>
           <div className="flex items-center gap-2.5">
             <img
@@ -165,28 +165,25 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
               {LLM_SELECTION_PRIVACY[llmChoice].name}
             </p>
           </div>
-          <div className="flex flex-col">
+          <ul className="flex flex-col list-disc ml-4">
             {LLM_SELECTION_PRIVACY[llmChoice].description.map((desc) => (
-              <p className="text-white/90 text-sm">
-                <b>•</b> {desc}
-              </p>
+              <li className="text-white/90 text-sm">{desc}</li>
             ))}
-          </div>
+          </ul>
         </div>
-
-        <div className="flex flex-col gap-y-3.5 border-b border-zinc-500/50 pb-8">
+        <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
           <div className="text-white text-base font-bold">Embedding Engine</div>
           <div className="flex items-center gap-2.5">
             <img
               src={EMBEDDING_ENGINE_PRIVACY[embeddingEngine].logo}
-              alt="Vector DB Logo"
+              alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
             <p className="text-white text-sm font-bold">
               {EMBEDDING_ENGINE_PRIVACY[embeddingEngine].name}
             </p>
           </div>
-          <ul className="flex flex-col list-disc">
+          <ul className="flex flex-col list-disc ml-4">
             {EMBEDDING_ENGINE_PRIVACY[embeddingEngine].description.map(
               (desc) => (
                 <li className="text-white/90 text-sm">{desc}</li>
@@ -195,26 +192,26 @@ function DataHandling({ nextStep, prevStep, currentStep }) {
           </ul>
         </div>
 
-        <div className="flex flex-col gap-y-3.5 ">
+        <div className="flex flex-col gap-y-2 pb-4">
           <div className="text-white text-base font-bold">Vector Database</div>
           <div className="flex items-center gap-2.5">
             <img
               src={VECTOR_DB_PRIVACY[vectorDb].logo}
-              alt="Vector DB Logo"
+              alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
             <p className="text-white text-sm font-bold">
               {VECTOR_DB_PRIVACY[vectorDb].name}
             </p>
           </div>
-          <ul className="flex flex-col list-disc">
+          <ul className="flex flex-col list-disc ml-4">
             {VECTOR_DB_PRIVACY[vectorDb].description.map((desc) => (
               <li className="text-white/90 text-sm">{desc}</li>
             ))}
           </ul>
         </div>
       </div>
-      <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+      <div className="flex w-[650px] justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
         <button
           onClick={prevStep}
           type="button"

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/EmbeddingSelection/index.jsx

@@ -52,11 +52,11 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
   return (
     <div className="w-full">
       <form onSubmit={handleSubmit} className="flex flex-col w-full">
-        <div className="flex flex-col w-full px-1 md:px-8 py-12">
+        <div className="flex flex-col w-full px-1 md:px-8 py-4">
           <div className="text-white text-sm font-medium pb-4">
             Embedding Provider
           </div>
-          <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
+          <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
             <input
               hidden={true}
               name="EmbeddingEngine"
@@ -90,7 +90,7 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
               onClick={updateChoice}
             />
           </div>
-          <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
+          <div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
             {embeddingChoice === "openai" && (
               <OpenAiOptions settings={settings} />
             )}
@@ -102,7 +102,7 @@ function EmbeddingSelection({ nextStep, prevStep, currentStep }) {
             )}
           </div>
         </div>
-        <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+        <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
           <button
             onClick={prevStep}
             type="button"

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/LLMSelection/index.jsx

@@ -59,11 +59,11 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
   return (
     <div>
       <form onSubmit={handleSubmit} className="flex flex-col w-full">
-        <div className="flex flex-col w-full px-1 md:px-8 py-12">
+        <div className="flex flex-col w-full px-1 md:px-8 py-4">
           <div className="text-white text-sm font-medium pb-4">
             LLM Providers
           </div>
-          <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
+          <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
             <input hidden={true} name="LLMProvider" value={llmChoice} />
             <LLMProviderOption
               name="OpenAI"
@@ -111,7 +111,7 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
               onClick={updateLLMChoice}
             />
           </div>
-          <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
+          <div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
             {llmChoice === "openai" && <OpenAiOptions settings={settings} />}
             {llmChoice === "azure" && <AzureAiOptions settings={settings} />}
             {llmChoice === "anthropic" && (
@@ -123,7 +123,7 @@ function LLMSelection({ nextStep, prevStep, currentStep }) {
             {llmChoice === "localai" && <LocalAiOptions settings={settings} />}
           </div>
         </div>
-        <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+        <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
           <button
             onClick={prevStep}
             type="button"

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/MultiUserSetup/index.jsx

@@ -43,7 +43,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <div className="flex flex-col w-full md:px-8 py-12">
+        <div className="flex flex-col w-full md:px-8 py-4">
           <div className="space-y-6 flex h-full w-96">
             <div className="w-full flex flex-col gap-y-4">
               <div>
@@ -89,7 +89,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-between items-center p-6 space-x-6 border-t rounded-b border-gray-500/50">
+        <div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
           <div className="w-96 text-white text-opacity-80 text-xs font-base">
             By default, you will be the only admin. As an admin you will need to
             create accounts for all new users or admins. Do not lose your
@@ -105,7 +105,7 @@ function MultiUserSetup({ nextStep, prevStep }) {
             </button>
             <button
               type="submit"
-              className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2 
+              className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
               border-slate-200 text-slate-800 bg-slate-200 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow
               disabled:border-gray-400 disabled:text-slate-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
               disabled={!(!!username && !!password)}

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/PasswordProtection/index.jsx

@@ -45,7 +45,7 @@ function PasswordProtection({ nextStep, prevStep }) {
   return (
     <div className="w-full">
       <form className="flex flex-col w-full" onSubmit={handleSubmit}>
-        <div className="flex flex-col w-full px-1 md:px-8 py-12">
+        <div className="flex flex-col w-full px-1 md:px-8 py-4">
           <div className="w-full flex flex-col gap-y-2 my-5">
             <div className="w-80">
               <div className="flex flex-col mb-3 ">
@@ -72,7 +72,7 @@ function PasswordProtection({ nextStep, prevStep }) {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+        <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
           <button
             onClick={prevStep}
             type="button"
@@ -92,7 +92,7 @@ function PasswordProtection({ nextStep, prevStep }) {
             <button
               type="submit"
               disabled={!password}
-              className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2 
+              className="border px-4 py-2 rounded-lg text-sm items-center flex gap-x-2
               border-slate-200 text-slate-800 bg-slate-200 hover:text-white hover:bg-transparent focus:ring-gray-800 font-semibold shadow
               disabled:border-gray-400 disabled:text-slate-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
             >

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/UserModeSelection/index.jsx

@@ -12,7 +12,7 @@ function UserModeSelection({ nextStep, prevStep }) {
 
   return (
     <div>
-      <div className="flex flex-col justify-center items-center px-20 py-20">
+      <div className="flex flex-col justify-center items-center px-20 py-14">
         <div className="w-80 text-white text-center text-2xl font-base">
           How many people will be using your instance?
         </div>

frontend/src/pages/OnboardingFlow/OnboardingModal/Steps/VectorDatabaseConnection/index.jsx

@@ -55,11 +55,11 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
   return (
     <div>
       <form onSubmit={handleSubmit} className="flex flex-col w-full">
-        <div className="flex flex-col w-full px-1 md:px-8 py-12">
+        <div className="flex flex-col w-full px-1 md:px-8 py-4">
           <div className="text-white text-sm font-medium pb-4">
             Select your preferred vector database provider
           </div>
-          <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[900px]">
+          <div className="w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-[752px]">
             <input hidden={true} name="VectorDB" value={vectorDB} />
             <VectorDBOption
               name="Chroma"
@@ -107,7 +107,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
               onClick={updateVectorChoice}
             />
           </div>
-          <div className="mt-10 flex flex-wrap gap-4 max-w-[800px]">
+          <div className="mt-4 flex flex-wrap gap-4 max-w-[752px]">
             {vectorDB === "pinecone" && (
               <>
                 <div className="flex flex-col w-60">
@@ -287,7 +287,7 @@ function VectorDatabaseConnection({ nextStep, prevStep, currentStep }) {
             )}
           </div>
         </div>
-        <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+        <div className="flex w-full justify-between items-center px-6 py-4 space-x-2 border-t rounded-b border-gray-500/50">
           <button
             onClick={prevStep}
             type="button"

frontend/src/pages/OnboardingFlow/OnboardingModal/index.jsx

@@ -12,10 +12,6 @@ import DataHandling from "./Steps/DataHandling";
 
 const DIALOG_ID = "onboarding-modal";
 
-function hideModal() {
-  document.getElementById(DIALOG_ID)?.close();
-}
-
 const STEPS = {
   llm_preference: {
     title: "LLM Preference",
@@ -71,10 +67,14 @@ const STEPS = {
 };
 
 export const OnboardingModalId = DIALOG_ID;
-export default function OnboardingModal() {
+export default function OnboardingModal({ setModalVisible }) {
   const [currentStep, setCurrentStep] = useState("llm_preference");
   const [history, setHistory] = useState(["llm_preference"]);
 
+  function hideModal() {
+    setModalVisible(false);
+  }
+
   const nextStep = (stepKey) => {
     setCurrentStep(stepKey);
     setHistory([...history, stepKey]);
@@ -99,7 +99,7 @@ export default function OnboardingModal() {
     <dialog id={DIALOG_ID} className="bg-transparent outline-none">
       <div className="relative max-h-full">
         <div className="relative bg-main-gradient rounded-2xl shadow border-2 border-slate-300/10">
-          <div className="flex items-start justify-between p-8 border-b rounded-t border-gray-500/50">
+          <div className="flex items-start justify-between px-6 py-4 border-b rounded-t border-gray-500/50">
             <div className="flex flex-col gap-2">
               <h3 className="text-xl font-semibold text-white">{step.title}</h3>
               <p className="text-sm font-base text-white text-opacity-60 whitespace-pre">

frontend/src/pages/OnboardingFlow/index.jsx

@@ -1,16 +1,42 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import OnboardingModal, { OnboardingModalId } from "./OnboardingModal";
 import useLogo from "../../hooks/useLogo";
+import { isMobile } from "react-device-detect";
 
 export default function OnboardingFlow() {
   const { logo } = useLogo();
+  const [modalVisible, setModalVisible] = useState(false);
+
+  useEffect(() => {
+    if (modalVisible) {
+      document.getElementById(OnboardingModalId)?.showModal();
+    }
+  }, [modalVisible]);
 
   function showModal() {
-    document?.getElementById(OnboardingModalId)?.showModal();
+    setModalVisible(true);
+  }
+
+  if (isMobile) {
+    return (
+      <div className="w-screen h-full bg-sidebar flex items-center justify-center">
+        <div className="w-fit p-20 py-24 border-2 border-slate-300/10 rounded-2xl bg-main-gradient shadow-lg">
+          <div className="text-white text-2xl font-base text-center">
+            Welcome to
+          </div>
+          <img src={logo} alt="logo" className="w-80 mx-auto m-3 mb-11" />
+          <div className="flex justify-center items-center">
+            <p className="text-white text-sm italic text-center">
+              Please use a desktop browser to continue onboarding.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
+    <div className="w-screen h-full bg-sidebar flex items-center justify-center">
       <div className="w-fit p-20 py-24 border-2 border-slate-300/10 rounded-2xl bg-main-gradient shadow-lg">
         <div className="text-white text-2xl font-base text-center">
           Welcome to
@@ -25,7 +51,7 @@ export default function OnboardingFlow() {
           </button>
         </div>
       </div>
-      <OnboardingModal />
+      {modalVisible && <OnboardingModal setModalVisible={setModalVisible} />}
     </div>
   );
 }