more styling..

public/global.css

@@ -81,12 +81,6 @@ input, button, textarea, .selecttier {
   grid-column: 2/3;
 }
 
-
-input:disabled {
-  color: black;
-  background-color: white;
-}
-
 textarea {
   height: 10rem;
 }
@@ -96,10 +90,13 @@ textarea {
   border: 0px;
   padding: 0px;
   margin: 0px;
-  cursor: pointer;
   font-weight: bold;
 }
 
+.hasinput:focus {
+  outline: none;
+}
+
 .tierline {
   display: flex;
 }

src/App.svelte

@@ -44,7 +44,7 @@
      let xastiers = Object.keys(repo.frontmatter).filter(t => t.startsWith("has_"))
      if (xastiers.length > 0) {
        hastiers = xastiers[0].substr(4)
-       tiers = METASP[xastiers[0].split("has_")[1]].tiers.filter(t => repo.frontmatter[xastiers].includes(t.file)).reverse()
+       tiers = METASP[xastiers[0].split("has_")[1]].tiers.filter(t => repo.frontmatter[xastiers].includes(t.file))
        if (xastiers.length == 1) {
          candidates = diffArrr(METASP[xastiers[0].split("has_")[1]].tiers, tiers)
        }

src/SpHasCandidates.svelte

@@ -23,6 +23,6 @@
 <select class="selecttier" bind:value>
   <option id="addnew" value="1" disabled selected>Add new...</option>
   {#each candidates as tier (tier.file)}
-    <option title="{tier.title}" value={tier.file}>{tier.file} ({tier.title})</option>
+    <option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option>
   {/each}
 </select>

src/SpHasTiers.svelte

@@ -25,7 +25,7 @@
   {#each tiers as tier, i (tier.file)}
     <div class="tierline">
       <div class="filetitle">
-        <input type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}" disabled><span class="tiertitle">({tier.title})</span>
+        <input readonly type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span>
       </div>
       <div class="buttons">
         <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == tiers.length ? true:false}>⇓</button>