diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index acf3da53..6e8bc68c 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -1,5 +1,7 @@
 <template>
-  <Responsive v-on:sizeChanged="sizeChanged()">
+  <Responsive
+    v-on:sizeChanged="sizeChanged()"
+    v-non-collapsing>
     <div
       :id="editorId"
       class="code-area"
@@ -18,11 +20,13 @@ import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { CodeBuilderFactory } from '@/application/Context/State/Code/Generation/CodeBuilderFactory';
 import Responsive from '@/presentation/components/Shared/Responsive.vue';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 
 @Component({
   components: {
     Responsive,
   },
+  directives: { NonCollapsing },
 })
 export default class TheCodeArea extends StatefulVue {
   public readonly editorId = 'codeEditor';
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index 055fdc8b..a1bf7e0c 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -45,13 +45,13 @@ export default class CardList extends StatefulVue {
   public activeCategoryId?: number = null;
 
   public created() {
-    this.onOutsideOfActiveCardClicked((element) => {
-      if (hasDirective(element)) {
-        return;
-      }
-      this.activeCategoryId = null;
-    });
+    document.addEventListener('click', this.outsideClickListener);
   }
+
+  public destroyed() {
+    document.removeEventListener('click', this.outsideClickListener);
+  }
+
   public onSelected(categoryId: number, isExpanded: boolean) {
     this.activeCategoryId = isExpanded ? categoryId : undefined;
   }
@@ -64,18 +64,42 @@ export default class CardList extends StatefulVue {
   private setCategories(categories: ReadonlyArray<ICategory>): void {
     this.categoryIds = categories.map((category) => category.id);
   }
-  private onOutsideOfActiveCardClicked(callback: (clickedElement: Element) => void) {
-    const outsideClickListener = (event) => {
-      if (!this.activeCategoryId) {
-        return;
-      }
-      const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
-      if (element && !element.contains(event.target)) {
-          callback(event.target);
-      }
-    };
-    document.addEventListener('click', outsideClickListener);
+
+  private onOutsideOfActiveCardClicked(clickedElement: Element): void {
+    if (isClickable(clickedElement) || hasDirective(clickedElement)) {
+      return;
+    }
+    this.collapseAllCards();
+    if (hasDirective(clickedElement)) {
+      return;
+    }
+    this.activeCategoryId = null;
   }
+  private outsideClickListener(event: PointerEvent) {
+    if (this.areAllCardsCollapsed()) {
+        return;
+    }
+    const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
+    const target = event.target as Element;
+    if (element && !element.contains(target)) {
+      this.onOutsideOfActiveCardClicked(target);
+    }
+  }
+
+  private collapseAllCards(): void {
+    this.activeCategoryId = undefined;
+  }
+  private areAllCardsCollapsed(): boolean {
+    return !this.activeCategoryId;
+  }
+}
+
+function isClickable(element: Element) {
+  const cursorName = window.getComputedStyle(element).cursor;
+  return [ 'pointer', 'move', 'grab'].some((name) => cursorName === name)
+    || cursorName.includes('resize')
+    || [ 'onclick', 'href'].some((attributeName) => element.hasAttribute(attributeName))
+    || [ 'a', 'button'].some((tagName) => element.closest(`.${tagName}`));
 }
 
 </script>