fix: make dashboard payload cards clickable to their edges

frontend/src/components/ui/PayloadButton.jsx

@@ -53,7 +53,7 @@ const PayloadButton = ({
   return (
     <div
       className={cn(
-        "group glass-card pl-4 pr-3 py-2.5 rounded-ps-xl flex flex-col justify-center border transition-all text-left relative min-h-[72px]",
+        "group glass-card rounded-ps-xl flex flex-col justify-center border transition-all text-left relative min-h-[72px]",
         isManageMode ? "border-red-500/20 hover:border-red-500 hover:bg-red-500/10" : "border-white/5 hover:border-ps-blue hover:bg-ps-blue/5",
         isManageMode && isUsb && "opacity-50 grayscale cursor-not-allowed"
       )}
@@ -62,7 +62,7 @@ const PayloadButton = ({
         onClick={handleClick}
         disabled={isLoading || (isManageMode && isUsb)}
         title={isManageMode && !isUsb ? t("app.dashboard.removePayload", "Remove Payload") : undefined}
-        className="w-full text-left relative z-10 rounded-lg focus:outline-none focus:ring-2 focus:ring-ps-blue"
+        className="w-full flex-1 pl-4 pr-3 py-2.5 text-left relative z-10 rounded-ps-xl focus:outline-none focus:ring-2 focus:ring-ps-blue"
       >
       <div className="flex items-center justify-between w-full z-10 my-auto">
         <div className="flex items-center gap-3.5 min-w-0 pr-2">

tests/run_autoload_editor_browser_tests.mjs

@@ -343,6 +343,21 @@ try {
       catch (error) { throw new Error(error.message + ': ' + JSON.stringify({ requests, page: await evaluate(`({text:document.body.textContent,errors:window.__unhandledErrors})`) })) }
       await click('Edit Favorites')
       const clickCard = name => evaluate(`Array.from(document.querySelectorAll('.glass-card > button')).find(b => b.textContent.toLowerCase().includes(${JSON.stringify(name.toLowerCase())})).click()`)
+      // The launch/toggle button must cover the visual card padding on every side.
+      const nextCard = `Array.from(document.querySelectorAll('.glass-card')).find(card => card.querySelector('button')?.textContent.toLowerCase().includes('next'))`
+      let box = await evaluate(`(() => {const r=${nextCard}.getBoundingClientRect();return {x:r.x,y:r.y,width:r.width,height:r.height}})()`)
+      await rpc('Input.dispatchMouseEvent', { type: 'mouseMoved', x: box.x + box.width / 2, y: box.y + box.height / 2 }, sessionId)
+      await wait(300)
+      for (const side of ['left', 'right', 'top', 'bottom']) {
+        box = await evaluate(`(() => {const r=${nextCard}.getBoundingClientRect();return {x:r.x,y:r.y,width:r.width,height:r.height}})()`)
+        const x = box.x + (side === 'left' ? 3 : side === 'right' ? box.width - 3 : box.width / 2)
+        const y = box.y + (side === 'top' ? 3 : side === 'bottom' ? box.height - 3 : box.height / 2)
+        assert.equal(await evaluate(`document.elementFromPoint(${x},${y})?.closest('button') === ${nextCard}.querySelector('button')`), true, `${side} card padding was not clickable`)
+        await rpc('Input.dispatchMouseEvent', { type: 'mousePressed', x, y, button: 'left', clickCount: 1 }, sessionId)
+        await rpc('Input.dispatchMouseEvent', { type: 'mouseReleased', x, y, button: 'left', clickCount: 1 }, sessionId)
+        await eventually(() => pendingSaves.length === 1, `${side} edge click did not toggle the favorite`)
+        releaseSave(); await wait(50)
+      }
       await clickCard('Next'); await eventually(() => pendingSaves.length === 1, 'favorite save did not start')
       assert.equal(pendingSaves[0].update.FAVORITES, 'local/next')
       await clickCard('A'); await clickCard('B'); await wait(300)