Merge pull request #156 from nasa-petal/mobile-scroll

Fix Mobile Sidebar

src/App.svelte

@@ -150,7 +150,7 @@
 
 </script>
 
-<main class="flex">
+<main class="flex w-full h-full">
   <div class="w-full h-full flex flex-col justify-between">
     {#await initKeyAsstAndThreads() then}
     {#if !loggedIn}
@@ -166,8 +166,8 @@
         changeAssistant={changeAssistants}
         />   
 
-      <div id="content-container" class="flex justify-between w-full h-full flex-1" class:open>
-        <div>
+      <div id="content-container" class="flex justify-between w-full h-full flex-1">
+        <div class="sidebar-container">
           <Sidebar 
             bind:threads
             bind:open
@@ -178,7 +178,7 @@
             />
         </div>
 
-        <div id="chat-container" class="w-full" class:loading>
+        <div id="chat-container" class="w-full" class:loading class:open>
           {#key activeThread.id}
           <AssistantDeepChat
             key={activeKey}
@@ -203,31 +203,35 @@
 <style>
   #content-container {
     height: calc(100% - 3rem);
-    overflow-y: hidden;
+    overflow: hidden;
+  }
+
+  .sidebar-container {
+    overflow: hidden;
   }
 
   #chat-container {
     transition: width 0.3s ease, filter 0.3s ease-out;
   }
   
-  .open #chat-container {
+  .open {
     width: 80%;
   }
 
   @media only screen and (max-width: 1400px) {
-    .open #chat-container {
+    .open {
       width: 70%;
     }
   }
 
   @media only screen and (max-width: 1000px) {
-    .open #chat-container {
+    .open {
       width: 60%;
     }
   }
 
   @media only screen and (max-width: 700px) {
-    .open #chat-container {
+    .open {
       width: 100%;
     }
   }

src/components/AssistantDeepChat.svelte

@@ -213,7 +213,10 @@
     }
 
     const inputButtons = input.getElementsByClassName("input-button");
-    inputButtons.forEach(button => {
+    if (!inputButtons) { return };
+
+    for (let i = 0; i < inputButtons.length; i++) {
+      const button = inputButtons[i];
       const buttonClickEventListener = button.onclick;
 
       if (!buttonClickEventListener) {
@@ -222,7 +225,7 @@
 
       button.tabIndex = 0;
       button.addEventListener('keydown', (e)=>{ if (e.key === 'Enter') buttonClickEventListener(e); });
-    });
+    }
   }
 </script>
 

src/components/Chat.svelte

@@ -17,22 +17,20 @@
     const trashBgColor = 'var(--red)';
 
     async function handleSelectThread() {
-        handleSelect();
+        handleSelect(thread);
     }
 
     async function handleDeleteThread() {
-        const success = handleDelete();
+        handleDelete(thread);
 
         // Make visual cue that weren't allowed to delete thread;
     }
 
     function isMobile() {
-        const userAgent = navigator.userAgent.toLowerCase();
-        if (/mobile|android|iphone|ipad/.test(userAgent)) {
-            return true;
-        } else {
-            return false;
-        }
+        const userAgent = navigator.userAgent;
+        const isMobile = /iPad|iPhone|iPod|Android|Windows|mobile/i.test(userAgent) 
+            || (/MacIntel|Mac/i.test(userAgent) && navigator.maxTouchPoints > 1); // ipad
+        return isMobile;
     }
 
 </script>
@@ -71,6 +69,7 @@
 <style>
     .chat-button-container {
         height: 3em;
+        width: 100%;
         color: var(--text-primary-color);
         border-bottom: 1px solid var(--border-color);
     }

src/components/Navbar.svelte

@@ -93,7 +93,7 @@
     width: 100%;
     height: 10em;
     margin-top: -7em;
-    padding: 7.5em env(safe-area-inset-right) 0.5em env(safe-area-inset-left);
+    padding: 7.5em 0.75em 0.5em 0.75em;
   }
   button {
     width: 50%;

src/components/Sidebar.svelte

@@ -51,14 +51,16 @@
 </script>
 
 <div>
-  <aside class="absolute shadow-lg flex flex-col" class:open>
+  <aside class="absolute flex flex-col" class:open>
     <button tabindex="0" class="focus:outline-none new-thread rounded-full m-2 text-base font-sans p-2" disabled={!open} on:click={handleButtonClick}>New Thread</button>
     <nav class="w-full">
-      {#if threads !== null}
-        {#each threads as thread}
-          <Chat handleSelect={() => handleChatClick(thread)} handleDelete={() => handleChatSwipe(thread)} selected={thread.id === selectedThreadId} bind:thread/>
-        {/each}
-      {/if}
+      <div class="w-full h-full">
+        {#if threads !== null}
+          {#each threads as thread}
+            <Chat handleSelect={handleChatClick} handleDelete={handleChatSwipe} selected={thread.id === selectedThreadId} bind:thread/>
+          {/each}
+        {/if}
+      </div>
     </nav>
   </aside>
 </div>
@@ -68,15 +70,18 @@
     outline: 5px auto -webkit-focus-ring-color; 
   }
 
+  nav {
+    padding-bottom: calc(2 * env(safe-area-inset-bottom));
+  }
+
   aside {
     z-index: 20;
     width: 20%;
     height: calc(100% - 3em);
     left: -20%;
     background-color: var(--nav-color);
-    border-right: 1px solid var(--border-color);
     transition: left ease 0.3s, width ease 0.3s, visibility 0.3s 0s;
-    overflow-y: auto;
+    overflow-y: scroll;
     visibility: hidden;
   }