fix: specs overflow horizontally and z-index issues (#15547)

cypress-io · Mar 17, 2021 · e60a029 · e60a029 · cypress-bot · Mar 17, 2021
1 parent ecccf54
commit e60a029
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/npm/design-system/src/components/SpecList/SpecList.module.scss b/npm/design-system/src/components/SpecList/SpecList.module.scss
@@ -41,7 +41,7 @@
   position: relative;
   color: unset;
   text-decoration: none;
-  display: inline-block;
+  display: block;
   width: 100%;
   &:hover {
     background: opacify($color: $metal-05, $amount: 0.2);

diff --git a/packages/runner-ct/src/SpecList/components/SearchSpec.scss b/packages/runner-ct/src/SpecList/components/SearchSpec.scss
@@ -1,3 +1,5 @@
+@use '../../variables.scss' as *;
+
 .specs-list-search-input-container {
   display: flex;
   justify-content: flex-start;
@@ -8,7 +10,8 @@
   padding: 8px;
   box-sizing: border-box;
   background-color: white;
-  z-index: 10;
+  box-shadow: $shadow-xs;
+  z-index: 1;
 
   input { 
     width: 100%;

diff --git a/packages/runner-ct/src/app/RunnerCt.module.scss b/packages/runner-ct/src/app/RunnerCt.module.scss
@@ -55,6 +55,7 @@ $box-shadow-closest: 0px 0px 5px rgba(0, 0, 0, 0.4);
   height: 100%;
   display: flex;
   flex-direction: column;
+  z-index: 0;
 }
 
 .runner {