feat: implement zoom level hook and update components for responsive design.

src/Explorer/Sidebar.tsx

@@ -32,6 +32,7 @@ import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
+import useZoomLevel from "hooks/useZoomLevel";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
@@ -109,11 +110,18 @@ const useSidebarStyles = makeStyles({
       overflow: "scroll",
     },
   },
-  minHeight: {
+  minHeightResponsive: {
     "@media (max-width: 420px)": {
-      minHeight: "300px",
+      minHeight: "400px",
     },
   },
+  accessibleContentZoom: {
+    overflow: "scroll",
+  },
+
+  minHeightZoom:{
+    minHeight: "400px",
+  }
 });
 
 interface GlobalCommandsProps {
@@ -285,6 +293,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
+  const isZoomed = useZoomLevel();
 
   const expand = useCallback(() => {
     if (!expanded) {
@@ -338,12 +347,12 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
         ref={allotment}
         onChange={onChange}
         onDragEnd={onDragEnd}
-        className={`resourceTreeAndTabs ${styles.accessibleContent}`}
+        className={`resourceTreeAndTabs ${styles.accessibleContent} ${isZoomed ? styles.accessibleContentZoom : ''}`}
       >
         {/* Collections Tree - Start */}
         {hasSidebar && (
           // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
-          <Allotment.Pane className={styles.minHeight} minSize={24} preferredSize={250}>
+          <Allotment.Pane className={`${styles.minHeightResponsive} ${isZoomed ? styles.minHeightZoom : ''}`} minSize={24} preferredSize={250}>
             <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
               <div className={styles.sidebarContainer}>
                 {loading && (
@@ -399,7 +408,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
             </CosmosFluentProvider>
           </Allotment.Pane>
         )}
-        <Allotment.Pane className={styles.minHeight} minSize={200}>
+        <Allotment.Pane className={`${styles.minHeightResponsive} ${isZoomed ? styles.minHeightZoom : ''}`} minSize={200}>
           <Tabs explorer={explorer} />
         </Allotment.Pane>
       </Allotment>

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
     }
   >
     <div
-      className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29"
+      className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29 ___1ngl8o6_0000000 fz7mnu6 fl3egqs flhmrkm"
       data-test="DocumentsTab/Filter"
     >
       <span>

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -8,6 +8,7 @@ import RunQuery from "../../../../images/RunQuery.png";
 import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
+import useZoomLevel from "hooks/useZoomLevel";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
@@ -23,11 +24,12 @@ interface QueryResultProps extends ResultsViewProps {
 
 const ExecuteQueryCallToAction: React.FC = () => {
   const styles = useQueryTabStyles();
+  const isZoomed = useZoomLevel();
   return (
     <div data-test="QueryTab/ResultsPane/ExecuteCTA" className={styles.executeCallToAction}>
       <div>
         <p>
-          <img src={RunQuery} aria-hidden="true" />
+          <img className={`${styles.responsiveImg} ${isZoomed ? styles.zoomedImageSize : ''}`} src={RunQuery} aria-hidden="true" />
         </p>
         <p>Execute a query to see the results</p>
       </div>

src/Explorer/Tabs/QueryTab/Styles.ts

@@ -25,6 +25,9 @@ export const useQueryTabStyles = makeStyles({
     height: "100%",
     display: "flex",
     flexDirection: "column",
+    "@media (max-width: 420px)": {
+      overflow: "scroll",
+    },
   },
   queryResultsMessage: {
     ...shorthands.margin("5px"),
@@ -38,6 +41,9 @@ export const useQueryTabStyles = makeStyles({
     display: "flex",
     rowGap: "12px",
     flexDirection: "column",
+    "@media (max-width: 420px)": {
+      height: "auto",
+    },
   },
   queryResultsTabContentContainer: {
     display: "flex",
@@ -93,4 +99,13 @@ export const useQueryTabStyles = makeStyles({
     display: "flex",
     flexDirection: "row",
   },
+  responsiveImg:{
+    "@media (max-width: 420px)": {
+      width: "50px",
+    },
+  },
+  zoomedImageSize: {
+    width: "60px",
+  },
+
 });

src/hooks/useZoomLevel.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+const useZoomLevel = (threshold: number = 2): boolean => {
+  const [isZoomed, setIsZoomed] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkZoom = () => {
+      const zoomLevel = window.devicePixelRatio;
+      setIsZoomed(zoomLevel >= threshold);
+    };
+
+    checkZoom();
+    window.addEventListener("resize", checkZoom);
+    return () => window.removeEventListener("resize", checkZoom);
+  }, [threshold]);
+
+  return isZoomed;
+};
+
+export default useZoomLevel;