md2bb: tuned responsiveness

andrewpey · Dec 10, 2024 · cddfbfa · cddfbfa
1 parent 19aa334
commit cddfbfa
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/routes/md2bb/+page.svelte b/src/routes/md2bb/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { tick } from 'svelte';
+    import { onMount, tick } from 'svelte';
     import { convert } from './md2bb';
     import { Confetti } from 'svelte-confetti';
 
@@ -15,21 +15,23 @@
     }
 </script>
 
-<div class="flex h-screen w-full flex-col md:flex-row">
-    <textarea
-        bind:value={md}
-        class="flex-1 resize-none border-none bg-white p-4 text-lg focus:border-blue-300 focus:outline-none md:p-16"
-    ></textarea>
+<div class="flex h-dvh w-full flex-col sm:flex-row">
+    <div class="flex-1">
+        <textarea
+            bind:value={md}
+            class="h-full w-full resize-none overscroll-contain border-none bg-white p-4 text-lg focus:outline-none sm:p-16"
+        ></textarea>
+    </div>
 
     <div class="relative flex-1">
         <textarea
-            class="h-full w-full resize-none border-none bg-gray-50 p-4 text-lg focus:outline-none md:p-16"
+            class="h-full w-full resize-none overscroll-contain border-none bg-gray-50 p-4 text-lg focus:outline-none sm:p-16"
             readonly>{bb}</textarea
         >
 
         <button
             onclick={copy}
-            class="absolute right-4 top-4 flex items-center justify-center rounded p-2 text-gray-300 hover:text-blue-300 focus:outline-none active:text-blue-400 md:right-6 md:top-6"
+            class="absolute right-4 top-4 flex items-center justify-center p-2 text-gray-300 hover:text-blue-300 focus:outline-none active:text-blue-400 sm:right-6 sm:top-6"
         >
             <span class="material-symbols-outlined">content_copy</span>
             {#if confetti}