Move issue metadata buttons into action row

In the new issue modal, "Add labels" and "Add assignees" sat on their
own row between the description and the action buttons. They now sit at
the left of the action row, opposite Attach, Preview and Save.

src/components/ExtendedTextarea.svelte

@@ -62,7 +62,8 @@
     hideDiscard?: boolean;
     // If true, the whole actions row stays hidden until the body has content.
     collapseActions?: boolean;
-    belowTextarea?: Snippet;
+    // Rendered at the start of the actions row, opposite the buttons.
+    leadingActions?: Snippet;
   }
 
   /* eslint-disable prefer-const */
@@ -93,7 +94,7 @@
     disableAttachments: attachDisabled = false,
     hideDiscard = false,
     collapseActions = false,
-    belowTextarea,
+    leadingActions,
   }: Props = $props();
   /* eslint-enable prefer-const */
 
@@ -309,6 +310,7 @@
   }
   .buttons {
     display: flex;
+    align-self: flex-start;
     margin-left: auto;
     gap: 0.5rem;
   }
@@ -481,9 +483,9 @@
       {/if}
     {/if}
   </div>
-  {@render belowTextarea?.()}
   {#if !collapseActions || body.trim() !== ""}
     <div class="actions">
+      {@render leadingActions?.()}
       {#if !hideDiscard}
         <Button
           variant="outline"

src/modals/CreateIssue.svelte

@@ -113,13 +113,13 @@
     color: var(--color-text-primary);
     padding: 0.5rem 0;
   }
-  .metadata-section {
-    padding: 0.5rem;
-    font: var(--txt-body-m-regular);
+  .metadata {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    height: 100%;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    min-width: 0;
+    font: var(--txt-body-m-regular);
   }
 </style>
 
@@ -191,33 +191,26 @@
       bind:body
       borderVariant="ghost"
       placeholder="Description">
-      {#snippet belowTextarea()}
+      {#snippet leadingActions()}
         {#await configPromise then config}
           {#if !!roles.isDelegate( config.publicKey, repo.delegates.map(d => d.did) )}
-            <div
-              style:display="flex"
-              style:align-items="center"
-              style:width="100%">
-              <div class="metadata-section" style:flex="1">
-                <LabelInput
-                  allowedToEdit={true}
-                  {preview}
-                  {labels}
-                  submitInProgress={false}
-                  save={newLabels => {
-                    labels = newLabels;
-                  }} />
-              </div>
-              <div class="metadata-section" style:flex="1">
-                <AssigneeInput
-                  allowedToEdit={true}
-                  {preview}
-                  bind:assignees
-                  submitInProgress={false}
-                  save={newAssignees => {
-                    assignees = newAssignees;
-                  }} />
-              </div>
+            <div class="metadata">
+              <LabelInput
+                allowedToEdit={true}
+                {preview}
+                {labels}
+                submitInProgress={false}
+                save={newLabels => {
+                  labels = newLabels;
+                }} />
+              <AssigneeInput
+                allowedToEdit={true}
+                {preview}
+                bind:assignees
+                submitInProgress={false}
+                save={newAssignees => {
+                  assignees = newAssignees;
+                }} />
             </div>
           {/if}
         {/await}