[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel. (#2092)

* [accessibility-2278267]:[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel.

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

* Format fixed.

* feat: add conditionalClass utility and refactor className assignments for improved readability.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -144,6 +144,13 @@ export const useDocumentsTabStyles = makeStyles({
   deleteProgressContent: {
     paddingTop: tokens.spacingVerticalL,
   },
+  smallScreenContent: {
+    "@media (max-width: 420px)": {
+      flexWrap: "wrap",
+      minHeight: "max-content",
+      padding: "4px",
+    },
+  },
 });
 
 export class DocumentsTabV2 extends TabsBase {
@@ -2102,7 +2109,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   return (
     <CosmosFluentProvider className={styles.container}>
       <div data-test={"DocumentsTab"} className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
-        <div data-test={"DocumentsTab/Filter"} className={styles.filterRow}>
+        <div data-test={"DocumentsTab/Filter"} className={`${styles.filterRow} ${styles.smallScreenContent}`}>
           {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
           <InputDataList
             dropdownOptions={getFilterChoices()}

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,8 @@ import RunQuery from "../../../../images/RunQuery.png";
 import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
+import useZoomLevel from "hooks/useZoomLevel";
+import { conditionalClass } from "Utils/StyleUtils";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
@@ -23,11 +25,16 @@ 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} ${conditionalClass(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,12 @@ export const useQueryTabStyles = makeStyles({
     display: "flex",
     flexDirection: "row",
   },
+  responsiveImg: {
+    "@media (max-width: 420px)": {
+      width: "50px",
+    },
+  },
+  zoomedImageSize: {
+    width: "60px",
+  },
 });