fix for poor overflow in sidecar header

plus some other minor text coloring refinements to the sidecar header UI

Fixes #918

Author: starpit

app/content/css/themes/ibm.css

@@ -22,6 +22,7 @@ body {
     --color-support-01: #e71d32;
     --color-support-02: #5aa700;
     --color-support-03: #efc100;
+    --color-support-03-darker: hsl(48, 100%, 38%);  /* dialed down from 47% lightness */
     --color-support-04: #5aaafa;
     --color-brand-01: #3d70b2;
     --color-brand-01-10: hsla(214, 49%, 47%, 0.1); /* 10% opacity */
@@ -67,6 +68,9 @@ body a:hover:not(.plain-anchor) {
 .repl-block.valid-response .oops, sidecar.rule-enabled-false .sidecar-header-icon, .repl-block.error .oops, .clickable.oops, .oops .oops-text-on-oops, .red-text {
     color: var(--color-support-01);
 }
+.yellow-text {
+    color: var(--color-support-03-darker);
+}
 
 sidecar.activation-success-false .sidecar-header-icon, span[data-extra-decoration="application error"] {
     color: rgba(227, 26, 28, 0.8);
@@ -93,7 +97,7 @@ sidecar {
 }
 
 sidecar .sidecar-header {
-    border-bottom-color: transparent;
+    border-bottom-color: var(--color-content-divider);
     background: var(--color-ui-01);
 }
 
@@ -155,7 +159,6 @@ badge.clickable:hover {
 }
 
 sidecar .header-right-bits {
-    color: hsla(201, 22%, 10%, 1);
 }
 
 sidecar .sidecar-header-icon {

app/content/css/ui.css

@@ -650,11 +650,16 @@ sidecar .sidecar-header .header-main-content {
     flex: 1;
     display: flex;
     flex-direction: column;
+
+    /* this is needed, as we rotate the "sidecar-header-icon", which confuses chrome in terms of width occupancy;
+       see sidecar .sidecar-header-icon-wrapper; the 4em parts must match! */
+    width: calc(100% - 4em);
 }
 sidecar .header-right-bits {
+    white-space: nowrap;
     flex-direction: column;
     justify-content: center;
-    margin: 1em 1em 1ex 1em
+    margin: 0 1em;
 }
 .sidecar-header .kind {
     font-variant: small-caps;
@@ -684,7 +689,6 @@ sidecar .sidecar-header-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding-bottom: 0.5ex;
 }
 sidecar .sidecar-header-icon {
     font-size: 2em;
@@ -696,8 +700,7 @@ sidecar .sidecar-header-icon {
     text-transform: uppercase;
 }
 sidecar .sidecar-header-icon-wrapper {
-    width: 4em;
-    margin-right: 0.25em;
+    width: 4em; /* see the sidecar .sidecar-header .header-main-content calc(100% - 4em); the 4em parts must match! */
 }
 sidecar .header-left-bits {
     align-items: stretch;
@@ -715,7 +718,7 @@ sidecar .sidecar-header-icon {
 sidecar .sidecar-header-name {
     flex: 1;
     font-weight: 400;
-    font-size: 2.5625rem;
+    font-size: 2.75em;
     display: flex;
     align-items: center;
     margin: 1rem 0 0;
@@ -743,7 +746,6 @@ sidecar .sidecar-header-name-content .entity-name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: bold;
 }
 sidecar .sidecar-header-name-content > span {
     display: block;
@@ -762,7 +764,7 @@ sidecar .sidecar-header-name .package-prefix {
 sidecar.entity-is-activations .sidecar-header-name .activation-id {
     font-family: var(--font-monospace);
     font-size: 75%;
-    opacity: 0.6;
+    color: var(--color-text-02);
     font-size: 1rem;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -780,8 +782,8 @@ sidecar.entity-is-activations .sidecar-header-name  .sidecar-header-name-content
 }
 sidecar .sidecar-header-secondary-content {
     font-size: 0.875rem;
-    opacity: 0.75;
-    margin: 0 1em 1em 0;
+    color: var(--color-text-02);
+    margin: 0 1em 0.75em 0;
 }
 sidecar .sidecar-header-secondary-content .kind-content {
     overflow: hidden;
@@ -959,6 +961,16 @@ sidecar.no-limits-data .activation-estimated-cost-container {
 .deemphasize.deemphasize-partial {
     opacity: 1;
 }
+.sans-serif {
+    font-family: var(--font-sans-serif);
+}
+.not-too-wide {
+    display: block; /* spans don't respond */
+    max-width: 35em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .normal-size {
     color: var(--color-text-01);
     font-size: inherit;