Fix visible toolbar overflow (#7037)

* Closes #7036
- CSS fix to prevent toolbar overrun of main view area.

* a11y: add label to pane handles

* test(visual): toolbar overflow

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

e2e/tests/visual-a11y/displayLayout.visual.spec.js

@@ -93,4 +93,14 @@ test.describe('Visual - Display Layout', () => {
     await page.getByLabel('Parent Layout Layout', { exact: true }).click();
     await percySnapshot(page, `Parent outer layout selected (theme: '${theme}')`);
   });
+
+  test('Toolbar does not overflow into inspector', async ({ page, theme }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7036'
+    });
+    await page.getByLabel('Expand Inspect Pane').click();
+    await page.getByLabel('Resize Inspect Pane').dragTo(page.getByLabel('X:'));
+    await percySnapshot(page, `Toolbar does not overflow into inspector (theme: '${theme}')`);
+  });
 });

src/ui/layout/PaneContainer.vue

@@ -21,7 +21,13 @@
 -->
 <template>
   <div class="l-pane" :class="paneClasses">
-    <div v-if="handle" class="l-pane__handle" @mousedown.prevent="startResizing"></div>
+    <div
+      v-if="handle"
+      class="l-pane__handle"
+      :aria-label="handleLabel"
+      :aria-grabbed="resizing"
+      @mousedown.prevent="startResizing"
+    ></div>
     <div class="l-pane__header">
       <span v-if="label" class="l-pane__label">{{ label }}</span>
       <slot name="controls"></slot>
@@ -88,6 +94,9 @@ export default {
     };
   },
   computed: {
+    handleLabel() {
+      return `Resize ${this.label} Pane`;
+    },
     isCollapsable() {
       return this.hideParam?.length > 0;
     },

src/ui/layout/pane.scss

@@ -60,7 +60,7 @@
       transition: opacity 150ms ease;
       opacity: 0;
       pointer-events: none;
-      overflow: hidden;
+      overflow: hidden; // Prevents toolbar from extending into Inspector
 
       > * {
         min-width: 0 !important;
@@ -93,6 +93,7 @@
   &__contents {
     flex: 1 1 100%;
     opacity: 1;
+    overflow: hidden;
     pointer-events: inherit;
     transition: opacity 250ms ease 250ms;