diff --git a/addon/styles/_pix-structure-switcher.scss b/addon/styles/_pix-structure-switcher.scss index d2db4d679..6f915c67a 100644 --- a/addon/styles/_pix-structure-switcher.scss +++ b/addon/styles/_pix-structure-switcher.scss @@ -26,11 +26,10 @@ @extend %pix-shadow-xs; position: static; - width: auto; - min-width: 100%; - max-width: 316px; + width: 440px; max-height: 80vh; - margin-left: var(--pix-spacing-6x) !important; // we need to override popperjs inline styles + margin-bottom: calc(-1 * var(--pix-spacing-3x)) !important; + margin-left: calc(-1 * var(--pix-spacing-4x)) !important; overflow-y: auto; border-radius: 8px; @@ -47,7 +46,8 @@ .pix-navigation--opened &:not(.pix-select__dropdown--closed) { display: block; - margin-top: var(--pix-spacing-4x) !important; + margin: var(--pix-spacing-4x) 0 !important; + margin-bottom: 0 !important; } } } @@ -61,18 +61,14 @@ border-top: none; } - .pix-select-list-category__option--hidden { - display: none - } .pix-select-list-category__option { padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x); - overflow-x: hidden; // stylelint-disable-next-line custom-property-pattern font-family: var(--_pix-font-family-title); - white-space: nowrap; + white-space: wrap; text-align: left; - text-overflow: ellipsis; + word-break: break-word; border-radius: var(--border-radius-2x); &:focus:not(.pix-select-list-category__option--selected ) { @@ -82,6 +78,10 @@ &:hover { background-color: var(--pix-structure-bg-hover); } + + &--hidden { + display: none; + } } .pix-select-list-category__option--selected { diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index a47b55fae..f91e5a9b9 100644 --- a/tests/dummy/app/controllers/application.js +++ b/tests/dummy/app/controllers/application.js @@ -4,7 +4,7 @@ import { action } from '@ember/object'; export default class ModalPage extends Controller { @tracked - structure = this.structures[1]; + structure = this.structures[2]; structures = [ { value: 1,