Fix workspace home model submenu visibility and label overlap

Author: johnny4dev

src/styles/workspace-home.css

@@ -227,20 +227,32 @@
 }
 
 .workspace-home-model-dropdown {
-  width: 190px !important;
+  min-width: 190px !important;
+  width: max-content !important;
+  max-width: calc(100vw - 24px) !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 {
+  min-width: 0;
+  flex: 1 1 auto;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .workspace-home-model-option.is-active .workspace-home-model-toggle,
@@ -265,31 +277,33 @@
 
 .workspace-home-model-submenu {
   position: absolute;
-  top: 0;
-  left: calc(100% + 6px);
+  top: calc(100% + 6px);
+  right: 6px;
   min-width: 80px;
   padding: 6px;
   opacity: 0;
+  visibility: hidden;
   pointer-events: none;
-  transform: translateX(-4px);
+  transform: translateY(-4px);
   transition: opacity 120ms ease, transform 120ms ease;
   z-index: 6;
 }
 
 .workspace-home-model-submenu::before {
   content: "";
   position: absolute;
-  left: -8px;
-  top: 0;
-  width: 8px;
-  height: 100%;
+  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 {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
-  transform: translateX(0);
+  transform: translateY(0);
 }
 
 .workspace-home-model-submenu-item {