Fix drawer text overlapping at smaller screen resolutions (#10360)

* Replace divs with semantic markup

Replace `<div>` tags with `<nav>`, `<aside>`, and a list for the nav items.

* Use grid layout

Replace flexbox with CSS grid layout. The right-hand side item is now in its own
grid cell, so the text wraps inside its cell at smaller screen widths.

Undo `<nav>` tag.

* Sort CSS

Sort the remaining CSS property declarations.

* Fix right alignment issue in Safari

Remove `justify-self: end` to fix the right alignment issue in Safari.

* Fix vertical alignment in Edge

Add `align-self: center` but only for MS Edge.

Also removed `position: relative` on the wrapper element for the tabs.
As the help item isn't using absolute positioning anymore we don't need
to set relative positioning on the parent element.

website/client/components/ui/drawerHeaderTabs.vue

@@ -1,44 +1,57 @@
 <template lang="pug">
-div.header-tabs
-  .drawer-tab-container
-    .drawer-tab(v-for="(tab, index) in tabs")
+.header-tabs
+  ul.drawer-tab-container
+    li.drawer-tab(v-for="(tab, index) in tabs")
       a.drawer-tab-text(
         @click="changeTab(index)",
         :class="{'drawer-tab-text-active': selectedTabPosition === index}",
         :title="tab.label"
       ) {{ tab.label }}
 
-  span.right-item
+  aside.help-item
     slot(name="right-item")
 </template>
 
 <style lang="scss" scoped>
   .drawer-tab-text {
-    overflow-x: hidden;
     display: block;
+    overflow-x: hidden;
     text-overflow: ellipsis;
   }
 
   .drawer-tab {
-    white-space: nowrap;
-    overflow-x: hidden;
     flex: inherit;
+    overflow-x: hidden;
+    white-space: nowrap;
   }
 
   .drawer-tab-container {
-    max-width: 50%;
-    margin: 0 auto;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    justify-self: center;
+    margin: 0;
+    padding: 0;
   }
 
-  .right-item {
-    position: absolute;
+  .help-item {
+    grid-column-start: 3;
+    position: relative;
     right: -11px;
+    text-align: right;
     top: -2px;
   }
 
   .header-tabs {
-    position: relative;
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  // MS Edge
+  @supports (-ms-ime-align: auto) {
+    .help-item {
+      align-self: center;
+      top: 1px;
+    }
   }
 </style>