From 5042fbbff3810977b6d6d807d171690536a71424 Mon Sep 17 00:00:00 2001
From: Alex Ross <alros@microsoft.com>
Date: Fri, 20 Dec 2024 15:57:24 +0100
Subject: [PATCH] Keyboard focus order is not proper on "Description" and
 "Create github pull request" screen: A11y_Visual Studio Code Web
 Extensions_Github Pull request_Description_Keyboard Fixes #6451

---
 webviews/editorWebview/overview.tsx | 54 +++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/webviews/editorWebview/overview.tsx b/webviews/editorWebview/overview.tsx
index 15668e44d6..430477fa41 100644
--- a/webviews/editorWebview/overview.tsx
+++ b/webviews/editorWebview/overview.tsx
@@ -12,21 +12,53 @@ import { StatusChecksSection } from '../components/merge';
 import Sidebar from '../components/sidebar';
 import { Timeline } from '../components/timeline';
 
-export const Overview = (pr: PullRequest) => (
-	<>
+const useMediaQuery = (query: string) => {
+	const [matches, setMatches] = React.useState(window.matchMedia(query).matches);
+
+	React.useEffect(() => {
+		const mediaQueryList = window.matchMedia(query);
+		const documentChangeHandler = () => setMatches(mediaQueryList.matches);
+
+		mediaQueryList.addEventListener('change', documentChangeHandler);
+
+		return () => {
+			mediaQueryList.removeEventListener('change', documentChangeHandler);
+		};
+	}, [query]);
+
+	return matches;
+};
+
+export const Overview = (pr: PullRequest) => {
+	const isSingleColumnLayout = useMediaQuery('(max-width: 925px)');
+
+	return <>
 		<div id="title" className="title">
 			<div className="details">
 				<Header {...pr} />
 			</div>
 		</div>
-		<Sidebar {...pr} />
-		<div id="main">
-			<div id="description">
-				<CommentView isPRDescription comment={pr} />
-			</div>
-			<Timeline events={pr.events} />
-			<StatusChecksSection pr={pr} isSimple={false} />
-			<AddComment {...pr} />
+		{isSingleColumnLayout ?
+			<>
+				<Sidebar {...pr} />
+				<Main {...pr} />
+			</>
+			:
+			<>
+				<Main {...pr} />
+				<Sidebar {...pr} />
+			</>
+		}
+	</>;
+};
+
+const Main = (pr: PullRequest) => (
+	<div id="main">
+		<div id="description">
+			<CommentView isPRDescription comment={pr} />
 		</div>
-	</>
+		<Timeline events={pr.events} />
+		<StatusChecksSection pr={pr} isSimple={false} />
+		<AddComment {...pr} />
+	</div>
 );