fix: workspace home model count submenus showing for every model on open (#569)

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

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