[Tag] Remove hover styles on touch devices (#11689)

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1489

### WHAT is this pull request doing?


https://github.com/Shopify/polaris/assets/6844391/21a21c78-03de-43c3-87d4-10bcee566958

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/gentle-moons-repair.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed touch device styling for removable large Tags

polaris-react/src/components/Tag/Tag.module.scss

@@ -213,6 +213,10 @@ $height: 20px;
 .sizeLarge:is(.removable, .linkable) {
   min-height: 24px;
   padding: 0 var(--p-space-200);
+  /* stylelint-disable-next-line -- reveal on touch devices */
+  @media (hover: none) {
+    padding-right: 0;
+  }
 }
 
 /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- override code above */
@@ -229,6 +233,11 @@ $height: 20px;
   height: 20px;
   margin: 0;
   background-color: var(--p-color-bg-fill-tertiary);
+  /* stylelint-disable-next-line -- reveal on touch devices */
+  @media (hover: none) {
+    opacity: 1;
+    position: unset;
+  }
 
   &:hover {
     color: var(--p-color-icon-secondary-hover);
@@ -263,6 +272,10 @@ $height: 20px;
   /* stylelint-disable-next-line selector-max-class, selector-max-specificity  -- match tag hover color */
   .Button {
     background-color: var(--p-color-bg-fill-tertiary-hover);
+    /* stylelint-disable-next-line -- reveal on touch devices */
+    @media (hover: none) {
+      background-color: var(--p-color-bg-fill-tertiary);
+    }
   }
   /* stylelint-disable-next-line selector-max-class, selector-max-specificity  -- match tag hover color */
   &:hover .overlay {