From 67da51f9640a534da5b8af9a08ffbc9f1fde3676 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, 16 May 2024 15:45:48 +0200
Subject: [PATCH] Tweak issue/patch assignee/label/embed layout

---
 src/components/Badge.svelte                 |  2 -
 src/views/projects/Cob/AssigneeInput.svelte | 68 ++++++++++++---------
 src/views/projects/Cob/Embeds.svelte        | 12 +++-
 src/views/projects/Cob/LabelInput.svelte    | 67 ++++++++++++--------
 src/views/projects/Cob/Reviews.svelte       |  3 +
 src/views/projects/Issue.svelte             |  4 +-
 6 files changed, 93 insertions(+), 63 deletions(-)

diff --git a/src/components/Badge.svelte b/src/components/Badge.svelte
index 83f078da6..d6a09bdcd 100644
--- a/src/components/Badge.svelte
+++ b/src/components/Badge.svelte
@@ -29,8 +29,6 @@
     white-space: nowrap;
     align-items: center;
     gap: 0.25rem;
-    /* This is aprox. a DID assignee */
-    max-width: 16rem;
   }
   .background {
     color: currentColor;
diff --git a/src/views/projects/Cob/AssigneeInput.svelte b/src/views/projects/Cob/AssigneeInput.svelte
index 367b27b12..bf72a789d 100644
--- a/src/views/projects/Cob/AssigneeInput.svelte
+++ b/src/views/projects/Cob/AssigneeInput.svelte
@@ -97,7 +97,12 @@
     position: relative;
     margin-top: 0.5rem;
   }
-
+  .input {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
   @media (max-width: 1349.98px) {
     .wrapper {
       display: flex;
@@ -111,11 +116,17 @@
       display: flex;
       align-items: center;
     }
+    .body {
+      align-items: flex-start;
+    }
     .no-assignees {
       height: 2rem;
       display: flex;
       align-items: center;
     }
+    .input {
+      width: 18rem;
+    }
   }
 </style>
 
@@ -127,12 +138,12 @@
         <Badge
           variant="neutral"
           size="small"
-          style="cursor: pointer;"
+          style="cursor: pointer; max-width: 14rem;"
           on:click={() =>
             (removeToggles[assignee.id] = !removeToggles[assignee.id])}>
           <div class="assignee">
             <Avatar inline nodeId={assignee.id} />
-            <span>{formatNodeId(assignee.id)}</span>
+            <span class="txt-overflow">{formatNodeId(assignee.id)}</span>
             {#if removeToggles[assignee.id]}
               <IconButton title="remove assignee">
                 <IconSmall
@@ -144,32 +155,33 @@
         </Badge>
       {/each}
       {#if showInput}
-        <div
-          style="width:100%; display: flex; align-items: center; gap: 0.5rem;">
-          <TextInput
-            autofocus
-            disabled={submitInProgress}
-            bind:value={inputValue}
-            placeholder="Add assignee"
-            on:submit={addAssignee} />
-          <IconButton
-            title="discard assignee"
-            on:click={() => {
-              inputValue = "";
-              validationMessage = undefined;
-              showInput = false;
-            }}>
-            <IconSmall name="cross" />
-          </IconButton>
-          <IconButton title="save assignee" on:click={addAssignee}>
-            <IconSmall name="checkmark" />
-          </IconButton>
-        </div>
-        {#if validationMessage}
-          <div class="validation-message">
-            <IconSmall name="exclamation-circle" />{validationMessage}
+        <div>
+          <div class="input">
+            <TextInput
+              autofocus
+              disabled={submitInProgress}
+              bind:value={inputValue}
+              placeholder="Add assignee"
+              on:submit={addAssignee} />
+            <IconButton
+              title="discard assignee"
+              on:click={() => {
+                inputValue = "";
+                validationMessage = undefined;
+                showInput = false;
+              }}>
+              <IconSmall name="cross" />
+            </IconButton>
+            <IconButton title="save assignee" on:click={addAssignee}>
+              <IconSmall name="checkmark" />
+            </IconButton>
           </div>
-        {/if}
+          {#if validationMessage}
+            <div class="validation-message">
+              <IconSmall name="exclamation-circle" />{validationMessage}
+            </div>
+          {/if}
+        </div>
       {:else}
         <div class="global-hide-on-mobile-down">
           <Badge
diff --git a/src/views/projects/Cob/Embeds.svelte b/src/views/projects/Cob/Embeds.svelte
index 066ad38be..e5a007158 100644
--- a/src/views/projects/Cob/Embeds.svelte
+++ b/src/views/projects/Cob/Embeds.svelte
@@ -25,10 +25,16 @@
       display: flex;
       flex-direction: row;
       gap: 1rem;
-      align-items: flex-start;
+      align-items: flex;
     }
     .header {
       margin-bottom: 0;
+      height: 2rem;
+      display: flex;
+      align-items: center;
+    }
+    .no-attachments {
+      height: 2rem;
       display: flex;
       align-items: center;
     }
@@ -39,12 +45,12 @@
   <div class="header">Attachments</div>
   <div class="body">
     {#each embeds as embed}
-      <Badge variant="neutral">
+      <Badge variant="neutral" size="small" style="max-width: 14rem;">
         <span class="txt-overflow">{embed.name}</span>
         <Clipboard text={`![${embed.name}](${embed.content.substring(4)})`} />
       </Badge>
     {:else}
-      <div class="txt-missing">No attachments</div>
+      <div class="txt-missing no-attachments">No attachments</div>
     {/each}
   </div>
 </div>
diff --git a/src/views/projects/Cob/LabelInput.svelte b/src/views/projects/Cob/LabelInput.svelte
index 1c141f87b..ae611736b 100644
--- a/src/views/projects/Cob/LabelInput.svelte
+++ b/src/views/projects/Cob/LabelInput.svelte
@@ -77,6 +77,12 @@
     position: relative;
     margin-top: 0.5rem;
   }
+  .input {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
   @media (max-width: 1349.98px) {
     .wrapper {
       display: flex;
@@ -90,11 +96,17 @@
       display: flex;
       align-items: center;
     }
+    .body {
+      align-items: flex-start;
+    }
     .no-labels {
       height: 2rem;
       display: flex;
       align-items: center;
     }
+    .input {
+      width: 18rem;
+    }
   }
 </style>
 
@@ -106,9 +118,9 @@
         <Badge
           variant="neutral"
           size="small"
-          style="cursor: pointer;"
+          style="cursor: pointer; max-width: 14rem;"
           on:click={() => (removeToggles[label] = !removeToggles[label])}>
-          <div class="label">{label}</div>
+          <div class="label txt-overflow">{label}</div>
           {#if removeToggles[label]}
             <IconButton title="remove label">
               <IconSmall name="cross" on:click={() => removeLabel(label)} />
@@ -117,32 +129,33 @@
         </Badge>
       {/each}
       {#if showInput}
-        <div
-          style="width:100%; display: flex; align-items: center; gap: 0.5rem;">
-          <TextInput
-            autofocus
-            {valid}
-            disabled={submitInProgress}
-            placeholder="Add label"
-            bind:value={inputValue}
-            on:submit={addLabel} />
-          <IconButton
-            title="discard label"
-            on:click={() => {
-              inputValue = "";
-              showInput = false;
-            }}>
-            <IconSmall name="cross" />
-          </IconButton>
-          <IconButton title="save label" on:click={addLabel}>
-            <IconSmall name="checkmark" />
-          </IconButton>
-        </div>
-        {#if !valid && validationMessage}
-          <div class="validation-message">
-            <IconSmall name="exclamation-circle" />{validationMessage}
+        <div>
+          <div class="input">
+            <TextInput
+              autofocus
+              {valid}
+              disabled={submitInProgress}
+              placeholder="Add label"
+              bind:value={inputValue}
+              on:submit={addLabel} />
+            <IconButton
+              title="discard label"
+              on:click={() => {
+                inputValue = "";
+                showInput = false;
+              }}>
+              <IconSmall name="cross" />
+            </IconButton>
+            <IconButton title="save label" on:click={addLabel}>
+              <IconSmall name="checkmark" />
+            </IconButton>
           </div>
-        {/if}
+          {#if !valid && validationMessage}
+            <div class="validation-message">
+              <IconSmall name="exclamation-circle" />{validationMessage}
+            </div>
+          {/if}
+        </div>
       {:else}
         <div class="global-hide-on-mobile-down">
           <Badge
diff --git a/src/views/projects/Cob/Reviews.svelte b/src/views/projects/Cob/Reviews.svelte
index 0a8e89ed4..9f02a7478 100644
--- a/src/views/projects/Cob/Reviews.svelte
+++ b/src/views/projects/Cob/Reviews.svelte
@@ -39,6 +39,9 @@
     }
     .header {
       margin-bottom: 0;
+      height: 2rem;
+      display: flex;
+      align-items: center;
     }
     .no-reviews {
       display: flex;
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 71babe39e..7183609c9 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -589,9 +589,7 @@
               labels={issue.labels}
               submitInProgress={labelState === "submit"}
               on:save={({ detail: newLabels }) => void saveLabels(newLabels)} />
-            <div class="global-hide-on-mobile-down">
-              <Embeds embeds={uniqueEmbeds} />
-            </div>
+            <Embeds embeds={uniqueEmbeds} />
           </div>
         </div>
         <svelte:fragment slot="description">