Live blog block desktop sharebutton copy (#12872)

* Use useMatchMedia to check width

dotcom-rendering/src/components/ArticleMeta.web.test.tsx

@@ -5,7 +5,9 @@ import { ArticleMeta, shouldShowContributor } from './ArticleMeta.web';
 import { ConfigProvider } from './ConfigContext';
 
 jest.mock('../lib/bridgetApi', () => jest.fn());
-
+jest.mock('../lib/useMatchMedia', () => ({
+	useMatchMedia: jest.fn(() => true),
+}));
 describe('ArticleMeta', () => {
 	it('It should contain legacy class names to support customised styling in interactives', () => {
 		const format = {

dotcom-rendering/src/components/ShareButton.importable.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { palette, until } from '@guardian/source/foundations';
+import { breakpoints, palette, until } from '@guardian/source/foundations';
 import type { Size } from '@guardian/source/react-components';
 import {
 	Button,
@@ -10,6 +10,7 @@ import {
 import { useEffect, useMemo, useState } from 'react';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { transparentColour } from '../lib/transparentColour';
+import { useMatchMedia } from '../lib/useMatchMedia';
 import { palette as themePalette } from '../palette';
 
 type Props = {
@@ -189,6 +190,10 @@ export const ShareButton = ({
 	const isLiveBlogMeta =
 		format.design === ArticleDesign.LiveBlog && context === 'ArticleMeta';
 
+	const isDesktop = useMatchMedia(`(min-width: ${breakpoints.desktop}px)`);
+
+	const isLiveBlogBlockDesktop = isDesktop && context === 'LiveBlock';
+
 	const shareData = useMemo(
 		() => ({
 			title: webTitle,
@@ -202,14 +207,18 @@ export const ShareButton = ({
 	);
 
 	useEffect(() => {
-		if ('share' in navigator && navigator.canShare(shareData)) {
+		if (
+			!isLiveBlogBlockDesktop &&
+			'share' in navigator &&
+			navigator.canShare(shareData)
+		) {
 			setButtonKind('native');
 		} else if ('clipboard' in navigator) {
 			setButtonKind('copy');
 		} else {
 			setButtonKind('email');
 		}
-	}, [shareData]);
+	}, [shareData, isLiveBlogBlockDesktop]);
 
 	useEffect(() => {
 		if (!isCopied) return;