Refactor project reactivity

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/base/projects/SourceBrowser/Changeset.svelte

@@ -59,6 +59,9 @@
     flex-direction: row;
     align-items: center;
   }
+  .browse {
+    display: flex;
+  }
 </style>
 
 <div class="changeset-summary">
@@ -77,8 +80,9 @@
         <p class="bold">{path}</p>
         <span class="diff-type created">created</span>
       </div>
-      <Icon class="clickable" name="browse" width={20} inline fill
-        on:click={() => dispatch("browse", path)} />
+      <div class="browse" on:click={() => dispatch("browse", path)}>
+        <Icon name="browse" width={20} inline fill />
+      </div>
     </header>
   {/each}
   {#each diff.deleted as path (path)}
@@ -87,8 +91,9 @@
         <p class="bold">{path}</p>
         <span class="diff-type deleted">deleted</span>
       </div>
-      <Icon class="clickable" name="browse" width={20} inline fill
-        on:click={() => dispatch("browse", path)} />
+      <div class="browse" on:click={() => dispatch("browse", path)}>
+        <Icon name="browse" width={20} inline fill />
+      </div>
     </header>
   {/each}
 </div>

src/base/projects/SourceBrowser/FileDiff.svelte

@@ -108,6 +108,9 @@
   .file-path {
     font-size: 1rem;
   }
+  .browse {
+    display: flex;
+  }
 </style>
 
 <article id={file.path} class="changeset-file">
@@ -116,7 +119,9 @@
     <div class="actions">
       <p class="file-path">{file.path}</p>
     </div>
-    <Icon name="browse" width={20} inline fill on:click={() => dispatch("browse", file.path)} />
+    <div class="browse clickable" on:click|stopPropagation={() => dispatch("browse", file.path)}>
+      <Icon name="browse" width={20} inline fill />
+    </div>
   </header>
   {#if !collapsed}
     <main>