Fix dropdown clipping (#9384)

Fixes #9379.
enso-org · Mar 12, 2024 · 64e29f8 · 64e29f8
1 parent c61e397
commit 64e29f8
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
@@ -87,7 +87,6 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
   flex-direction: row;
   place-items: center;
   max-width: 2000px;
-  overflow-x: clip;
 }
 
 .collapse-argument-enter-active {
@@ -98,8 +97,17 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
   transition: max-width 0.5s cubic-bezier(0, 0.76, 0, 0.99);
 }
 
+/* Clipping is part of the show/hide animation, but must not be applied when the argument is fully-shown because
+   attachments such as dropdowns extend beyond the element and may be children of the argument. */
+.collapse-argument-enter-active,
+.collapse-argument-leave-active,
+.collapse-argument-enter-from,
+.collapse-argument-leave-to {
+  overflow-x: clip;
+}
+
 .collapse-argument-enter-from,
 .collapse-argument-leave-to {
-  max-width: 0px;
+  max-width: 0;
 }
 </style>