From 696237205a07782fc7b871617d4c1d6e0d7f554f Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 18 Dec 2023 17:32:57 +0100
Subject: [PATCH] fix(ui-mode): disconnected error styling (#28681)

Fixes https://github.com/microsoft/playwright/issues/28679
Fixes https://github.com/microsoft/playwright/issues/28680
---
 packages/trace-viewer/src/ui/uiModeView.css | 16 ++++++++++++++--
 packages/trace-viewer/src/ui/uiModeView.tsx |  4 ++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/trace-viewer/src/ui/uiModeView.css b/packages/trace-viewer/src/ui/uiModeView.css
index 80cf5c6341..3c18145805 100644
--- a/packages/trace-viewer/src/ui/uiModeView.css
+++ b/packages/trace-viewer/src/ui/uiModeView.css
@@ -74,13 +74,25 @@
 }
 
 .ui-mode .disconnected {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: auto;
+  flex-direction: column;
+  background-color: var(--vscode-editor-background);
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   z-index: 1000;
-  background-color: rgba(0, 0, 0, 0.5);
+  line-height: 24px;
+}
+
+.disconnected .title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 30px;
 }
 
 .status-line {
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index 3f0f9f67c4..1becb6645f 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -207,9 +207,9 @@ export const UIModeView: React.FC<{}> = ({
         <button className='button secondary' onClick={closeInstallDialog}>Dismiss</button>
       </div>
     </dialog>}
-    {isDisconnected && <div className='drop-target'>
+    {isDisconnected && <div className='disconnected'>
       <div className='title'>UI Mode disconnected</div>
-      <div><a href='#' onClick={() => window.location.reload()}>Reload the page</a> to reconnect</div>
+      <div><a href='#' onClick={() => window.location.href = '/'}>Reload the page</a> to reconnect</div>
     </div>}
     <SplitView sidebarSize={250} minSidebarSize={150} orientation='horizontal' sidebarIsFirst={true} settingName='testListSidebar'>
       <div className='vbox'>