raggr-frontend/src/components/AnswerBubble.tsx

@@ -7,7 +7,7 @@ type AnswerBubbleProps = {
 
 export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
   return (
-    <div className="rounded-md bg-orange-100 p-3">
+    <div className="rounded-md bg-orange-100 p-3 sm:p-4">
       {loading ? (
         <div className="flex flex-col w-full animate-pulse gap-2">
           <div className="flex flex-row gap-2 w-full">
@@ -20,8 +20,10 @@ export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
           </div>
         </div>
       ) : (
-        <div className="flex flex-col">
-          <ReactMarkdown>{"🐈: " + text}</ReactMarkdown>
+        <div className="flex flex-col break-words overflow-wrap-anywhere">
+          <ReactMarkdown className="text-sm sm:text-base [&>*]:break-words">
+            {"🐈: " + text}
+          </ReactMarkdown>
         </div>
       )}
     </div>

raggr-frontend/src/components/ChatScreen.tsx

@@ -160,14 +160,14 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     <div className="h-screen bg-opacity-20">
       <div className="bg-white/85 h-screen">
         <div className="flex flex-row justify-center py-4">
-          <div className="flex flex-col gap-4 min-w-xl max-w-xl">
-            <div className="flex flex-row justify-between">
+          <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-0 sm:justify-between">
               <header className="flex flex-row justify-center gap-2 sticky top-0 z-10 bg-white">
-                <h1 className="text-3xl">ask simba!</h1>
+                <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
               </header>
-              <div className="flex flex-row gap-2">
+              <div className="flex flex-row gap-2 justify-center sm:justify-end">
                 <button
-                  className="p-2 border border-green-400 bg-green-200 hover:bg-green-400 cursor-pointer rounded-md"
+                  className="p-2 h-11 border border-green-400 bg-green-200 hover:bg-green-400 cursor-pointer rounded-md text-sm sm:text-base"
                   onClick={() => setShowConversations(!showConversations)}
                 >
                   {showConversations
@@ -175,7 +175,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
                     : "show conversations"}
                 </button>
                 <button
-                  className="p-2 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md"
+                  className="p-2 h-11 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md text-sm sm:text-base"
                   onClick={() => setAuthenticated(false)}
                 >
                   logout
@@ -198,26 +198,28 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
             <footer className="flex flex-col gap-2 sticky bottom-0">
               <div className="flex flex-row justify-between gap-2 grow">
                 <textarea
-                  className="p-4 border border-blue-200 rounded-md grow bg-white"
+                  className="p-3 sm:p-4 border border-blue-200 rounded-md grow bg-white min-h-[44px] resize-y"
                   onChange={handleQueryChange}
                   value={query}
+                  rows={2}
                 />
               </div>
               <div className="flex flex-row justify-between gap-2 grow">
                 <button
-                  className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow"
+                  className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base"
                   onClick={() => handleQuestionSubmit()}
                   type="submit"
                 >
                   Submit
                 </button>
               </div>
-              <div className="flex flex-row justify-center gap-2 grow">
+              <div className="flex flex-row justify-center gap-2 grow items-center">
                 <input
                   type="checkbox"
                   onChange={(event) => setSimbaMode(event.target.checked)}
+                  className="w-5 h-5 cursor-pointer"
                 />
-                <p>simba mode?</p>
+                <p className="text-sm sm:text-base">simba mode?</p>
               </div>
             </footer>
           </div>

raggr-frontend/src/components/ConversationList.tsx

@@ -38,22 +38,25 @@ export const ConversationList = ({
   }, []);
 
   return (
-    <div className="bg-indigo-300 rounded-md p-3 flex flex-col">
+    <div className="bg-indigo-300 rounded-md p-3 sm:p-4 flex flex-col gap-1">
       {conservations.map((conversation) => {
         return (
           <div
-            className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2"
+            key={conversation.id}
+            className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
             onClick={() => onSelectConversation(conversation)}
           >
-            <p>{conversation.title}</p>
+            <p className="text-sm sm:text-base break-words">
+              {conversation.title}
+            </p>
           </div>
         );
       })}
       <div
-        className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-2"
+        className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
         onClick={() => onCreateNewConversation()}
       >
-        <p> + Start a new thread</p>
+        <p className="text-sm sm:text-base"> + Start a new thread</p>
       </div>
     </div>
   );

raggr-frontend/src/components/LoginScreen.tsx

@@ -32,42 +32,48 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
     <div className="h-screen bg-opacity-20">
       <div className="bg-white/85 h-screen">
         <div className="flex flex-row justify-center py-4">
-          <div className="flex flex-col gap-4 min-w-xl max-w-xl">
+          <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
             <div className="flex flex-col gap-1">
-              <div className="flex flex-grow justify-center w-full bg-amber-400">
-                <h1 className="text-xl font-bold">
+              <div className="flex flex-grow justify-center w-full bg-amber-400 p-2">
+                <h1 className="text-base sm:text-xl font-bold text-center">
                   I AM LOOKING FOR A DESIGNER. THIS APP WILL REMAIN UGLY UNTIL A
                   DESIGNER COMES.
                 </h1>
               </div>
               <header className="flex flex-row justify-center gap-2 grow sticky top-0 z-10 bg-white">
-                <h1 className="text-3xl">ask simba!</h1>
+                <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
               </header>
-              <label htmlFor="username">username</label>
+              <label htmlFor="username" className="text-sm sm:text-base">
+                username
+              </label>
               <input
                 type="text"
                 id="username"
                 name="username"
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
-                className="border border-s-slate-950 p-3 rounded-md"
+                className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
               />
-              <label htmlFor="password">password</label>
+              <label htmlFor="password" className="text-sm sm:text-base">
+                password
+              </label>
               <input
                 type="password"
                 id="password"
                 name="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="border border-s-slate-950 p-3 rounded-md"
+                className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
               />
               {error && (
-                <div className="text-red-600 font-semibold">{error}</div>
+                <div className="text-red-600 font-semibold text-sm sm:text-base">
+                  {error}
+                </div>
               )}
             </div>
 
             <button
-              className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow"
+              className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base"
               onClick={handleLogin}
             >
               login

raggr-frontend/src/components/QuestionBubble.tsx

@@ -3,5 +3,9 @@ type QuestionBubbleProps = {
 };
 
 export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
-  return <div className="rounded-md bg-stone-200 p-3">🤦: {text}</div>;
+  return (
+    <div className="rounded-md bg-stone-200 p-3 sm:p-4 break-words overflow-wrap-anywhere text-sm sm:text-base">
+      🤦: {text}
+    </div>
+  );
 };