From 2a94acd9e887aa1039d81052d87a8928a9942062 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 3 Aug 2022 20:03:10 +0200
Subject: [PATCH] Make whole separator line clickable

---
 ts/editor/PlainTextBadge.svelte | 46 ++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/ts/editor/PlainTextBadge.svelte b/ts/editor/PlainTextBadge.svelte
index f10a05f1b..99b8058e2 100644
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@@ -26,53 +26,53 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let width = 0;
 </script>
 
-<div
-    class="clickable"
-    style="--width: {width}px"
-    on:click|stopPropagation={toggle}
-    bind:clientWidth={width}
->
-    <span class:off class:on={!off} class="plain-text-badge" class:highlighted={!off} />
+<div class="clickable" style="--width: {width}px" on:click|stopPropagation={toggle}>
+    <span
+        class:off
+        class:on={!off}
+        class="plain-text-badge"
+        class:highlighted={!off}
+        bind:clientWidth={width}
+    />
 </div>
 
 <style lang="scss">
     .clickable {
-        right: calc(50% - var(--width) / 2);
-        position: absolute;
-        text-align: center;
-        bottom: -16px;
+        position: relative;
+        width: 100%;
         z-index: 3;
-        width: 32px;
-        height: 16px;
         cursor: pointer;
+        // make whole division line clickable
+        &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -7px;
+            width: 100%;
+            height: 14px;
+        }
     }
     .plain-text-badge {
-        left: 12px;
         position: absolute;
         opacity: 0;
         width: 8px;
         height: 8px;
         transform: rotate(-45deg);
+        left: calc(50% - var(--width) / 2);
 
         transition: bottom 0.2s ease-out;
         &.on {
-            bottom: 0px;
+            bottom: 11px;
             background: var(--code-bg);
             border-right: 1px solid var(--border);
             border-top: 1px solid var(--border);
         }
         &.off {
-            bottom: 10px;
+            bottom: -1px;
             background: var(--frame-bg);
             border-left: 1px solid var(--border);
             border-bottom: 1px solid var(--border);
         }
-
-        &::before,
-        &::after {
-            width: 10px;
-            height: 10px;
-        }
     }
     :global(.editor-field) {
         &:hover,
@@ -82,7 +82,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 transition: opacity 0.2s ease-in, bottom 0.2s ease-out;
                 &.on,
                 &.off {
-                    bottom: 5px;
+                    bottom: -5px;
                 }
             }
         }