Skip to content
This repository was archived by the owner on Dec 17, 2024. It is now read-only.

Commit 2b7047f

Browse files
committed
fix for poor overflow in sidecar header
plus some other minor text coloring refinements to the sidecar header UI Fixes #918
1 parent 0d2adeb commit 2b7047f

File tree

2 files changed

+26
-11
lines changed

2 files changed

+26
-11
lines changed

app/content/css/themes/ibm.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ body {
2222
--color-support-01: #e71d32;
2323
--color-support-02: #5aa700;
2424
--color-support-03: #efc100;
25+
--color-support-03-darker: hsl(48, 100%, 38%); /* dialed down from 47% lightness */
2526
--color-support-04: #5aaafa;
2627
--color-brand-01: #3d70b2;
2728
--color-brand-01-10: hsla(214, 49%, 47%, 0.1); /* 10% opacity */
@@ -67,6 +68,9 @@ body a:hover:not(.plain-anchor) {
6768
.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 {
6869
color: var(--color-support-01);
6970
}
71+
.yellow-text {
72+
color: var(--color-support-03-darker);
73+
}
7074

7175
sidecar.activation-success-false .sidecar-header-icon, span[data-extra-decoration="application error"] {
7276
color: rgba(227, 26, 28, 0.8);
@@ -93,7 +97,7 @@ sidecar {
9397
}
9498

9599
sidecar .sidecar-header {
96-
border-bottom-color: transparent;
100+
border-bottom-color: var(--color-content-divider);
97101
background: var(--color-ui-01);
98102
}
99103

@@ -155,7 +159,6 @@ badge.clickable:hover {
155159
}
156160

157161
sidecar .header-right-bits {
158-
color: hsla(201, 22%, 10%, 1);
159162
}
160163

161164
sidecar .sidecar-header-icon {

app/content/css/ui.css

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -650,11 +650,16 @@ sidecar .sidecar-header .header-main-content {
650650
flex: 1;
651651
display: flex;
652652
flex-direction: column;
653+
654+
/* this is needed, as we rotate the "sidecar-header-icon", which confuses chrome in terms of width occupancy;
655+
see sidecar .sidecar-header-icon-wrapper; the 4em parts must match! */
656+
width: calc(100% - 4em);
653657
}
654658
sidecar .header-right-bits {
659+
white-space: nowrap;
655660
flex-direction: column;
656661
justify-content: center;
657-
margin: 1em 1em 1ex 1em
662+
margin: 0 1em;
658663
}
659664
.sidecar-header .kind {
660665
font-variant: small-caps;
@@ -684,7 +689,6 @@ sidecar .sidecar-header-text {
684689
display: flex;
685690
flex-direction: column;
686691
justify-content: center;
687-
padding-bottom: 0.5ex;
688692
}
689693
sidecar .sidecar-header-icon {
690694
font-size: 2em;
@@ -696,8 +700,7 @@ sidecar .sidecar-header-icon {
696700
text-transform: uppercase;
697701
}
698702
sidecar .sidecar-header-icon-wrapper {
699-
width: 4em;
700-
margin-right: 0.25em;
703+
width: 4em; /* see the sidecar .sidecar-header .header-main-content calc(100% - 4em); the 4em parts must match! */
701704
}
702705
sidecar .header-left-bits {
703706
align-items: stretch;
@@ -715,7 +718,7 @@ sidecar .sidecar-header-icon {
715718
sidecar .sidecar-header-name {
716719
flex: 1;
717720
font-weight: 400;
718-
font-size: 2.5625rem;
721+
font-size: 2.75em;
719722
display: flex;
720723
align-items: center;
721724
margin: 1rem 0 0;
@@ -743,7 +746,6 @@ sidecar .sidecar-header-name-content .entity-name {
743746
overflow: hidden;
744747
text-overflow: ellipsis;
745748
white-space: nowrap;
746-
font-weight: bold;
747749
}
748750
sidecar .sidecar-header-name-content > span {
749751
display: block;
@@ -762,7 +764,7 @@ sidecar .sidecar-header-name .package-prefix {
762764
sidecar.entity-is-activations .sidecar-header-name .activation-id {
763765
font-family: var(--font-monospace);
764766
font-size: 75%;
765-
opacity: 0.6;
767+
color: var(--color-text-02);
766768
font-size: 1rem;
767769
overflow: hidden;
768770
text-overflow: ellipsis;
@@ -780,8 +782,8 @@ sidecar.entity-is-activations .sidecar-header-name .sidecar-header-name-content
780782
}
781783
sidecar .sidecar-header-secondary-content {
782784
font-size: 0.875rem;
783-
opacity: 0.75;
784-
margin: 0 1em 1em 0;
785+
color: var(--color-text-02);
786+
margin: 0 1em 0.75em 0;
785787
}
786788
sidecar .sidecar-header-secondary-content .kind-content {
787789
overflow: hidden;
@@ -959,6 +961,16 @@ sidecar.no-limits-data .activation-estimated-cost-container {
959961
.deemphasize.deemphasize-partial {
960962
opacity: 1;
961963
}
964+
.sans-serif {
965+
font-family: var(--font-sans-serif);
966+
}
967+
.not-too-wide {
968+
display: block; /* spans don't respond */
969+
max-width: 35em;
970+
overflow: hidden;
971+
text-overflow: ellipsis;
972+
white-space: nowrap;
973+
}
962974
.normal-size {
963975
color: var(--color-text-01);
964976
font-size: inherit;

0 commit comments

Comments
 (0)