adjust styling for request details

saucelabs · Aug 9, 2024 · 9757751 · 9757751
1 parent e2cf7d7
commit 9757751
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 15 deletions.
diff --git a/src/Components/Common/Tooltip/Tooltip.styles.scss b/src/Components/Common/Tooltip/Tooltip.styles.scss
@@ -11,6 +11,7 @@
     display: inline-block;
     background-color: $brand-primary-dark-gray;
     color: $white-100;
+    font-size: $font-size-small;
     padding: $size-xs $size-xs-s;
     border: $border;
     border-radius: $border-radius-base;

diff --git a/src/Components/NetworkTable/NetworkTable.styles.scss b/src/Components/NetworkTable/NetworkTable.styles.scss
@@ -20,6 +20,7 @@
   overflow-x: hidden;
   grid-template-columns: subgrid;
   grid-column: span 8 / span 8;
+  outline: none;
 }
 
 .network-table-row {

diff --git a/src/Components/ReqDetail/Headers.styles.scss b/src/Components/ReqDetail/Headers.styles.scss
@@ -5,8 +5,8 @@
 
   .header-info {
     border-bottom: 1px solid $white-90;
-    margin-bottom: $size-m;
-    padding-bottom: $size-m;
+    padding-bottom: $size-xs-s;
+    margin-bottom: $size-xs-s;
 
     &:last-child {
       margin-bottom: 0;
@@ -27,13 +27,13 @@
 
   .caret-icon {
     display: inline-block;
-    height: $size-xs * 2;
+    height: $size-xs-s;
     transform: translateY(-1px) translateX(-5px) rotate(90deg);
-    width: $size-xs * 2;
+    width: $size-xs-s;
   }
 
   .encode-url {
-    margin-left: $size-xs * 2;
+    margin-left: $size-xs-s;
     font-size: $font-size-small;
   }
 
@@ -43,12 +43,13 @@
 }
 
 .header-detail {
-  padding: $size-m 0 0 $size-m;
+  padding-top: $size-xs-s;
+  padding-left: $size-xs-s;
 
   .info-row {
     margin: 0;
     font-size: $font-size-small;
-    padding-bottom: $size-xs-s;
+    padding-bottom: $size-xs;
 
     &:last-child {
       padding-bottom: 0;

diff --git a/src/Containers/MainContainer.styles.scss b/src/Containers/MainContainer.styles.scss
@@ -10,5 +10,6 @@
 .main-container {
   display: flex;
   height: 100%;
+  width: 100%;
   overflow: auto;
 }
diff --git a/src/Containers/NetworkTableContainer.styles.scss b/src/Containers/NetworkTableContainer.styles.scss
@@ -21,6 +21,6 @@
 
   &.limited-cols {
     grid-template-columns: 100%;
-    max-width: $name-col-width;
+    width: 30%;
   }
 }
diff --git a/src/Containers/ReqDetailContainer.styles.scss b/src/Containers/ReqDetailContainer.styles.scss
@@ -4,7 +4,7 @@ $close-button-width: 35px;
 $tab-height: 35px;
 
 .req-detail-container {
-  flex: 1 1 auto;
+  width: 70%;
   height: 100%;
   overflow: auto;
   background: $white-100;
@@ -20,6 +20,7 @@ $tab-height: 35px;
     color: $white-33;
     border: 0;
     border-bottom: 2px solid transparent;
+    padding: $size-xs-s $size-s $size-xs;
 
     &:hover {
       text-decoration: none;
@@ -39,6 +40,7 @@ $tab-height: 35px;
     cursor: pointer;
     background: transparent;
     border: 0;
+    outline: none;
 
     .close-icon {
       height: $size-xs-s;
@@ -59,7 +61,7 @@ $tab-height: 35px;
   .tabs-container {
     display: flex;
     width: 100%;
-    padding: $size-m;
+    padding: $size-s $size-m;
     height: calc(100% - #{$tab-height});
     overflow: auto;
   }

diff --git a/src/state/network/NetworkProvider.jsx b/src/state/network/NetworkProvider.jsx
@@ -5,7 +5,6 @@ import { reducer, initialState as defaultState } from './reducer';
 import { updateData, fetchFile, updateScrollToIndex } from './actions';
 import { NetworkContext } from './Context';
 import { findRequestIndex } from '../../utils';
-import { ROW_ID_PREFIX } from '../../constants';
 
 const NetworkProvider = (props) => {
   const {
@@ -32,7 +31,6 @@ const NetworkProvider = (props) => {
     onRequestSelect,
   };
   const value = useMemo(() => [state, dispatch, callbacks], [state]);
-  const selectedReqIndex = value[0].get('selectedReqIndex');
   const requestData = value[0].get('data');
   const showReqDetail = value[0].get('showReqDetail');
   const actualData = value[0].get('actualData');

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -103,9 +103,6 @@ $size-xxxl: $size-base * 11; // 44px;
   brandBlue: $brand-blue;
 }
 
-// width/height of container
-$name-col-width: 300px;
-
 // borders
 $border-color: #DBE0EA;
 $border: 1px solid $border-color;