From f2edee4fec39bf6e938f43c9cce17a5ce8535b35 Mon Sep 17 00:00:00 2001
From: eth3lbert <eth3lbert+dev@gmail.com>
Date: Sun, 15 Jun 2025 17:29:43 +0800
Subject: [PATCH 1/8] VersionList::Row: Replace yank button with a dropdown
 menu

---
 app/components/version-list/row.hbs        | 17 ++++++++--
 app/components/version-list/row.module.css | 36 +++++++++++++++++++---
 app/components/yank-button.hbs             |  2 --
 e2e/acceptance/sudo.spec.ts                |  6 ++++
 e2e/acceptance/versions.spec.ts            |  2 ++
 public/assets/ellipsis-circle.svg          |  3 ++
 tests/acceptance/sudo-test.js              |  6 ++++
 tests/acceptance/versions-test.js          |  2 ++
 8 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 public/assets/ellipsis-circle.svg

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index e6630036423..f74ede82525 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -117,7 +117,18 @@
     {{/if}}
   </div>
 
-  <PrivilegedAction @userAuthorised={{this.isOwner}}>
-    <YankButton @version={{@version}} local-class="yank-button" />
-  </PrivilegedAction>
+  <Dropdown local-class="dropdown" data-test-actions-menu as |dd|>
+    <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-actions-toggle>
+      {{svg-jar "ellipsis-circle" local-class="icon"}}
+      <span class="sr-only">Actions</span>
+    </dd.Trigger>
+
+    <dd.Menu local-class="menu" as |menu|>
+      <menu.Item>
+        <PrivilegedAction @userAuthorised={{this.isOwner}}>
+          <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
+        </PrivilegedAction>
+      </menu.Item>
+    </dd.Menu>
+  </Dropdown>
 </div>
\ No newline at end of file
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index c4eed5f5b48..10515a52545 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -235,11 +235,37 @@
     margin-top: var(--space-2xs);
 }
 
-.yank-button {
-    position: relative;
-    margin-left: var(--space-xs);
+.dropdown {
+    line-height: 1rem;
+}
 
-    @media only screen and (max-width: 550px) {
-        display: none;
+.icon {
+    width: 1.4em;
+    height: auto;
+}
+
+.trigger {
+    background: none;
+    border: none;
+    padding: 0;
+}
+
+.menu {
+    right: 0;
+    min-width: max-content;
+}
+
+.menu-button {
+    align-items: center;
+    gap: var(--space-2xs);
+    cursor: pointer;
+    text-transform: capitalize;
+
+    /* This duplicates the styles in .button[disabled] as there's no
+     * obvious way to compose them, given the target selectors. */
+    &[disabled] {
+        background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
+        color: var(--disabled-text-color) !important;
+        cursor: not-allowed;
     }
 }
diff --git a/app/components/yank-button.hbs b/app/components/yank-button.hbs
index a6020c07665..3bdef5f4767 100644
--- a/app/components/yank-button.hbs
+++ b/app/components/yank-button.hbs
@@ -1,7 +1,6 @@
 {{#if @version.yanked}}
   <button
     type="button"
-    class="button button--small"
     ...attributes
     data-test-version-unyank-button={{@version.num}}
     disabled={{@version.unyankTask.isRunning}}
@@ -16,7 +15,6 @@
 {{else}}
   <button
     type="button"
-    class="button button--small"
     ...attributes
     data-test-version-yank-button={{@version.num}}
     disabled={{@version.yankTask.isRunning}}
diff --git a/e2e/acceptance/sudo.spec.ts b/e2e/acceptance/sudo.spec.ts
index 3970bbd60da..187458a161b 100644
--- a/e2e/acceptance/sudo.spec.ts
+++ b/e2e/acceptance/sudo.spec.ts
@@ -52,6 +52,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-disable-admin-actions]')).toHaveCount(0);
     await expect(page.locator('[data-test-enable-admin-actions]')).toBeVisible();
 
+    await page.locator('[data-test-actions-toggle]').click();
+
     // Test that the fieldset is present and disabled.
     await expect(page.locator('[data-test-placeholder-fieldset]')).toBeVisible();
     // NOTE: `toBeDisabled()` is not working as expected because the element is not a form control element.
@@ -93,6 +95,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     });
     expect(seen).toBe(1);
 
+    await page.locator('[data-test-actions-toggle]').click();
+
     // Test that the fieldset is not present.
     await expect(page.locator('[data-test-placeholder-fieldset]')).toHaveCount(0);
     await expect(page.locator('[data-test-version-yank-button="0.1.0"]')).toBeVisible();
@@ -106,6 +110,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     await page.locator('[data-test-user-menu]').getByRole('button').click();
     await page.getByRole('button', { name: 'Enable admin actions' }).click();
 
+    await page.locator('[data-test-actions-toggle]').click();
+
     const yankButton = page.locator('[data-test-version-yank-button="0.1.0"]');
     const unyankButton = page.locator('[data-test-version-unyank-button="0.1.0"]');
 
diff --git a/e2e/acceptance/versions.spec.ts b/e2e/acceptance/versions.spec.ts
index cbc61ebb821..c61d297a6b0 100644
--- a/e2e/acceptance/versions.spec.ts
+++ b/e2e/acceptance/versions.spec.ts
@@ -52,6 +52,8 @@ test.describe('Acceptance | crate versions page', { tag: '@acceptance' }, () =>
     await expect(v020).not.toHaveClass(/.*latest/);
     await expect(v020).not.toHaveClass(/.yanked/);
 
+    await v021.locator('[data-test-actions-toggle]').click();
+
     // yanking
     await page.locator('[data-test-version-yank-button="0.2.1"]').click();
     await expect(v021).not.toHaveClass(/.*latest/);
diff --git a/public/assets/ellipsis-circle.svg b/public/assets/ellipsis-circle.svg
new file mode 100644
index 00000000000..9c84f88e638
--- /dev/null
+++ b/public/assets/ellipsis-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
diff --git a/tests/acceptance/sudo-test.js b/tests/acceptance/sudo-test.js
index 1da8d75fc67..f6988471d74 100644
--- a/tests/acceptance/sudo-test.js
+++ b/tests/acceptance/sudo-test.js
@@ -57,6 +57,8 @@ module('Acceptance | sudo', function (hooks) {
     assert.dom('[data-test-disable-admin-actions]').doesNotExist();
     assert.dom('[data-test-enable-admin-actions]').exists();
 
+    await click('[data-test-actions-toggle]');
+
     // Test that the fieldset is present and disabled.
     assert.dom('[data-test-placeholder-fieldset]').exists().isDisabled();
 
@@ -90,6 +92,8 @@ module('Acceptance | sudo', function (hooks) {
     }
     assert.strictEqual(seen, 1);
 
+    await click('[data-test-actions-toggle]');
+
     // Test that the fieldset is not present.
     assert.dom('[data-test-placeholder-fieldset]').doesNotExist();
     assert.dom('[data-test-version-yank-button="0.1.0"]').exists();
@@ -101,6 +105,8 @@ module('Acceptance | sudo', function (hooks) {
     await visit('/crates/foo/versions');
     await click('[data-test-enable-admin-actions]');
 
+    await click('[data-test-actions-toggle]');
+
     await click('[data-test-version-yank-button="0.1.0"]');
 
     await waitFor('[data-test-version-unyank-button="0.1.0"]');
diff --git a/tests/acceptance/versions-test.js b/tests/acceptance/versions-test.js
index 957df382aad..cff0df2e9b2 100644
--- a/tests/acceptance/versions-test.js
+++ b/tests/acceptance/versions-test.js
@@ -57,6 +57,8 @@ module('Acceptance | crate versions page', function (hooks) {
       .hasNoClass(/.*latest/)
       .hasNoClass(/.yanked/);
 
+    await click('[data-test-actions-toggle]');
+
     // yanking
     await click('[data-test-version-yank-button="0.2.1"]');
     assert

From afcf659d450de11b0f2be5ab7509f4314cfd9e97 Mon Sep 17 00:00:00 2001
From: eth3lbert <eth3lbert+dev@gmail.com>
Date: Sun, 15 Jun 2025 21:40:34 +0800
Subject: [PATCH 2/8] VersionList::Row: Only show the actions menu to the
 privileged user

---
 app/components/version-list/row.hbs | 28 +++++++++++++++-------------
 e2e/acceptance/sudo.spec.ts         | 13 ++++++-------
 tests/acceptance/sudo-test.js       |  5 +++--
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index f74ede82525..1043698eaf8 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -117,18 +117,20 @@
     {{/if}}
   </div>
 
-  <Dropdown local-class="dropdown" data-test-actions-menu as |dd|>
-    <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-actions-toggle>
-      {{svg-jar "ellipsis-circle" local-class="icon"}}
-      <span class="sr-only">Actions</span>
-    </dd.Trigger>
+  <PrivilegedAction @userAuthorised={{this.isOwner}}>
+    <Dropdown local-class="dropdown" data-test-actions-menu as |dd|>
+      <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-actions-toggle>
+        {{svg-jar "ellipsis-circle" local-class="icon"}}
+        <span class="sr-only">Actions</span>
+      </dd.Trigger>
 
-    <dd.Menu local-class="menu" as |menu|>
-      <menu.Item>
-        <PrivilegedAction @userAuthorised={{this.isOwner}}>
-          <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
-        </PrivilegedAction>
-      </menu.Item>
-    </dd.Menu>
-  </Dropdown>
+      <dd.Menu local-class="menu" as |menu|>
+        <menu.Item>
+          <PrivilegedAction @userAuthorised={{this.isOwner}}>
+            <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
+          </PrivilegedAction>
+        </menu.Item>
+      </dd.Menu>
+    </Dropdown>
+  </PrivilegedAction>
 </div>
\ No newline at end of file
diff --git a/e2e/acceptance/sudo.spec.ts b/e2e/acceptance/sudo.spec.ts
index 187458a161b..6503488bd6c 100644
--- a/e2e/acceptance/sudo.spec.ts
+++ b/e2e/acceptance/sudo.spec.ts
@@ -36,6 +36,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-disable-admin-actions]')).toHaveCount(0);
     await expect(page.locator('[data-test-enable-admin-actions]')).toHaveCount(0);
 
+    // Assert that there's no dropdown menu toggle, disabled, enabled, or in any state.
+    await expect(page.locator('[data-test-actions-toggle]')).toHaveCount(0);
     // Assert that there's no yank button, disabled, enabled, or in any state.
     await expect(page.locator('[data-test-version-yank-button="0.1.0"]')).toHaveCount(0);
   });
@@ -52,17 +54,14 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-disable-admin-actions]')).toHaveCount(0);
     await expect(page.locator('[data-test-enable-admin-actions]')).toBeVisible();
 
-    await page.locator('[data-test-actions-toggle]').click();
-
     // Test that the fieldset is present and disabled.
-    await expect(page.locator('[data-test-placeholder-fieldset]')).toBeVisible();
+    await expect(page.locator('[data-test-placeholder-fieldset]').first()).toBeVisible();
     // NOTE: `toBeDisabled()` is not working as expected because the element is not a form control element.
     // Ref: https://github.com/microsoft/playwright/issues/13583#issuecomment-1101704985
-    await expect(page.locator('[data-test-placeholder-fieldset]')).toHaveAttribute('disabled', 'disabled');
+    await expect(page.locator('[data-test-placeholder-fieldset]').first()).toHaveAttribute('disabled', 'disabled');
 
-    // From the perspective of the actual button, it isn't disabled, even though
-    // the fieldset effectively makes it unclickable.
-    await expect(page.locator('[data-test-version-yank-button="0.1.0"]')).toBeVisible();
+    await expect(page.locator('[data-test-actions-toggle]')).toBeDisabled();
+    await expect(page.locator('[data-test-version-yank-button="0.1.0"]')).toBeHidden();
   });
 
   test('admin user can enter sudo mode', async ({ page, msw }) => {
diff --git a/tests/acceptance/sudo-test.js b/tests/acceptance/sudo-test.js
index f6988471d74..77342c5851a 100644
--- a/tests/acceptance/sudo-test.js
+++ b/tests/acceptance/sudo-test.js
@@ -43,6 +43,8 @@ module('Acceptance | sudo', function (hooks) {
     assert.dom('[data-test-disable-admin-actions]').doesNotExist();
     assert.dom('[data-test-enable-admin-actions]').doesNotExist();
 
+    // Assert that there's no dropdown menu toggle, disabled, enabled, or in any state.
+    assert.dom('[data-test-actions-toggle]').doesNotExist();
     // Assert that there's no yank button, disabled, enabled, or in any state.
     assert.dom('[data-test-version-yank-button="0.1.0"]').doesNotExist();
   });
@@ -57,13 +59,12 @@ module('Acceptance | sudo', function (hooks) {
     assert.dom('[data-test-disable-admin-actions]').doesNotExist();
     assert.dom('[data-test-enable-admin-actions]').exists();
 
-    await click('[data-test-actions-toggle]');
-
     // Test that the fieldset is present and disabled.
     assert.dom('[data-test-placeholder-fieldset]').exists().isDisabled();
 
     // From the perspective of the actual button, it isn't disabled, even though
     // the fieldset effectively makes it unclickable.
+    assert.dom('[data-test-actions-toggle]').exists();
     assert.dom('[data-test-version-yank-button="0.1.0"]').exists();
   });
 

From 45a4066ad6d37368ca039a5869d100a9d1a3c5a3 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Wed, 18 Jun 2025 09:41:45 +0200
Subject: [PATCH 3/8] VersionList::Row: Increase dropdown icon size

---
 app/components/version-list/row.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 10515a52545..47e6458ba50 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -240,7 +240,7 @@
 }
 
 .icon {
-    width: 1.4em;
+    width: 2em;
     height: auto;
 }
 

From 514bb1423e6d21f32a771deca6d467898090578d Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Wed, 18 Jun 2025 09:47:28 +0200
Subject: [PATCH 4/8] VersionList::Row: Deemphasize dropdown trigger icon and
 add hover effect

---
 app/components/version-list/row.module.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 47e6458ba50..b89b0b91e8c 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -248,6 +248,14 @@
     background: none;
     border: none;
     padding: 0;
+    border-radius: 99999px;
+    color: var(--grey600);
+
+    :hover {
+        border-radius: 99999px;
+        color: var(--grey900);
+        background-color: white;
+    }
 }
 
 .menu {

From b789ca13f05196872795b94dfd41ce62699f914f Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Wed, 18 Jun 2025 09:48:19 +0200
Subject: [PATCH 5/8] VersionList::Row: Remove nested `PrivilegedAction`

---
 app/components/version-list/row.hbs | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 1043698eaf8..0de7868d338 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -126,9 +126,7 @@
 
       <dd.Menu local-class="menu" as |menu|>
         <menu.Item>
-          <PrivilegedAction @userAuthorised={{this.isOwner}}>
-            <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
-          </PrivilegedAction>
+          <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
         </menu.Item>
       </dd.Menu>
     </Dropdown>

From 76bbb55be00c3a035887eff095e11e400837c2a2 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Wed, 18 Jun 2025 09:49:15 +0200
Subject: [PATCH 6/8] PrivilegedAction: Update root elements to accept
 additional attributes

---
 app/components/privileged-action.hbs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/privileged-action.hbs b/app/components/privileged-action.hbs
index 873b7a104ed..8a419e43141 100644
--- a/app/components/privileged-action.hbs
+++ b/app/components/privileged-action.hbs
@@ -1,14 +1,14 @@
 {{#if this.isPrivileged}}
-  <div>
+  <div ...attributes>
     {{yield}}
   </div>
 {{else if this.canBePrivileged}}
   {{#if (has-block 'placeholder')}}
-    <div>
+    <div ...attributes>
       {{yield to='placeholder'}}
     </div>
   {{else}}
-    <div local-class='placeholder'>
+    <div local-class='placeholder' ...attributes>
       <fieldset data-test-placeholder-fieldset disabled="disabled">
         {{yield}}
       </fieldset>
@@ -18,7 +18,7 @@
     </div>
   {{/if}}
 {{else}}
-  <div>
+  <div ...attributes>
     {{#if (has-block 'unprivileged')}}
       {{yield to='unprivileged'}}
     {{/if}}

From 4ba7e4742d77c5457e7009ffbad124c95d725f95 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Wed, 18 Jun 2025 09:53:23 +0200
Subject: [PATCH 7/8] VersionList::Row: Fix font size

---
 app/components/version-list/row.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index b89b0b91e8c..93d0c797ffb 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -236,6 +236,7 @@
 }
 
 .dropdown {
+    font-size: initial;
     line-height: 1rem;
 }
 

From 249b7cb1db270c53902d61cbdaed6b227fc1affb Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Wed, 18 Jun 2025 09:56:31 +0200
Subject: [PATCH 8/8] VersionList::Row: Center the dropdown trigger vertically

---
 app/components/version-list/row.hbs        | 2 +-
 app/components/version-list/row.module.css | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/version-list/row.hbs b/app/components/version-list/row.hbs
index 0de7868d338..7446250208d 100644
--- a/app/components/version-list/row.hbs
+++ b/app/components/version-list/row.hbs
@@ -117,7 +117,7 @@
     {{/if}}
   </div>
 
-  <PrivilegedAction @userAuthorised={{this.isOwner}}>
+  <PrivilegedAction @userAuthorised={{this.isOwner}} local-class="actions">
     <Dropdown local-class="dropdown" data-test-actions-menu as |dd|>
       <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-actions-toggle>
         {{svg-jar "ellipsis-circle" local-class="icon"}}
diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index 93d0c797ffb..feccb01d3a6 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -235,7 +235,12 @@
     margin-top: var(--space-2xs);
 }
 
+.actions {
+    display: flex;
+}
+
 .dropdown {
+    display: flex;
     font-size: initial;
     line-height: 1rem;
 }
@@ -260,6 +265,7 @@
 }
 
 .menu {
+    top: 100%;
     right: 0;
     min-width: max-content;
 }