Merge pull request #3473 from ilandikov/feat-arrange-delete-button

feat: arrange the delete button in the includes settings

Author: claremacrae

src/Config/IncludesSettingsUI.scss

@@ -12,8 +12,7 @@
     .tasks-includes-setting {
         // Name input field (left column)
         .tasks-includes-key {
-            width: 200px;
-            flex-shrink: 0;
+            grid-area: key;
 
             // Error state styling
             &.has-error {
@@ -24,7 +23,8 @@
 
         // Value textarea (right column)
         .tasks-includes-value {
-            flex-grow: 1;
+            grid-area: value;
+
             min-width: 300px;
             min-height: 3em;
             font-family: var(--font-monospace);
@@ -36,13 +36,25 @@
             white-space: pre;        // Preserve formatting
         }
 
+        .tasks-includes-delete-button {
+            grid-area: delete;
+        }
+
         // Control alignment adjustment
         .setting-item-control {
+            justify-content: start;
+            display: grid;
+            grid-template-columns: 200px 1fr auto;
+            grid-template-areas: "key value delete";
+
             align-items: unset;
 
             // Force wrapping behavior on narrow screens
             @container (max-width: 600px) {
-                flex-wrap: wrap;
+                grid-template-columns: 5fr 1fr;
+                grid-template-areas:
+                  "key delete"
+                  "value value";
 
                 // Put a border around the elements for each Include, to make structure easier
                 // to see when in single-column mode.

src/Config/IncludesSettingsUI.ts

@@ -127,6 +127,7 @@ export class IncludesSettingsUI {
 
         // Add delete button
         setting.addExtraButton((btn) => {
+            btn.extraSettingsEl.addClass('tasks-includes-delete-button');
             btn.setIcon('cross')
                 .setTooltip('Delete')
                 .onClick(async () => {