From f2a6bad1d7330fbdf04ad620bc95beae1ca46b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 31 Oct 2024 09:44:33 +0100
Subject: [PATCH] Tweak issue title edit buttons and alignment

---
 src/views/repo/Issue.svelte | 76 ++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index bb784c43c..e00c78034 100644
--- a/src/views/repo/Issue.svelte
+++ b/src/views/repo/Issue.svelte
@@ -238,8 +238,7 @@
     font-weight: var(--font-weight-medium);
     -webkit-user-select: text;
     user-select: text;
-    margin-bottom: 20px;
-    margin-top: 6px;
+    height: 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -359,47 +358,54 @@
   </svelte:fragment>
 
   <div class="content">
-    {#if editingTitle}
-      <div class="global-flex" style:margin-bottom="0.5rem">
-        <TextInput
-          valid={updatedTitle.trim().length > 0}
-          bind:value={updatedTitle}
-          autofocus
-          onSubmit={async () => {
-            if (updatedTitle.trim().length > 0) {
-              await editTitle(issue.id, updatedTitle);
-            }
-          }}
-          onDismiss={() => {
-            updatedTitle = issue.title;
-            editingTitle = !editingTitle;
-          }} />
-        <div class="title-icons">
-          <Icon
-            name="checkmark"
-            onclick={async () => {
+    <div style:margin-bottom="1rem" style:margin-top="-4px">
+      {#if editingTitle}
+        <div class="global-flex">
+          <TextInput
+            valid={updatedTitle.trim().length > 0}
+            bind:value={updatedTitle}
+            autofocus
+            onSubmit={async () => {
               if (updatedTitle.trim().length > 0) {
                 await editTitle(issue.id, updatedTitle);
               }
-            }} />
-          <Icon
-            name="cross"
-            onclick={() => {
+            }}
+            onDismiss={() => {
               updatedTitle = issue.title;
               editingTitle = !editingTitle;
             }} />
-          <IssueStateButton state={issue.state} save={saveState} />
+          <div class="title-icons">
+            <Icon
+              styleCursor="pointer"
+              name="checkmark"
+              onclick={async () => {
+                if (updatedTitle.trim().length > 0) {
+                  await editTitle(issue.id, updatedTitle);
+                }
+              }} />
+            <Icon
+              styleCursor="pointer"
+              name="cross"
+              onclick={() => {
+                updatedTitle = issue.title;
+                editingTitle = !editingTitle;
+              }} />
+            <IssueStateButton state={issue.state} save={saveState} />
+          </div>
         </div>
-      </div>
-    {:else}
-      <div class="title">
-        <InlineTitle content={issue.title} fontSize="medium" />
-        <div class="title-icons">
-          <Icon name="pen" onclick={() => (editingTitle = !editingTitle)} />
-          <IssueStateButton state={issue.state} save={saveState} />
+      {:else}
+        <div class="title">
+          <InlineTitle content={issue.title} fontSize="medium" />
+          <div class="title-icons">
+            <Icon
+              styleCursor="pointer"
+              name="pen"
+              onclick={() => (editingTitle = !editingTitle)} />
+            <IssueStateButton state={issue.state} save={saveState} />
+          </div>
         </div>
-      </div>
-    {/if}
+      {/if}
+    </div>
 
     <IssueMetadata {issue} />