diff --git a/src/styles/workspace-home.css b/src/styles/workspace-home.css index 2903b24f0..2fdc8796d 100644 --- a/src/styles/workspace-home.css +++ b/src/styles/workspace-home.css @@ -227,20 +227,28 @@ } .workspace-home-model-dropdown { - width: 190px !important; + min-width: 190px !important; + width: max-content !important; } .workspace-home-model-option { position: relative; display: flex; align-items: center; + width: 100%; border-radius: 8px; } .workspace-home-model-option .workspace-home-model-toggle { - width: 175px; - flex: 1; - justify-content: space-between; + min-width: 175px; + width: 100%; + flex: 1 1 auto; + padding-right: 48px; +} + +.workspace-home-model-option .workspace-home-model-toggle .ds-popover-item-label { + flex: none; + white-space: nowrap; } .workspace-home-model-option.is-active .workspace-home-model-toggle, @@ -270,6 +278,7 @@ min-width: 80px; padding: 6px; opacity: 0; + visibility: hidden; pointer-events: none; transform: translateX(-4px); transition: opacity 120ms ease, transform 120ms ease; @@ -288,6 +297,7 @@ .workspace-home-model-option:hover .workspace-home-model-submenu, .workspace-home-model-option:focus-within .workspace-home-model-submenu { opacity: 1; + visibility: visible; pointer-events: auto; transform: translateX(0); } @@ -479,6 +489,39 @@ } } +@media (max-width: 560px) { + .workspace-home-model-dropdown { + max-width: calc(100vw - 24px) !important; + } + + .workspace-home-model-option .workspace-home-model-toggle .ds-popover-item-label { + min-width: 0; + flex: 1 1 auto; + white-space: normal; + overflow-wrap: anywhere; + word-break: break-word; + } + + .workspace-home-model-submenu { + top: calc(100% + 6px); + left: auto; + right: 6px; + transform: translateY(-4px); + } + + .workspace-home-model-submenu::before { + top: -8px; + left: 0; + width: 100%; + height: 8px; + } + + .workspace-home-model-option:hover .workspace-home-model-submenu, + .workspace-home-model-option:focus-within .workspace-home-model-submenu { + transform: translateY(0); + } +} + @media (max-width: 720px) { .workspace-home { padding: 24px 20px;