ui/styles: Fix the scroll bar issue by overflow:auto

"overflow-y: scroll" protentially would display the scrollbar by default even for non scrollable content, which casue the issue of we have the scrollbar everywhere. Refs: #2964
scality · Dec 17, 2020 · 1410b8a · 1410b8a
1 parent 296aca3
commit 1410b8a
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git a/ui/src/components/CommonLayoutStyle.js b/ui/src/components/CommonLayoutStyle.js
@@ -23,7 +23,7 @@ export const RightSidePanel = styled.div`
   flex-direction: column;
   width: 51%;
   /* Make it scrollable for the small laptop screen */
-  overflow-y: scroll;
+  overflow-y: auto;
   margin: 0 ${padding.small} 0 8px;
 `;
 

diff --git a/ui/src/components/NodeListTable.js b/ui/src/components/NodeListTable.js
@@ -39,7 +39,7 @@ const NodeListContainer = styled.div`
     width: 100%;
   }
   .ReactTable .rt-thead {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   table {
     border-spacing: 0;
@@ -112,7 +112,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Cell = styled.td`

diff --git a/ui/src/components/NodePageAlertsTab.js b/ui/src/components/NodePageAlertsTab.js
@@ -60,7 +60,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const ActiveAlertsText = styled.div`

diff --git a/ui/src/components/NodePagePodsTab.js b/ui/src/components/NodePagePodsTab.js
@@ -19,7 +19,7 @@ const PodTableContainer = styled.div`
   font-size: ${fontSize.base};
   border-color: ${(props) => props.theme.brand.borderLight};
   .ReactTable .rt-thead {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   table {
     border-spacing: 0;
@@ -49,7 +49,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Cell = styled.td`

diff --git a/ui/src/components/VolumeAlertsTab.js b/ui/src/components/VolumeAlertsTab.js
@@ -84,7 +84,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const ActiveAlertsCard = (props) => {

diff --git a/ui/src/components/VolumeListTable.js b/ui/src/components/VolumeListTable.js
@@ -49,7 +49,7 @@ const VolumeListContainer = styled.div`
     background-color: ${(props) => props.theme.brand.secondaryDark1};
   }
   .ReactTable .rt-thead {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   table {
     border-spacing: 0;
@@ -126,7 +126,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Cell = styled.td`

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
@@ -55,7 +55,7 @@ const ActionContainer = styled.div`
 const CreateVolumeLayout = styled.div`
   display: inline-block;
   margin-top: ${padding.base};
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 85vh;
   form {
     .sc-input {