fix(app): disable submit hover on touch

packages/app/component-tests/composer-touch.spec.ts

@@ -0,0 +1,14 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+story.use({ hasTouch: true, isMobile: true, viewport: { width: 800, height: 844 } })
+
+story("submits on the first touch without retaining a hover style", async ({ mount }) => {
+  const component = await mount("opencode-composer-flow--failed-submission-restoration")
+  const submit = component.getByRole("button", { name: "Send", exact: true })
+  const background = await submit.evaluate((element) => getComputedStyle(element).backgroundImage)
+
+  await submit.tap()
+
+  await expect(component.getByRole("status")).toHaveText("Submission failed; draft restored")
+  await expect(submit).toHaveCSS("background-image", background)
+})

packages/ui/src/actions/submit.css

@@ -33,18 +33,20 @@
   color: var(--v2-icon-icon-inverse);
 }
 
-:is(
-    [data-component="button-v2"][data-variant="submit"],
-    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-  ):is(:hover, [data-state="hover"]):not(:disabled) {
-  background-image:
-    linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
-    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
+@media (hover: hover) {
+  :is(
+      [data-component="button-v2"][data-variant="submit"],
+      [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+    ):is(:hover, [data-state="hover"]):not(:disabled) {
+    background-image:
+      linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
+      linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
+      linear-gradient(
+        90deg,
+        var(--v2-background-bg-icon-button-contrast) 0%,
+        var(--v2-background-bg-icon-button-contrast) 100%
+      );
+  }
 }
 
 :is(