diff --git a/client/layout/masterbar/item.tsx b/client/layout/masterbar/item.tsx index 08146d95961572..ae537a6d21d356 100644 --- a/client/layout/masterbar/item.tsx +++ b/client/layout/masterbar/item.tsx @@ -251,7 +251,7 @@ class MasterbarItem extends Component< MasterbarItemProps > { > { this.renderChildren() } - { /* { this.renderSubItems() } */ } + { this.renderSubItems() } ); } diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss index 63231b662a46c5..8598557ed90769 100644 --- a/client/layout/masterbar/style.scss +++ b/client/layout/masterbar/style.scss @@ -237,7 +237,7 @@ body.is-mobile-app-view { } } - .masterbar__item-subitems { + & + .masterbar__item-subitems { margin: 0; padding: 6px 0; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); @@ -258,6 +258,7 @@ body.is-mobile-app-view { white-space: nowrap; min-width: 140px; line-height: 2; + a, button { display: inline-block; @@ -356,7 +357,7 @@ body.is-mobile-app-view { fill: var(--color-masterbar-highlight); } - .masterbar__item-subitems { + & + .masterbar__item-subitems { display: block; z-index: 99999; } @@ -721,51 +722,22 @@ body.is-mobile-app-view { gap: 5px; } - .gravatar { - border: 1px solid var(--color-masterbar-border); - border-radius: unset; - margin-left: 1px; - - @media only screen and (max-width: 781px) { - width: 26px; - height: 26px; - margin-left: 4px; - } - } + &, + + .masterbar__item-subitems { + .gravatar { + border: 1px solid var(--color-masterbar-border); + border-radius: unset; + margin-left: 1px; - .masterbar__item-howdy-account-wrapper { - display: flex; - flex-direction: row; - gap: 12px; - padding: 4px 3px; - - .masterbar__item-howdy-account-gravatar { - border: none; - flex-basis: auto; - max-width: 50%; - } - - .masterbar__item-howdy-account-details { - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; - max-width: 50%; - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 3px 5px; - margin: 0; - line-height: 18px; - - .username { - font-size: 11px; /* stylelint-disable-line declaration-property-unit-allowed-list */ - line-height: 14px; - margin-bottom: 4px; + @media only screen and (max-width: 781px) { + width: 26px; + height: 26px; + margin-left: 4px; } } } - .masterbar__item-subitems { + + .masterbar__item-subitems { min-width: 264px !important; max-height: 94px; padding: 12px 0; @@ -774,15 +746,47 @@ body.is-mobile-app-view { min-width: 100% !important; max-height: 100%; } - } - .masterbar__item-subitems-item { - &.account-link, - &.logout-link { - position: relative; - float: left; - top: -5px; - left: 85px; + .masterbar__item-howdy-account-wrapper { + display: flex; + flex-direction: row; + gap: 12px; + padding: 4px 3px; + + .masterbar__item-howdy-account-gravatar { + border: none; + flex-basis: auto; + max-width: 50%; + } + + .masterbar__item-howdy-account-details { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + max-width: 50%; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 3px 5px; + margin: 0; + line-height: 18px; + + .username { + font-size: 11px; /* stylelint-disable-line declaration-property-unit-allowed-list */ + line-height: 14px; + margin-bottom: 4px; + } + } + } + + .masterbar__item-subitems-item { + &.account-link, + &.logout-link { + position: relative; + float: left; + top: -5px; + left: 85px; + } } } @@ -792,21 +796,23 @@ body.is-mobile-app-view { display: none; } - .masterbar__item-howdy-account-details { - padding: 0 !important; - } + + .masterbar__item-subitems { + .masterbar__item-howdy-account-details { + padding: 0 !important; + } - .masterbar__item-subitems-item { + .masterbar__item-subitems-item { - min-width: 100% !important; - &.account-link { - top: -10px; - left: 0; - } + min-width: 100% !important; + &.account-link { + top: -10px; + left: 0; + } - &.logout-link { - top: -10px; - left: 0; + &.logout-link { + top: -10px; + left: 0; + } } } }