1 files changed, 56 insertions, 57 deletions
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
index 058d805..2d6199b 100644
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
+++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
@@ -47,12 +47,12 @@
 
 .body {
   width: 100%;
-  margin: 0;
-  overflow-y: auto;
+  max-height: 0;
+  margin: 0 0 fun.convert-px(-6); // collapse borders
+  overflow-y: hidden;
   visibility: hidden;
-  opacity: 0;
-  height: 0;
-  transition: all 0.5s ease-in-out 0s;
+  transition: max-height 0.5s linear 0s, margin 0.3s ease-in-out 0.3s,
+    visibility 0.1s linear 0.6s;
 
   &--borders {
     border: fun.convert-px(2) solid var(--color-primary-dark);
@@ -70,6 +70,42 @@
   }
 }
 
+.wrapper {
+  --header-height: #{fun.convert-px(65)};
+
+  display: flex;
+  flex-flow: column;
+  height: max-content;
+  max-height: 100%;
+
+  &--expanded {
+    .icon::before {
+      height: 0;
+    }
+
+    .body {
+      max-height: 100%;
+      margin: var(--spacing-sm) 0;
+      overflow-y: visible;
+      visibility: visible;
+      transition: visibility 0.1s linear 0s, max-height 0.6s ease-in 0s,
+        margin 0.2s ease-in-out 0s;
+    }
+  }
+}
+
+.wrapper--expanded.wrapper--toc {
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      max-height: 100vh;
+
+      .body {
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
 .header {
   flex: 0 0 auto;
   display: flex;
@@ -81,66 +117,29 @@
   min-height: var(--header-height);
   position: sticky;
   top: 0;
+  z-index: 3;
   background: var(--color-bg);
   border: none;
+  border-top: fun.convert-px(2) solid var(--color-primary-dark);
   border-bottom: fun.convert-px(2) solid var(--color-primary-dark);
   cursor: pointer;
   transition: background 0.2s ease-in-out 0s;
 
-  > button {
-    padding: 0 var(--spacing-xs);
-  }
-}
-
-.wrapper--expanded .icon {
-  &::before {
-    height: 0;
-  }
-}
-
-.header:hover,
-.header:focus {
-  .icon {
-    background: var(--color-primary-light);
-    color: var(--color-fg-inverted);
-    transform: scale(1.2);
-
-    &::before,
-    &::after {
-      background: var(--color-bg);
-    }
-  }
-}
-
-.wrapper {
-  --header-height: #{fun.convert-px(65)};
-
-  display: flex;
-  flex-flow: column;
-  min-height: var(--header-height);
-  position: relative;
-  overflow-y: hidden;
-
-  &:first-of-type {
-    .header {
-      border-top: fun.convert-px(2) solid var(--color-primary-dark);
-    }
-  }
-}
-
-.wrapper--expanded {
-  ~ .wrapper {
-    .header {
-      border-top: fun.convert-px(2) solid var(--color-primary-dark);
+  &:hover,
+  &:focus {
+    .icon {
+      background: var(--color-primary-light);
+      color: var(--color-fg-inverted);
+      transform: scale(1.2);
+
+      &::before,
+      &::after {
+        background: var(--color-bg);
+      }
     }
   }
 
-  .body {
-    visibility: visible;
-    opacity: 1;
-    min-height: inherit;
-    height: 100%;
-    margin: var(--spacing-sm) 0;
-    transition: all 0.45s ease-in-out 0s;
+  > button {
+    padding: 0 var(--spacing-xs);
   }
 }