@oicl/openbridge-webcomponents 2.0.0-next.146 → 2.0.0-next.147

package/bundle/openbridge-webcomponents.bundle.js

@@ -121649,27 +121649,28 @@ const compentStyle$l = i$7`* {
     height: var(--app-components-topbar-touch-target-tall);
   }
 
+.wrapper.inactive {
+    padding-left: calc(
+      var(--app-components-topbar-margin-global) +
+        var(--app-components-topbar-padding-left-small)
+    ); /* no menu button: inset the title instead */
+  }
+
+/* ---- One flex line ----
+   Flattened because a squeeze must reach the texts, not a group: a shrinkable
+   left group collapses under an unshrinkable alert and covers the menu button. */
+
 .group {
-  display: flex;
-  align-items: center;
+  display: contents;
 }
 
-.group.right {
-    justify-content: flex-end;
-    flex-grow: 1;
-  }
-
 .settings .group.left > * {
     margin-right: 0;
     margin-left: 0;
   }
 
 .group.left .title {
-      padding-right: var(--app-components-topbar-label-spacing);
-    }
-
-.inactive .group.left {
-    padding-left: var(--app-components-topbar-padding-left-small);
+    padding-right: var(--app-components-topbar-label-spacing);
   }
 
 .group.left .menu-button {
@@ -121690,16 +121691,40 @@ const compentStyle$l = i$7`* {
     color: var(--element-neutral-color);
   }
 
+/* Controls never shrink: a squeeze reaches the texts, then overflows the end */
+
+.menu-button,
+.app-icon,
+.left-more-button,
+.dimming-button,
+.user-button,
+.apps-button,
+::slotted([slot="command-button"]),
+::slotted([slot="clock"]) {
+  flex-shrink: 0;
+}
+
 .alert-container {
   display: flex;
-  flex-grow: 1;
+  flex: 1 1 0; /* zero basis: fills what the texts leave, holds its min-content in a squeeze */
   gap: var(--app-components-topbar-label-spacing);
   align-items: center;
   justify-content: right;
 }
 
-.title {
+/* ---- Text gives way first ---- */
+
+.title,
+.page-name {
+  overflow: hidden;
   color: var(--element-active-color, #1a1a1a);
+}
+
+.title {
+  flex-shrink: 3; /* the app title gives way before the page name */
+  min-width: 2em; /* room for "A…": narrower boxes paint a clipped glyph instead */
+  white-space: nowrap;
+  text-overflow: ellipsis;
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);
   font-size: var(--global-typography-ui-body-font-size);
@@ -121711,7 +121736,11 @@ const compentStyle$l = i$7`* {
 }
 
 .page-name {
-  color: var(--element-active-color, #1a1a1a);
+  min-width: 0; /* shrink below the longest word instead of pushing buttons out */
+  display: -webkit-box; /* two lines, then an ellipsis */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-active-font-weight);
   font-size: var(--global-typography-ui-body-active-font-size);
@@ -122105,7 +122134,7 @@ let ObcTopBar = class extends i$4 {
 
         @media (max-width: ${this.appTitleBreakpointPx}px) {
           .title {
-            display: none;
+            display: none !important; /* the stylesheet's display wins over this inline rule otherwise */
           }
         }