Fix workspace home model submenu visibility and label overlap

Author: johnny4dev

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);
 }