fix nav

src/registrar/assets/sass/_theme/_base.scss

@@ -46,6 +46,37 @@ body {
   margin-top:units(1);
 }
 
+.usa-nav__primary-username {
+  display: inline-block;
+  padding: units(1) units(2);
+  max-width: 208px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @include at-media(desktop) {
+    padding: units(2);
+    max-width: 500px;
+  }
+}
+
+@include at-media(desktop) {
+
+  .usa-nav__primary-item:not(:first-child) {
+    position: relative;
+  }
+
+  .usa-nav__primary-item:not(:first-child)::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 0; /* No width since it's a border */
+    height: 50%;
+    border-left: solid 1px color('base-light');
+    transform: translateY(-50%);
+  }
+
+}
+
 .section--outlined {
   background-color: color('white');
   border: 1px solid color('base-lighter');

src/registrar/templates/base.html

@@ -151,22 +151,20 @@
         <button type="button" class="usa-nav__close">
           <img src="/public/img/usa-icons/close.svg" role="img" alt="Close" />
         </button>
-        <ul class="usa-nav__primary usa-accordion display-flex flex-align-center">
+        <ul class="usa-nav__primary usa-accordion">
           <li class="usa-nav__primary-item">
             {% if user.is_authenticated %}
-            <span>{{ user.email }}</span>
+            <span class="usa-nav__primary-username">{{ user.email }}</span>
           </li>
           {% if has_profile_feature_flag %}
-          <li class="usa-nav__primary-item display-flex flex-align-center margin-left-2">
-            <span class="text-base"> | </span>
+          <li class="usa-nav__primary-item">
             {% url 'user-profile' as user_profile_url %}
             <a class="usa-nav-link {% if request.path == user_profile_url %}usa-current{% endif %}" href="{{ user_profile_url }}">
                 <span class="text-primary">Your profile</span>
             </a>
           </li>
           {% endif %}
-          <li class="usa-nav__primary-item display-flex flex-align-center">
-            <span class="text-base"> | </span>
+          <li class="usa-nav__primary-item">
             <a href="{% url 'logout' %}"><span class="text-primary">Sign out</span></a>
             {% else %}
             <a href="{% url 'login' %}"><span>Sign in</span></a>

src/registrar/templates/profile.html

@@ -32,8 +32,7 @@ Edit your User Profile |
     {% include "includes/form_errors.html" with form=form %}
     <h1>Your profile</h1>
     <p>We require that you maintain accurate contact information. The details you provide will only be used to support the administration of .gov and won’t be made public.</p>
-    <h2>Contact information</h2>
-    <p>Review the details below and update any required information. Note that editing this information won’t affect your Login.gov account information.</p>
+    <p><strong>Please note that updating your contact information here will update the contact information for all domains in your account.</strong> However, it won’t affect your Login.gov account information.</p>
     {% include "includes/required_fields.html" %}
 
     <form class="usa-form usa-form--large" method="post" novalidate>