Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › d0bb73af
Issue styling tweaks
Open rudolfs opened 1 year ago

See individual commits for details.

check check-e2e

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +332 -256
5 files changed +332 -256 066034d6 → f2a6bad1
modified src/components/AnnounceSwitch.svelte
@@ -27,54 +27,34 @@


<script lang="ts">

  import { writable } from "svelte/store";
+ 
  import Button from "./Button.svelte";

</script>



<style>

  .container {
- 
    background-color: var(--color-fill-ghost);
- 
    clip-path: var(--2px-corner-fill);

    display: flex;
- 
    height: 32px;

    align-items: center;
- 
    padding: 0 2px;
- 
  }
- 
  button {
- 
    height: 28px;
- 
    cursor: pointer;
- 
    display: flex;
- 
    align-items: center;
- 
    border: none;
- 
    white-space: nowrap;
- 
    touch-action: manipulation;
- 
    clip-path: var(--1px-corner-fill);
- 
    font-size: var(--font-size-small);
- 
    margin: 0;
- 
    padding: 0 1rem;
- 
    color: var(--color-foreground-contrast);
- 
    background-color: var(--color-fill-ghost);
- 
    font-weight: var(--font-weight-semibold);
- 
  }
-
- 
  .active {
- 
    color: var(--color-foreground-emphasized);
- 
    background-color: var(--color-background-dip);

  }

</style>



<div class="container">
- 
  <button
- 
    class:active={$announce}
+ 
  <Button
+ 
    flatRight
+ 
    variant="ghost"
+ 
    active={$announce}

    onclick={() => {

      storeAnnounce(true);

    }}>

    Right away
- 
  </button>
+ 
  </Button>
- 
  <button
- 
    class:active={!$announce}
+ 
  <Button
+ 
    flatLeft
+ 
    variant="ghost"
+ 
    active={!$announce}

    onclick={() => {

      storeAnnounce(false);

    }}>

    Periodically
- 
  </button>
+ 
  </Button>

</div>
modified src/components/Button.svelte
@@ -1,7 +1,12 @@
<script lang="ts">

  export let variant: "primary" | "secondary" | "ghost";

  export let onclick: (() => void) | undefined = undefined;
+ 


  export let disabled: boolean = false;
+ 
  export let active: boolean = false;
+
+ 
  export let flatLeft: boolean = false;
+ 
  export let flatRight: boolean = false;



  $: style =

    `--button-color-1: var(--color-fill-${variant});` +
@@ -12,15 +17,230 @@
</script>



<style>
- 
  .pixel {
- 
    background-color: transparent;
+ 
  .container {
+ 
    white-space: nowrap;
+
+ 
    -webkit-touch-callout: none;
+ 
    -webkit-user-select: none;
+ 
    user-select: none;
+
+ 
    column-gap: 0;
+ 
    row-gap: 0;
+ 
    display: grid;
+ 
    grid-template-columns: 2px 2px auto 2px 2px;
+ 
    grid-template-rows: 2px 2px auto 2px 2px;
+ 
    grid-template-areas:
+ 
      "p1-1 p1-2 p1-3 p1-4 p1-5"
+ 
      "p2-1 p2-2 p2-3 p2-4 p2-5"
+ 
      "p3-1 p3-2 p3-3 p3-4 p3-5"
+ 
      "p4-1 p4-2 p4-3 p4-4 p4-5"
+ 
      "p5-1 p5-2 p5-3 p5-4 p5-5";
+ 
  }
+
+ 
  .container:hover:not(.disabled) .p1-3,
+ 
  .container:hover:not(.disabled) .p2-2,
+ 
  .container:hover:not(.disabled) .p2-4,
+ 
  .container:hover:not(.disabled) .p3-1,
+ 
  .container:hover:not(.disabled) .p3-3,
+ 
  .container:hover:not(.disabled) .p4-2 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+
+ 
  .container:hover:not(.disabled) .p2-3,
+ 
  .container:hover:not(.disabled) .p3-2 {
+ 
    background-color: var(--button-color-4);
+ 
  }
+
+ 
  .container:hover:not(.disabled) .p3-4,
+ 
  .container:hover:not(.disabled) .p3-5,
+ 
  .container:hover:not(.disabled) .p4-3,
+ 
  .container:hover:not(.disabled) .p4-4,
+ 
  .container:hover:not(.disabled) .p5-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container.active:not(.disabled) .p1-3,
+ 
  .container.active:not(.disabled) .p2-2,
+ 
  .container.active:not(.disabled) .p2-4,
+ 
  .container.active:not(.disabled) .p3-1,
+ 
  .container.active:not(.disabled) .p3-3,
+ 
  .container.active:not(.disabled) .p3-5,
+ 
  .container.active:not(.disabled) .p4-2,
+ 
  .container.active:not(.disabled) .p4-4,
+ 
  .container.active:not(.disabled) .p5-3,
+ 
  .container:active:not(.disabled) .p1-3,
+ 
  .container:active:not(.disabled) .p2-2,
+ 
  .container:active:not(.disabled) .p2-4,
+ 
  .container:active:not(.disabled) .p3-1,
+ 
  .container:active:not(.disabled) .p3-3,
+ 
  .container:active:not(.disabled) .p3-5,
+ 
  .container:active:not(.disabled) .p4-2,
+ 
  .container:active:not(.disabled) .p4-4,
+ 
  .container:active:not(.disabled) .p5-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container.active:not(.disabled) .p2-3,
+ 
  .container.active:not(.disabled) .p3-2,
+ 
  .container:active:not(.disabled) .p2-3,
+ 
  .container:active:not(.disabled) .p3-2 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+
+ 
  .container.active:not(.disabled) .p3-4,
+ 
  .container.active:not(.disabled) .p4-3,
+ 
  .container:active:not(.disabled) .p3-4,
+ 
  .container:active:not(.disabled) .p4-3 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+
+ 
  .container.disabled {
+ 
    color: var(--color-foreground-disabled);
+ 
  }
+
+ 
  .disabled .p1-3,
+ 
  .disabled .p2-2,
+ 
  .disabled .p2-3,
+ 
  .disabled .p2-4,
+ 
  .disabled .p3-1,
+ 
  .disabled .p3-2,
+ 
  .disabled .p3-3,
+ 
  .disabled .p3-4,
+ 
  .disabled .p3-5,
+ 
  .disabled .p4-2,
+ 
  .disabled .p4-3,
+ 
  .disabled .p4-4,
+ 
  .disabled .p5-3 {
+ 
    background-color: var(--color-fill-ghost);
+ 
  }
+
+ 
  .flat-right .p1-4,
+ 
  .flat-right .p1-5,
+ 
  .flat-right .p2-5,
+ 
  .flat-right .p3-4 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .flat-right .p2-4 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .flat-right .p4-5,
+ 
  .flat-right .p5-4,
+ 
  .flat-right .p5-5 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+
+ 
  .container:hover:not(.disabled).flat-right .p1-4,
+ 
  .container:hover:not(.disabled).flat-right .p1-5,
+ 
  .container:hover:not(.disabled).flat-right .p2-5,
+ 
  .container:hover:not(.disabled).flat-right .p3-4 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:hover:not(.disabled).flat-right .p2-4 {
+ 
    background-color: var(--button-color-4);
+ 
  }
+ 
  .container:hover:not(.disabled).flat-right .p4-5,
+ 
  .container:hover:not(.disabled).flat-right .p5-4,
+ 
  .container:hover:not(.disabled).flat-right .p5-5 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container.active:not(.disabled).flat-right .p1-4,
+ 
  .container.active:not(.disabled).flat-right .p1-5,
+ 
  .container.active:not(.disabled).flat-right .p2-5,
+ 
  .container.active:not(.disabled).flat-right .p3-4,
+ 
  .container.active:not(.disabled).flat-right .p4-5,
+ 
  .container.active:not(.disabled).flat-right .p5-4,
+ 
  .container.active:not(.disabled).flat-right .p5-5,
+ 
  .container:active:not(.disabled).flat-right .p1-4,
+ 
  .container:active:not(.disabled).flat-right .p1-5,
+ 
  .container:active:not(.disabled).flat-right .p2-5,
+ 
  .container:active:not(.disabled).flat-right .p3-4,
+ 
  .container:active:not(.disabled).flat-right .p4-5,
+ 
  .container:active:not(.disabled).flat-right .p5-4,
+ 
  .container:active:not(.disabled).flat-right .p5-5 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container.active:not(.disabled).flat-right .p2-4,
+ 
  .container:active:not(.disabled).flat-right .p2-4 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .container.active:not(.disabled).flat-right .p3-5,
+ 
  .container.active:not(.disabled).flat-right .p4-4,
+ 
  .container:active:not(.disabled).flat-right .p3-5,
+ 
  .container:active:not(.disabled).flat-right .p4-4 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+
+ 
  .flat-left .p1-1,
+ 
  .flat-left .p1-2,
+ 
  .flat-left .p2-1,
+ 
  .flat-left .p3-2 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .flat-left .p2-2,
+ 
  .flat-left .p3-1 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .flat-left .p4-1,
+ 
  .flat-left .p4-2,
+ 
  .flat-left .p5-1,
+ 
  .flat-left .p5-2 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+
+ 
  .container:hover:not(.disabled).flat-left .p1-1,
+ 
  .container:hover:not(.disabled).flat-left .p1-2,
+ 
  .container:hover:not(.disabled).flat-left .p2-1,
+ 
  .container:hover:not(.disabled).flat-left .p3-2 {
+ 
    background-color: var(--button-color-2);
+ 
  }
+ 
  .container:hover:not(.disabled).flat-left .p2-2,
+ 
  .container:hover:not(.disabled).flat-left .p3-1 {
+ 
    background-color: var(--button-color-4);
+ 
  }
+ 
  .container:hover:not(.disabled).flat-left .p4-1,
+ 
  .container:hover:not(.disabled).flat-left .p4-2,
+ 
  .container:hover:not(.disabled).flat-left .p5-1,
+ 
  .container:hover:not(.disabled).flat-left .p5-2 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .container.active:not(.disabled).flat-left .p1-1,
+ 
  .container.active:not(.disabled).flat-left .p1-2,
+ 
  .container.active:not(.disabled).flat-left .p2-1,
+ 
  .container.active:not(.disabled).flat-left .p3-2,
+ 
  .container.active:not(.disabled).flat-left .p4-1,
+ 
  .container.active:not(.disabled).flat-left .p4-2,
+ 
  .container.active:not(.disabled).flat-left .p5-1,
+ 
  .container.active:not(.disabled).flat-left .p5-2,
+ 
  .container:active:not(.disabled).flat-left .p1-1,
+ 
  .container:active:not(.disabled).flat-left .p1-2,
+ 
  .container:active:not(.disabled).flat-left .p2-1,
+ 
  .container:active:not(.disabled).flat-left .p3-2,
+ 
  .container:active:not(.disabled).flat-left .p4-1,
+ 
  .container:active:not(.disabled).flat-left .p4-2,
+ 
  .container:active:not(.disabled).flat-left .p5-1,
+ 
  .container:active:not(.disabled).flat-left .p5-2 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container.active:not(.disabled).flat-left .p2-2,
+ 
  .container.active:not(.disabled).flat-left .p3-1,
+ 
  .container:active:not(.disabled).flat-left .p2-2,
+ 
  .container:active:not(.disabled).flat-left .p3-1 {
+ 
    background-color: var(--button-color-3);
+ 
  }
+ 
  .container.active:not(.disabled).flat-left .p4-2,
+ 
  .container:active:not(.disabled).flat-left .p4-2 {
+ 
    background-color: var(--button-color-2);

  }



  .p1-1 {

    grid-area: p1-1;
+ 
    background-color: transparent;

  }

  .p1-2 {

    grid-area: p1-2;
+ 
    background-color: transparent;

  }

  .p1-3 {

    grid-area: p1-3;
@@ -28,13 +248,16 @@
  }

  .p1-4 {

    grid-area: p1-4;
+ 
    background-color: transparent;

  }

  .p1-5 {

    grid-area: p1-5;
+ 
    background-color: transparent;

  }



  .p2-1 {

    grid-area: p2-1;
+ 
    background-color: transparent;

  }

  .p2-2 {

    grid-area: p2-2;
@@ -50,6 +273,7 @@
  }

  .p2-5 {

    grid-area: p2-5;
+ 
    background-color: transparent;

  }



  .p3-1 {
@@ -79,6 +303,7 @@


  .p4-1 {

    grid-area: p4-1;
+ 
    background-color: transparent;

  }

  .p4-2 {

    grid-area: p4-2;
@@ -94,13 +319,16 @@
  }

  .p4-5 {

    grid-area: p4-5;
+ 
    background-color: transparent;

  }



  .p5-1 {

    grid-area: p5-1;
+ 
    background-color: transparent;

  }

  .p5-2 {

    grid-area: p5-2;
+ 
    background-color: transparent;

  }

  .p5-3 {

    grid-area: p5-3;
@@ -108,176 +336,53 @@
  }

  .p5-4 {

    grid-area: p5-4;
+ 
    background-color: transparent;

  }

  .p5-5 {

    grid-area: p5-5;
- 
  }
-
- 
  .container:hover:not(.disabled) .p1-3 {
- 
    background-color: var(--button-color-2);
- 
  }
-
- 
  .container:hover:not(.disabled) .p2-2 {
- 
    background-color: var(--button-color-2);
- 
  }
- 
  .container:hover:not(.disabled) .p2-3 {
- 
    background-color: var(--button-color-4);
- 
  }
- 
  .container:hover:not(.disabled) .p2-4 {
- 
    background-color: var(--button-color-2);
- 
  }
-
- 
  .container:hover:not(.disabled) .p3-1 {
- 
    background-color: var(--button-color-2);
- 
  }
- 
  .container:hover:not(.disabled) .p3-2 {
- 
    background-color: var(--button-color-4);
- 
  }
- 
  .container:hover:not(.disabled) .p3-3 {
- 
    background-color: var(--button-color-2);
- 
  }
- 
  .container:hover:not(.disabled) .p3-4 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:hover:not(.disabled) .p3-5 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container:hover:not(.disabled) .p4-2 {
- 
    background-color: var(--button-color-2);
- 
  }
- 
  .container:hover:not(.disabled) .p4-3 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:hover:not(.disabled) .p4-4 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container:hover:not(.disabled) .p5-3 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container:active:not(.disabled) .p1-3 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container:active:not(.disabled) .p2-2 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:active:not(.disabled) .p2-3 {
- 
    background-color: var(--button-color-3);
- 
  }
- 
  .container:active:not(.disabled) .p2-4 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container:active:not(.disabled) .p3-1 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:active:not(.disabled) .p3-2 {
- 
    background-color: var(--button-color-3);
- 
  }
- 
  .container:active:not(.disabled) .p3-3 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:active:not(.disabled) .p3-4 {
- 
    background-color: var(--button-color-2);
- 
  }
- 
  .container:active:not(.disabled) .p3-5 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container:active:not(.disabled) .p4-2 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:active:not(.disabled) .p4-3 {
- 
    background-color: var(--button-color-2);
- 
  }
- 
  .container:active:not(.disabled) .p4-4 {
- 
    background-color: var(--button-color-1);
- 
  }
- 
  .container:active:not(.disabled) .p5-3 {
- 
    background-color: var(--button-color-1);
- 
  }
-
- 
  .container.disabled {
- 
    color: var(--color-foreground-disabled);
- 
  }
-
- 
  .disabled .p1-3,
- 
  .disabled .p2-2,
- 
  .disabled .p2-3,
- 
  .disabled .p2-4,
- 
  .disabled .p3-1,
- 
  .disabled .p3-2,
- 
  .disabled .p3-3,
- 
  .disabled .p3-4,
- 
  .disabled .p3-5,
- 
  .disabled .p4-2,
- 
  .disabled .p4-3,
- 
  .disabled .p4-4,
- 
  .disabled .p5-3 {
- 
    background-color: var(--color-fill-ghost);
- 
  }
-
- 
  .container {
- 
    height: 32px;
- 
    white-space: nowrap;
-
- 
    -webkit-touch-callout: none;
- 
    -webkit-user-select: none;
- 
    user-select: none;
-
- 
    column-gap: 0;
- 
    row-gap: 0;
- 
    display: grid;
- 
    grid-template-columns: 2px 2px auto 2px 2px;
- 
    grid-template-rows: 2px 2px auto 2px 2px;
- 
    grid-template-areas:
- 
      "p1-1 p1-2 p1-3 p1-4 p1-5"
- 
      "p2-1 p2-2 p2-3 p2-4 p2-5"
- 
      "p3-1 p3-2 p3-3 p3-4 p3-5"
- 
      "p4-1 p4-2 p4-3 p4-4 p4-5"
- 
      "p5-1 p5-2 p5-3 p5-4 p5-5";
+ 
    background-color: transparent;

  }

</style>



<!-- svelte-ignore a11y-click-events-have-key-events -->

<div
- 
  class="container"
+ 
  class="container active"

  style:cursor={!disabled ? "pointer" : "default"}

  class:disabled
+ 
  class:active
+ 
  class:flat-right={flatRight}
+ 
  class:flat-left={flatLeft}

  onclick={!disabled ? onclick : undefined}

  role="button"

  tabindex="0"

  {style}>
- 
  <div class="pixel p1-1"></div>
- 
  <div class="pixel p1-2"></div>
- 
  <div class="pixel p1-3"></div>
- 
  <div class="pixel p1-4"></div>
- 
  <div class="pixel p1-5"></div>
+ 
  <div class="p1-1"></div>
+ 
  <div class="p1-2"></div>
+ 
  <div class="p1-3"></div>
+ 
  <div class="p1-4"></div>
+ 
  <div class="p1-5"></div>
- 
  <div class="pixel p2-1"></div>
- 
  <div class="pixel p2-2"></div>
- 
  <div class="pixel p2-3"></div>
- 
  <div class="pixel p2-4"></div>
- 
  <div class="pixel p2-5"></div>
+ 
  <div class="p2-1"></div>
+ 
  <div class="p2-2"></div>
+ 
  <div class="p2-3"></div>
+ 
  <div class="p2-4"></div>
+ 
  <div class="p2-5"></div>
- 
  <div class="pixel p3-1"></div>
- 
  <div class="pixel p3-2"></div>
- 
  <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
- 
  <div class="pixel p3-4"></div>
- 
  <div class="pixel p3-5"></div>
+ 
  <div class="p3-1"></div>
+ 
  <div class="p3-2"></div>
+ 
  <div class="p3-3 txt-semibold txt-small"><slot /></div>
+ 
  <div class="p3-4"></div>
+ 
  <div class="p3-5"></div>
- 
  <div class="pixel p4-1"></div>
- 
  <div class="pixel p4-2"></div>
- 
  <div class="pixel p4-3"></div>
- 
  <div class="pixel p4-4"></div>
- 
  <div class="pixel p4-5"></div>
+ 
  <div class="p4-1"></div>
+ 
  <div class="p4-2"></div>
+ 
  <div class="p4-3"></div>
+ 
  <div class="p4-4"></div>
+ 
  <div class="p4-5"></div>
- 
  <div class="pixel p5-1"></div>
- 
  <div class="pixel p5-2"></div>
- 
  <div class="pixel p5-3"></div>
- 
  <div class="pixel p5-4"></div>
- 
  <div class="pixel p5-5"></div>
+ 
  <div class="p5-1"></div>
+ 
  <div class="p5-2"></div>
+ 
  <div class="p5-3"></div>
+ 
  <div class="p5-4"></div>
+ 
  <div class="p5-5"></div>

</div>
modified src/components/IssueStateButton.svelte
@@ -33,13 +33,13 @@
    display: flex;

    flex-direction: row;

    justify-content: center;
- 
    gap: 1px;

  }

</style>



<div class="main">

  <Button

    variant="secondary"
+ 
    flatRight

    onclick={() => void save(selectedAction["state"])}>

    {selectedAction["caption"]}

  </Button>
@@ -48,7 +48,12 @@
    popoverPadding="0"

    popoverPositionTop="3rem"

    popoverPositionRight="0">
- 
    <Button slot="toggle" let:toggle onclick={toggle} variant="secondary">
+ 
    <Button
+ 
      flatLeft
+ 
      slot="toggle"
+ 
      let:toggle
+ 
      onclick={toggle}
+ 
      variant="secondary">

      <div style:height="22px" class="global-flex">

        <Icon name="chevron-down" />

      </div>
modified src/components/ThemeSwitch.svelte
@@ -28,58 +28,38 @@


<script lang="ts">

  import { writable } from "svelte/store";
+ 


  import Icon from "./Icon.svelte";
+ 
  import Button from "./Button.svelte";

</script>



<style>

  .container {
- 
    background-color: var(--color-fill-ghost);
- 
    clip-path: var(--2px-corner-fill);
- 
    display: flex;
- 
    height: 32px;
- 
    align-items: center;
- 
    padding: 0 2px;
- 
  }
- 
  button {
- 
    height: 28px;
- 
    cursor: pointer;

    display: flex;

    align-items: center;
- 
    border: none;
- 
    white-space: nowrap;
- 
    touch-action: manipulation;
- 
    clip-path: var(--1px-corner-fill);
- 
    font-size: var(--font-size-small);
- 
    margin: 0;
- 
    padding: 0 1rem;
- 
    color: var(--color-foreground-contrast);
- 
    background-color: var(--color-fill-ghost);
- 
    font-weight: var(--font-weight-semibold);
- 
    gap: 6px;
- 
  }
-
- 
  .active {
- 
    color: var(--color-foreground-emphasized);
- 
    background-color: var(--color-background-dip);

  }

</style>



<div class="container">
- 
  <button
- 
    class:active={$theme === "dark"}
+ 
  <Button
+ 
    flatRight
+ 
    active={$theme === "dark"}
+ 
    variant="ghost"

    onclick={() => {

      storeTheme("dark");

    }}>

    <Icon name="moon" />

    Dark
- 
  </button>
+ 
  </Button>
- 
  <button
- 
    class:active={$theme === "light"}
+ 
  <Button
+ 
    flatLeft
+ 
    variant="ghost"
+ 
    active={$theme === "light"}

    onclick={() => {

      storeTheme("light");

    }}>

    <Icon name="sun" />

    Light
- 
  </button>
+ 
  </Button>

</div>
modified 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} />