Fix issues with z-indexes and elements scrolling out of view []

Author: wchilders-nvidia

dev_tools/services/acknowledg/client/src/DiffLine.vue

@@ -58,14 +58,26 @@ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
   .diff-row {
     display: flex;
   }
+  /* Stays in view on horizontal scroll (see NumberedSource.vue). */
   .gutter {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: white;
     flex: none;
     width: 22px;
+    /* See --content-inset in TestReviewView.vue. */
+    padding-left: var(--content-inset, 0);
     display: flex;
     user-select: none;
     -webkit-user-select: none;
   }
   .marker-slot {
     margin-left: 2px;
   }
+  @media (prefers-color-scheme: dark) {
+    .gutter {
+      background-color: #181A1B;
+    }
+  }
 </style>

dev_tools/services/acknowledg/client/src/NumberedSource.vue

@@ -100,9 +100,20 @@ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
     line-height: var(--line-height);
     white-space: pre;
   }
+  /* The gutter stays in view when the text is scrolled horizontally; it
+     needs an opaque background for the text to pass beneath it.  It is
+     stretched to the text's height since a markers-only gutter (raw
+     output) has no in-flow content to give it one. */
   .gutter {
+    align-self: stretch;
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: white;
     display: flex;
     flex: none;
+    /* See --content-inset in TestReviewView.vue. */
+    padding-left: var(--content-inset, 0);
     padding-right: 10px;
     user-select: none;
     -webkit-user-select: none;
@@ -122,6 +133,10 @@ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
     left: 2px;
     height: var(--line-height);
   }
+  .code:first-child {
+    /* See --content-inset in TestReviewView.vue. */
+    padding-left: var(--content-inset, 0);
+  }
   .code {
     position: relative;
     flex: 1 0 auto;
@@ -134,4 +149,9 @@ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
     background-color: rgba(255, 190, 0, 0.25);
     pointer-events: none;
   }
+  @media (prefers-color-scheme: dark) {
+    .gutter {
+      background-color: #181A1B;
+    }
+  }
 </style>

dev_tools/services/acknowledg/client/src/TestReviewView.vue

@@ -663,8 +663,14 @@ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
       <div v-if="displayedOutput === null" class="loader-container">
         <loading-spinner />
       </div>
+      <!-- The gutters of NumberedSource and DiffLine stick to the left edge
+           on horizontal scroll.  This container's left padding would scroll
+           out from under them, shifting them left, so it is passed down as
+           --content-inset instead: the gutters (or, without a gutter, the
+           text) apply it as their own left padding. -->
       <div v-if="displayedOutput !== null" class="cell-content"
-           style="overflow: visible; display: grid;">
+           style="overflow: visible; display: grid;
+                  padding-left: 0; --content-inset: 5px;">
         <template v-if="outputViewModeTarget === 'test.src.show-diff' ||
                         outputViewModeTarget === 'test.src.show-diff-curr'">
           <diff-line v-for="(lineText, index) in displayedOutput.split('\n')"
@@ -771,6 +777,8 @@ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
     position: sticky;
     top: 0px;
     left: 0px;
+    /* Above the content's sticky gutters and positioned highlights. */
+    z-index: 2;
     padding-top: 10px;
     padding-bottom: 10px;
   }