#428

frontend/src/index.css

@@ -222,6 +222,12 @@ body
   column-gap: 4px;
 }
 
+.top-nav-account
+{
+  flex-shrink: 0;
+  width: max-content;
+}
+
 .top-nav-layout .top-nav-brand-link
 {
   margin-inline: 4px;
@@ -241,6 +247,39 @@ body
   font-size: .875rem;
 }
 
+.top-nav-separator-vertical
+{
+  display: inline-flex;
+}
+
+.top-nav-separator-horizontal
+{
+  display: none;
+}
+
+.top-nav-mobile-menu .top-nav-separator-vertical
+{
+  display: none;
+}
+
+.top-nav-mobile-menu .top-nav-separator-horizontal
+{
+  display: block;
+}
+
+.top-nav-more-menu
+{
+  display: grid;
+  grid-template-columns: fit-content(35%) minmax(0, 1fr);
+  align-items: center;
+}
+
+.top-nav-desktop-submenu .top-nav-menu-link
+{
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
 .top-nav-desktop-menu .top-nav-menu-link
 {
   padding-inline: 8px;
@@ -272,6 +311,15 @@ body
 
 @media (min-width: 768px)
 {
+  .top-nav-layout[data-measuring] .top-nav-primary,
+  .top-nav-layout[data-measuring] .top-nav-desktop-menu,
+  .top-nav-layout[data-measuring] .top-nav-account
+  {
+    flex: 0 0 auto;
+    width: max-content;
+    max-width: none;
+  }
+
   .top-nav-layout[data-desktop='true'] .top-nav-locale-name,
   .top-nav-layout[data-measuring] .top-nav-locale-name
   {