color select alignment

static/index.html

@@ -210,6 +210,10 @@
                 <span v-else>#{{ item.number }} · {{ item.line.tf }} · {{ item.line.side === 'support' ? '↑' : '↓' }}</span>
 
                 <div class="drawing-controls" @click.stop v-if="item.line">
+                  <select :value="item.line.line_width || 2" aria-label="Drawing width"
+                          @change="updateLineStyle(item.line, {line_width: Number($event.target.value)})">
+                    <option v-for="width in 9" :value="width">{{ width }}</option>
+                  </select>
                   <details class="color-picker">
                     <summary :aria-label="`Choose drawing color; current color ${drawingColorName(item.line.color || '#65b7cf')}`"
                              :title="drawingColorName(item.line.color || '#65b7cf')"
@@ -230,12 +234,12 @@
                       </button>
                     </div>
                   </details>
-                  <select :value="item.line.line_width || 2" aria-label="Drawing width"
-                          @change="updateLineStyle(item.line, {line_width: Number($event.target.value)})">
-                    <option v-for="width in 9" :value="width">{{ width }}</option>
-                  </select>
                 </div>
                 <div class="drawing-controls" @click.stop v-else>
+                  <button v-if="item.kind === 'comment'" class="collapse-toggle" @click.stop="toggleComment(item.comment)"
+                          :title="item.comment.collapsed ? 'Expand comment' : 'Collapse comment'">
+                    <i :class="item.comment.collapsed ? 'fa-solid fa-expand' : 'fa-solid fa-compress'"></i>
+                  </button>
                   <details class="color-picker">
                     <summary :aria-label="`Choose comment color; current color ${drawingColorName(item.comment.color || '#c8992f')}`"
                              :title="drawingColorName(item.comment.color || '#c8992f')"
@@ -256,10 +260,6 @@
                       </button>
                     </div>
                   </details>
-                  <button v-if="item.kind === 'comment'" class="collapse-toggle" @click.stop="toggleComment(item.comment)"
-                          :title="item.comment.collapsed ? 'Expand comment' : 'Collapse comment'">
-                    <i :class="item.comment.collapsed ? 'fa-solid fa-expand' : 'fa-solid fa-compress'"></i>
-                  </button>
                 </div>
               </div>
             </div>

tests/e2e/comments.test.mjs

@@ -83,6 +83,10 @@ test('clicking a comment collapses it', { timeout: 180000 }, async () => {
     assert.equal((await commentNode(page)).collapsed, false);
     await page.fill('input[aria-label="Filter drawings by text"]', TEXT);
     const row = page.locator('.trendline-row');
+    const controls = await row.locator('.drawing-controls>*').evaluateAll(nodes =>
+      nodes.map(node => node.classList.contains('color-picker') ? 'color' : node.className));
+    assert.deepEqual(controls, ['collapse-toggle', 'color'],
+      'the comment color picker is not the rightmost control');
     await row.locator('.drawing-secondary>span').click();
     assert.equal(await page.locator(`.chart-comment[title="${TEXT}"]`).evaluate(node => node.classList.contains('focus')), true,
       'selecting the comment row did not point out the comment on the chart');

tests/e2e/drawings.test.mjs

@@ -47,6 +47,9 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
       const row = page.locator('.trendline-row');
       assert.deepEqual(await row.locator('select[aria-label="Drawing width"] option').allTextContents(),
         ['1', '2', '3', '4', '5', '6', '7', '8', '9']);
+      const controls = await row.locator('.drawing-controls>*').evaluateAll(nodes =>
+        nodes.map(node => node.classList.contains('color-picker') ? 'color' : node.tagName.toLowerCase()));
+      assert.deepEqual(controls, ['select', 'color'], 'the color picker is not the rightmost control');
       const rowBox = await row.boundingBox();
       assert.ok(rowBox.height <= 48, `drawing row is still ${rowBox.height}px tall`);
       assert.equal(await row.locator('.drawing-state .fa-bell').count(), 1,