Fix some layout issues

src/App.svelte

@@ -35,19 +35,19 @@
 
 
 <Navbar />
-<section class="section root-section">
+<!-- <section class="section root-section"> -->
-  <div class="container is-fullhd">
+  <!-- <div class="container is-fullhd"> -->
-    <div class="columns">
+    <!-- <div class="columns"> -->
-      <div class="column is-one-fifth side-bar-column">
+      <div class="side-bar-column">
         <Sidebar />
       </div>
-      <div class="column is-four-fifths main-content-column" id="content">
+      <div class="main-content-column" id="content">
         {#key $location}
           <Router {routes} on:conditionsFailed={() => replace('/')}/>
         {/key}
       </div>
-    </div>
+    <!-- </div> -->
-  </div>
+  <!-- </div> -->
-</section>
+<!-- </section> -->
 
 <!-- <Footer /> -->

src/app.scss

@@ -30,7 +30,7 @@ html {
   --chatInputPaddingBottom: 10px;
   --chatInputPaddingLeft: 60px;
 
-  --BgColor: var(-BgColorLight) /* leave this */
+  --BgColor: var(-BgColorLight);
 }
 
 .navbar {
@@ -69,6 +69,7 @@ html {
     --sidebarWidth: max(300px, 20%);
     --mainContentWidth: calc(100%);
     --sidebarTop: 56px;
+    --sectionPaddingTop: 56px;
     --chatInputPaddingRight: 20px;
     --chatInputPaddingLeft: 20px;
   }
@@ -99,10 +100,6 @@ html {
   flex-direction: column;
   flex-grow: 1;
   min-height: 100vh;
-
-  section.section.root-section {
-    flex-grow: 1;
-  }
 }
 
 .is-disabled {
@@ -202,8 +199,6 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
   }
 }
 
-
-
 /* Support for copy code button */
 .code-block>button {
   position: absolute;
@@ -297,17 +292,16 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 
 /* Overrides for main layout  */
 
-.column.side-bar-column {
+.side-bar-column {
   width: var(--sidebarWidth);
 }
 
-.column.main-content-column {
+.main-content-column {
-  width: var(--mainContentWidth)
+  margin-left: auto;
-}
+  margin-right: 0px;
-
+  width: var(--mainContentWidth);
-section.section.root-section {
-  padding: 0px;
   padding-top: var(--sectionPaddingTop);
+  position: relative;
 }
 
 aside.menu.main-menu {
@@ -352,6 +346,14 @@ aside.menu.main-menu .menu-expanse {
   background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorLight) 54.73%);
 }
 
+.lower-mask2 {
+  display: none;
+}
+
+.lower-mask2.strong-mask {
+  display: block;
+}
+
 
 @media (prefers-color-scheme: dark) {
   .default-text {
@@ -365,6 +367,8 @@ aside.menu.main-menu .menu-expanse {
     box-shadow: 5px 0px 0px var(--BgColorSidebarDark);
   }
 }
+
+
 *::-webkit-scrollbar {
   width: 11px;
 }
@@ -389,13 +393,14 @@ aside.menu.main-menu .menu-expanse {
     var(--chatContentPaddingLeft) ;
 }
 
-.chat-focus-point {
+.section:has(+ .pin-footer) {
-  width: 100%;
+  padding-bottom: var(--chatContentPaddingBottom);
-  height: 1px;
+}
-  /* Bulma does something strange where scrolling to the end of the body
+
-   or html doesn't actually scroll to the bottom of the page 
+.pin-footer {
-   this -.75rem, then scroll to the bottom of this works, but I don't like it.*/
+  position: fixed;
-  margin-bottom: -.75rem;
+  bottom: 0px;
+  width: var(--mainContentWidth);
 }
 
 .prompt-input-container {

src/lib/Chat.svelte

@@ -34,14 +34,12 @@
     faMicrophone,
     faLightbulb
   } from '@fortawesome/free-solid-svg-icons/index'
-  import {
-    faGithub
-  } from '@fortawesome/free-brands-svg-icons/index'
   // import { encode } from 'gpt-tokenizer'
   import { v4 as uuidv4 } from 'uuid'
   import { countPromptTokens, getMaxModelPrompt, getPrice } from './Stats.svelte'
   import { autoGrowInputOnEvent, sizeTextElements } from './Util.svelte'
   import ChatSettingsModal from './ChatSettingsModal.svelte'
+  import Footer from './Footer.svelte'
 
   // This makes it possible to override the OpenAI API base URL in the .env file
   const apiBase = import.meta.env.VITE_API_BASE || 'https://api.openai.com'
@@ -143,7 +141,7 @@
   // Scroll to the bottom of the chat on update
   const focusInput = () => {
     input.focus()
-    setTimeout(() => document.querySelector('.chat-focus-point')?.scrollIntoView({ behavior: 'smooth', block: 'end' }), 0)
+    setTimeout(() => document.querySelector('body')?.scrollIntoView({ behavior: 'smooth', block: 'end' }), 0)
   }
 
   // Send API request
@@ -520,10 +518,7 @@
   <Prompts bind:input />
 {/if}
 </div>
-<div class="lower-mask"/>
+<Footer class="prompt-input-container" strongMask={true}>
-<div class="lower-mask2"/>
-<div class="chat-focus-point"></div>
-<div class="prompt-input-container">
   <form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}>
     <p class="control is-expanded">
       <textarea
@@ -565,16 +560,7 @@
     </p>
     {/each}
   </div>
-  <div class="content has-text-centered credit-footer">
+</Footer>
-    <p>
-      <strong>ChatGPT-web</strong>
-      by
-      <a target="_blank" href="https://niekvandermaas.nl/">Niek van der Maas</a>
-      <a target="_blank"class="ml-4" href="https://github.com/Niek/chatgpt-web"><span style="position:absolute" class="icon default-text"><Fa size="2x" icon="{faGithub}"/></span></a>
-    </p>
-  </div>
-</div>
-
 
 
 <ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} />

src/lib/Footer.svelte

@@ -1,12 +1,26 @@
-<footer class="footer">
+<script lang="ts">
-  <div class="content has-text-centered">
+  import Fa from 'svelte-fa/src/fa.svelte'
+  import {
+    faGithub
+  } from '@fortawesome/free-brands-svg-icons/index'
+
+  let classes = ''
+	export { classes as class }
+  export let pin: boolean = false
+  export let strongMask: boolean = false
+</script>
+
+<div class="lower-mask section-footer-mask" class:pin-footer={pin}/>
+<div class="lower-mask2" class:strong-mask={strongMask} />
+<div class="section-footer {classes}" class:pin-footer={pin}>
+  <slot />
+  <div class="content has-text-centered credit-footer">
     <p>
       <strong>ChatGPT-web</strong>
       by
-      <a href="https://niekvandermaas.nl/">Niek van der Maas</a>
+      <a target="_blank" href="https://niekvandermaas.nl/">Niek van der Maas</a>
-      &mdash; see
+      <a target="_blank"class="ml-4" href="https://github.com/Niek/chatgpt-web"><span style="position:absolute" class="icon default-text"><Fa size="2x" icon="{faGithub}"/></span></a>
-      <a href="https://github.com/Niek/chatgpt-web">GitHub</a>
+      <span style="display:inline-block;width:30px;height:20px;"></span>
-      for source code.
     </p>
   </div>
-</footer>
+</div>

src/lib/Home.svelte

@@ -1,63 +1,65 @@
 <script lang="ts">
-import { apiKeyStorage } from './Storage.svelte'
+  import { apiKeyStorage } from './Storage.svelte'
+  import Footer from './Footer.svelte'
 
 $: apiKey = $apiKeyStorage
 
 </script>
 
 <section class="section">
-<article class="message">
+  <article class="message">
-  <div class="message-body">
-    <strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong>
-    is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
-    <a href="https://platform.openai.com/account/api-keys" target="_blank" rel="noreferrer">an OpenAI API key</a>
-    first. OpenAI bills per token (usage-based), which means it is a lot cheaper than
-    <a href="https://openai.com/blog/chatgpt-plus" target="_blank" rel="noreferrer">ChatGPT Plus</a>, unless you use
-    more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is
-    <strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
-  </div>
-</article>
-<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
-  <div class="message-body">
-    Set your OpenAI API key below:
-
-    <form
-      class="field has-addons has-addons-right"
-      on:submit|preventDefault={(event) => {
-        if (event.target && event.target[0].value) {
-        apiKeyStorage.set(event.target[0].value)
-        }
-      }}
-    >
-      <p class="control is-expanded">
-        <input
-          aria-label="OpenAI API key"
-          type="password"
-          autocomplete="off"
-          class="input"
-          class:is-danger={!apiKey}
-          value={apiKey}
-        />
-      </p>
-      <p class="control">
-        <button class="button is-info" type="submit">Save</button>
-      </p>
-    </form>
-
-    {#if !apiKey}
-      <p class="help is-danger">
-        Please enter your <a href="https://platform.openai.com/account/api-keys">OpenAI API key</a> above to use ChatGPT-web.
-        It is required to use ChatGPT-web.
-      </p>
-    {/if}
-  </div>
-</article>
-{#if apiKey}
-  <article class="message is-info">
     <div class="message-body">
-      Select an existing chat on the sidebar, or
+      <strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong>
-      <a href={'#/chat/new'}>create a new chat</a>
+      is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
+      <a href="https://platform.openai.com/account/api-keys" target="_blank" rel="noreferrer">an OpenAI API key</a>
+      first. OpenAI bills per token (usage-based), which means it is a lot cheaper than
+      <a href="https://openai.com/blog/chatgpt-plus" target="_blank" rel="noreferrer">ChatGPT Plus</a>, unless you use
+      more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is
+      <strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
     </div>
   </article>
-{/if}
+  <article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
+    <div class="message-body">
+      Set your OpenAI API key below:
+
+      <form
+        class="field has-addons has-addons-right"
+        on:submit|preventDefault={(event) => {
+          if (event.target && event.target[0].value) {
+          apiKeyStorage.set(event.target[0].value)
+          }
+        }}
+      >
+        <p class="control is-expanded">
+          <input
+            aria-label="OpenAI API key"
+            type="password"
+            autocomplete="off"
+            class="input"
+            class:is-danger={!apiKey}
+            value={apiKey}
+          />
+        </p>
+        <p class="control">
+          <button class="button is-info" type="submit">Save</button>
+        </p>
+      </form>
+
+      {#if !apiKey}
+        <p class="help is-danger">
+          Please enter your <a href="https://platform.openai.com/account/api-keys">OpenAI API key</a> above to use ChatGPT-web.
+          It is required to use ChatGPT-web.
+        </p>
+      {/if}
+    </div>
+  </article>
+  {#if apiKey}
+    <article class="message is-info">
+      <div class="message-body">
+        Select an existing chat on the sidebar, or
+        <a href={'#/chat/new'}>create a new chat</a>
+      </div>
+    </article>
+  {/if}
 </section>
+<Footer pin={true} />