From e4d4d11413dcc873a470baac7baf28ef46c09b43 Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Fri, 24 Nov 2023 20:17:40 +0100
Subject: [PATCH] Fixed auto wrapping

---
 src/components/EditForm.svelte | 14 +++++++++++---
 src/components/TopBar.svelte   |  4 ++--
 src/routes/+page.svelte        | 24 +++++++++++++-----------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/EditForm.svelte b/src/components/EditForm.svelte
index cc79ce7..7e44c13 100644
--- a/src/components/EditForm.svelte
+++ b/src/components/EditForm.svelte
@@ -29,6 +29,17 @@
     selectedLanguage = languages.find((e) => e.value === $selectedLang)!
   })
 
+  selectedLang.subscribe((lang) => {
+    textWrap = lang === 'plt' || lang === 'md'
+  })
+
+  $: {
+    if (editor) {
+      // Line wrapping
+      editor.setOption('lineWrapping', textWrap)
+    }
+  }
+
   $: {
     if (editor) {
       languages = CodeMirror.modeInfo
@@ -49,9 +60,6 @@
       editor.setOption('mode', langData.mime)
       CodeMirror.autoLoadMode(editor, langData.mode)
       $selectedLang = selectedLanguage?.value ?? 'plt'
-
-      // Line wrapping
-      editor.setOption('lineWrapping', textWrap)
     }
   }
 
diff --git a/src/components/TopBar.svelte b/src/components/TopBar.svelte
index c8ce1e6..f154190 100644
--- a/src/components/TopBar.svelte
+++ b/src/components/TopBar.svelte
@@ -1,11 +1,11 @@
 <div
-  class="flex flex-wrap justify-between items-center px-3 py-1 text-sm relative z-10 shadow-md gap-2 font-mono bg-gray-700"
+  class="flex flex-wrap justify-between items-center px-3 py-1 text-sm w-full z-10 shadow-md gap-2 font-mono bg-gray-700"
 >
   <div class="flex items-center">
     <h1 class="text-xl">Paste</h1>
     <span class="ml-8 text-xs">
       <a
-        href="?l=md#G0oEIKySx5UfTkdu1XoEsNFTBka+1+MnKOMEeLUaweWLc/oYlbttJz93QOgIkhdODeUmDs/+u3T5RANkM7+ktGLRxbTN0WIKyb2AWJbsnIoNDvzMtbcgQpsQYPWXPwUeRkuMWOXIEYIfzvnjqY85WNtT9Rjq3Y4/qHB1+mjzCQsTvr9UIfLbq28+i4joe5i/F2SQCTO9G/SlgnojZOKr9BSbIq0EPVBnVgg9T8+zls2Ezgg67tZTjX8pVB70RIghiwfFeqn/ZMQv9VGcbEWDIHnUlL52CL4FeCQ6DMJ4OOtVWk9jWI3i1CRvzxbmHudPlk1iA4pD9wHgOOILFPKQUAntulosi6VRhJ9eeSmViKpbloonQX9cDQVUkg8rzdkoBllTTfnVcYwDRsMS3UjTv/I+befAQeNMiRc7ESFegwUd6yEFPyVJG8RCXcgvw1QfdBe93uXQ9qGBL6BhLpjlpqxjmf9fwkKHFYClXmn7yaZrc/HrW6YH5F6Ei9MGKMvY5be++/noh6TJ5MeGgDzeJgNr0rjvcltZrDRS8wumbWpseMjTY1bz/rp/fJVQxwy/Rd+kXjlGrMJLZsVVwED5b0Jr26wUAm85shUyLX50kklq6ZIRfnzNX4LWrnl72vWR1YaTr/3n+Cp+6IBEliYA"
+        href="/?l=md#G0oEIKySx5UfTkdu1XoEsNFTBka+1+MnKOMEeLUaweWLc/oYlbttJz93QOgIkhdODeUmDs/+u3T5RANkM7+ktGLRxbTN0WIKyb2AWJbsnIoNDvzMtbcgQpsQYPWXPwUeRkuMWOXIEYIfzvnjqY85WNtT9Rjq3Y4/qHB1+mjzCQsTvr9UIfLbq28+i4joe5i/F2SQCTO9G/SlgnojZOKr9BSbIq0EPVBnVgg9T8+zls2Ezgg67tZTjX8pVB70RIghiwfFeqn/ZMQv9VGcbEWDIHnUlL52CL4FeCQ6DMJ4OOtVWk9jWI3i1CRvzxbmHudPlk1iA4pD9wHgOOILFPKQUAntulosi6VRhJ9eeSmViKpbloonQX9cDQVUkg8rzdkoBllTTfnVcYwDRsMS3UjTv/I+befAQeNMiRc7ESFegwUd6yEFPyVJG8RCXcgvw1QfdBe93uXQ9qGBL6BhLpjlpqxjmf9fwkKHFYClXmn7yaZrc/HrW6YH5F6Ei9MGKMvY5be++/noh6TJ5MeGgDzeJgNr0rjvcltZrDRS8wumbWpseMjTY1bz/rp/fJVQxwy/Rd+kXjlGrMJLZsVVwED5b0Jr26wUAm85shUyLX50kklq6ZIRfnzNX4LWrnl72vWR1YaTr/3n+Cp+6IBEliYA"
         target="_blank"
       >
         About
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 54fc127..7ff54ac 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -58,7 +58,7 @@
   }
 </script>
 
-<div>
+<div class="overflow-hidden h-screen flex flex-col">
   {#if decompressed}
     <TopBar>
       <a
@@ -69,16 +69,18 @@
         <Icon class="text-xl" icon="fluent:document-edit-16-regular" />
       </a>
     </TopBar>
-    <div class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl">
-      {#if isMarkdown}
-        {@html decompressed}
-      {:else if isPlainText}
-        <div class="whitespace-pre-line">
-          {decompressed}
-        </div>
-      {:else}
-        <pre><code>{@html decompressed}</code></pre>
-      {/if}
+    <div class="overflow-y-auto grow">
+      <div class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl">
+        {#if isMarkdown}
+          {@html decompressed}
+        {:else if isPlainText}
+          <div class="whitespace-pre-line">
+            {decompressed}
+          </div>
+        {:else}
+          <pre><code>{@html decompressed}</code></pre>
+        {/if}
+      </div>
     </div>
   {/if}
 </div>