From a6ae784a451a4495b069f86bd5724adf75420185 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Thu, 12 Jun 2025 17:58:10 +0530
Subject: [PATCH] [accessibility-3739744]:[Supporting the Platform - Azure
 Cosmos DB- Data Explorer - New Vertex]: When page viewport is set to
 320x256px, Content under 'New Vertex' pane is not properly visible. (#2163)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 .../NewVertexComponent.less                   |  7 ++++
 src/Explorer/Panes/PanelComponent.less        | 33 ++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less
index 6993cbe39..25723ace3 100644
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less
@@ -95,3 +95,10 @@
     white-space: nowrap;
   }
 }
+
+@media (max-width: 768px) {
+  .newVertexComponent {
+    padding: 0;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 998201a09..857794590 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -11,10 +11,10 @@
     margin: 20px 0;
     overflow-x: hidden;
 
-    & > :not(.collapsibleSection) {
+    &> :not(.collapsibleSection) {
       margin-bottom: @DefaultSpace;
 
-      & > :not(:last-child) {
+      &> :not(:last-child) {
         margin-bottom: @DefaultSpace;
       }
     }
@@ -56,6 +56,14 @@
       transform: translate(-50%, -50%);
     }
   }
+
+  @media (max-width: 768px) {
+    .panelMainContent {
+      padding: 0 24px;
+      margin: 0;
+      overflow-x: auto;
+    }
+  }
 }
 
 .panelHeader {
@@ -113,70 +121,87 @@
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
+
 .addRemoveIcon {
   margin-left: 4px !important;
 }
+
 .addRemoveIconLabel {
   margin-top: 28px;
   margin-left: 4px !important;
 }
+
 .addRemoveIcon [alt="editEntity"]:focus,
 .addRemoveIconLabel [alt="editEntity"]:focus {
   border: 1px dashed #605e5c;
 }
+
 .addNewParamStyle {
   margin-top: 5px;
   margin-left: 5px !important;
   cursor: pointer;
 }
 
-.panelGroupSpacing > :not(:last-child) {
+.panelGroupSpacing> :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
+
 .fileUpload {
   display: none !important;
 }
+
 .customFileUpload {
   padding: 25px 0px 0px 10px;
   cursor: pointer;
   display: flex;
 }
+
 .fileIcon {
   align-self: center;
 }
+
 .panelAddIconLabel {
   font-size: 20px;
   width: 20px;
   margin: 30px 0 0 10px;
   cursor: default;
 }
+
 .panelAddIcon {
   font-size: 20px;
   width: 20px;
   margin: 30px 0 0 10px;
   cursor: default;
 }
+
 .removeIcon {
   color: @InfoIconColor;
 }
+
 .backImageIcon {
   margin-top: 8px;
 }
+
 [alt="back"]:focus {
   border: 1px solid #605e5c;
 }
+
 .addEntityDatePicker {
   max-width: 145px;
 }
+
 .addEntityTextField {
   width: 237px;
 }
+
 .addButtonEntiy {
   width: 25%;
 }
+
 .column-select-view {
   margin: 20px 0px 0px 0px;
 }
+
 .panelSeparator::before {
   background-color: #edebe9;
-}
+}
\ No newline at end of file