From a569dcf32dad2198450f5a18db93c8a9f09520fd Mon Sep 17 00:00:00 2001
From: Satyapriya Bai <v-satybai@microsoft.com>
Date: Mon, 17 Feb 2025 12:28:55 +0530
Subject: [PATCH] 3556812

---
 .../NotificationConsole.less                  | 12 +++++--
 .../NotificationConsoleComponent.tsx          | 31 ++++++++++---------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
index 2e9413020..3d3f12077 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
@@ -1,6 +1,6 @@
 @import "../../../../less/Common/Constants";
 
-@ConsoleHeaderHeight: 32px;
+// @ConsoleHeaderHeight: 32px;
 @ConsoleContentsPaneHeight: 220px;
 @ConsoleStatusMaxWidth: 672px;
 
@@ -22,7 +22,7 @@
         justify-content: space-between;
         align-items: center;
         flex-shrink: 0;
-        height: @ConsoleHeaderHeight;
+        // height: @ConsoleHeaderHeight;
         width: 100%;
         background-color: @NotificationLow;
         border-top: @ButtonBorderWidth @BaseMedium solid;
@@ -38,6 +38,9 @@
         }
 
         .statusBar {
+            width: 100%;
+            padding: 6px 0px;
+
             .dataTypeIcons {
                 cursor: pointer;
                 margin: 0px @DefaultSpace 0px @MediumSpace;
@@ -76,11 +79,14 @@
                     max-width: @ConsoleStatusMaxWidth;
                 }
             }
+            &:focus {
+                outline: none;
+            }
         }
 
         .expandCollapseButton {
             cursor: pointer;
-            padding-right: 5px;
+            padding: 6px 5px 6px 0px;
 
             img {
                 width: @ExpandCollapseIconSize;
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
index 1821fd14c..15b7634a4 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -81,9 +81,9 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement): void => {
-    this.consoleHeaderElement = element;
-  };
+  // public setElememntRef = (element: HTMLElement): void => {
+  //   this.consoleHeaderElement = element;
+  // };
 
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
@@ -98,15 +98,14 @@ export class NotificationConsoleComponent extends React.Component<
 
     return (
       <div className="notificationConsoleContainer">
-        <div
-          className="notificationConsoleHeader"
-          id="notificationConsoleHeader"
-          ref={this.setElememntRef}
-          onClick={() => this.expandCollapseConsole()}
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
-          tabIndex={0}
-        >
-          <div className="statusBar">
+        <div className="notificationConsoleHeader" id="notificationConsoleHeader">
+          <div
+            className="statusBar"
+            // ref={this.setElememntRef}
+            onClick={() => this.expandCollapseConsole()}
+            onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
+            tabIndex={0}
+          >
             <span className="dataTypeIcons">
               <span className="notificationConsoleHeaderIconWithData">
                 <img src={LoadingIcon} alt="In progress items" />
@@ -136,6 +135,8 @@ export class NotificationConsoleComponent extends React.Component<
             tabIndex={0}
             aria-label="Console"
             aria-expanded={this.props.isConsoleExpanded}
+            onClick={() => this.expandCollapseConsole()}
+            onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
@@ -259,9 +260,9 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
-    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
-      this.consoleHeaderElement.focus();
-    }
+    // if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
+    //   this.consoleHeaderElement.focus();
+    // }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };