fix(ui): add active background color for menu items in tippy tooltips (#11315)

Fix #11309

![image](/attachments/1067134a-e40e-4f21-82bb-fd4324080215)

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11315
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: panc <pan0xc@foxmail.com>
Co-committed-by: panc <pan0xc@foxmail.com>

tests/e2e/overflow-menu.test.e2e.ts

@@ -0,0 +1,44 @@
+// Copyright 2026 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/user/profile.tmpl
+// templates/user/overview/header.tmpl
+// web_src/css/modules/tippy.css
+// web_src/js/modules/tippy.js
+// @watch end
+
+import {expect} from '@playwright/test';
+import {test} from './utils_e2e.ts';
+
+test(`Visual properties`, async ({page, isMobile}) => {
+  test.skip(!isMobile, 'Overflow menu button only appears on mobile');
+
+  const noBg = 'rgba(0, 0, 0, 0)';
+  const activeBg = 'rgb(226, 226, 229)';
+  const menuItemSelector = `.tippy-box .tippy-content .tippy-target > a.item`;
+  const activeItemSelector = `${menuItemSelector}.active`;
+  const inactiveItemSelector = `${menuItemSelector}:not(.active)`;
+
+  await page.goto(`/user2/repo1`);
+  const overflowMenuButton = page.locator(`.overflow-menu-button`);
+
+  await overflowMenuButton.click();
+  const menuItems = page.locator(`${menuItemSelector}`);
+  const itemCount = await menuItems.count();
+  for (let i = 0; i < itemCount; i++) {
+    await menuItems.nth(i).click();
+    await page.waitForLoadState('domcontentloaded');
+
+    await overflowMenuButton.click();
+    const activeItem = page.locator(`${activeItemSelector}`);
+    expect(await activeItem.evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(activeBg);
+
+    const inactiveItems = page.locator(inactiveItemSelector);
+    const inactiveCount = await inactiveItems.count();
+    for (let j = 0; j < itemCount - inactiveCount; j++) {
+      const nonActiveItem = page.locator(`${inactiveItemSelector}`).nth(j);
+      expect(await nonActiveItem.evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(noBg);
+    }
+  }
+});

web_src/css/modules/tippy.css

@@ -97,6 +97,10 @@
   background: var(--color-active);
 }
 
+.tippy-box[data-theme="menu"] .tippy-target > .item.active {
+  background: var(--color-active);
+}
+
 /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
 
 .tippy-box[data-theme="box-with-header"] {