Fix execute Query 'Results' and 'Query status' section controls gets truncated at 200% resize mode of 'Query1' blade (#1105)

* Fix a11y querytab results section zoom section issue

* Update test smapshot

* Update test snapshot

* Resolved test case issue

less/documentDB.less

@@ -2357,6 +2357,8 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
+  min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -83,11 +83,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       >
         The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
          
-        <a
+        <StyledLinkBase
           href="https://aka.ms/cosmos-autoscale-migration"
         >
           Learn more
-        </a>
+        </StyledLinkBase>
       </Text>
     </StyledMessageBar>
     <StyledChoiceGroup

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -167,11 +167,11 @@ exports[`SettingsUtils functions render 1`] = `
   >
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
      
-    <a
+    <StyledLinkBase
       href="https://aka.ms/cosmos-autoscale-migration"
     >
       Learn more
-    </a>
+    </StyledLinkBase>
   </Text>
   <Text
     styles={

src/Explorer/Graph/GraphExplorerComponent/graphExplorer.less

@@ -115,16 +115,16 @@
 
   .typeahead__cancel-button {
     top: 5px !important;
-        right: .4em !important;
+    right: 0.4em !important;
   }
 
-
   .queryMetricsSummary {
     margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
     table-layout: fixed;
     display: block;
     overflow-y: auto;
     overflow-x: hidden;
+    min-height: 100px;
 
     .queryMetricsSummaryHead {
       .flex-display();
@@ -145,7 +145,8 @@
       font-size: 12px;
       width: 100%;
       .flex-display();
-            th, td {
+      th,
+      td {
         padding: @DefaultSpace;
 
         &:nth-child(1) {
@@ -169,7 +170,6 @@
     }
   }
 
-
   .graphContainer {
     overflow: hidden;
     height: 100%;
@@ -177,7 +177,6 @@
     padding-top: (2 * @MediumSpace);
     .flex-display();
 
-
     .leftPane {
       width: 200px;
       padding: 0px 0px 0px @DefaultSpace;
@@ -250,7 +249,7 @@
         height: 100%;
 
         .graphModal {
-                    background-color: rgba(255, 255, 255, .7);
+          background-color: rgba(255, 255, 255, 0.7);
           position: absolute;
           top: 0px;
           left: 0px;
@@ -283,7 +282,6 @@
           min-height: 0px;
           margin-top: 0px;
 
-
           .rightPaneHeader {
             /* TODO: Hack to align the trashbox with the header for now. */
             margin-top: -28px;
@@ -413,10 +411,10 @@
 
               /* Override autocomplete stuff */
               .typeahead__container {
-                                                    font: @mediumFontSize 'Segoe UI' !important;
+                font: @mediumFontSize "Segoe UI" !important;
 
                 input {
-                                                        font: @mediumFontSize 'Segoe UI' !important;
+                  font: @mediumFontSize "Segoe UI" !important;
                   padding: 0px @SmallSpace !important;
                 }
               }
@@ -427,7 +425,7 @@
 
               .typeahead__cancel-button {
                 top: 5px !important;
-                                right: .4em !important;
+                right: 0.4em !important;
               }
 
               .rightPaneAddPropertyBtn {
@@ -451,6 +449,8 @@
     .flex-direction();
     overflow: hidden;
     width: 100%;
+    min-height: 200px;
+    overflow: auto;
   }
 
   .paneTitle {
@@ -609,8 +609,6 @@
         opacity: 0;
       }
     }
-
-
   }
 
   /* scroll for leftpane, rightpane and newvertex pane*/

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx

@@ -29,6 +29,7 @@ describe("Table query select Panel", () => {
   it("Should checked availableCheckbox by default", () => {
     const wrapper = mount(<TableQuerySelectPanel {...props} />);
     expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
+      ariaPositionInSet: 0,
       id: "availableCheckbox",
       label: "Available Columns",
       checked: true,

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap

@@ -37,12 +37,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
             className="column-select-view"
           >
             <StyledCheckboxBase
+              ariaPositionInSet={0}
               checked={true}
               id="availableCheckbox"
               label="Available Columns"
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={0}
                 checked={true}
                 id="availableCheckbox"
                 label="Available Columns"
@@ -328,6 +330,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <input
                     aria-checked="true"
                     aria-label="Available Columns"
+                    aria-posinset={0}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}
@@ -646,6 +649,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
+              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -653,6 +657,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -939,6 +944,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     aria-checked="true"
                     aria-disabled={false}
                     aria-label=""
+                    aria-posinset={1}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -999,7 +999,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                               "data-order": 2,
                               "data-title": "Query Stats",
                             }}
-                            style={{ height: "100%" }}
+                            style={{ height: "100%", overflowY: "scroll" }}
                           >
                             {this.state.allResultsMetadata.length > 0 && !this.state.error && (
                               <div className="queryMetricsSummaryContainer">