chore: make some widgets scrollable (like ToC)

1 files changed, 20 insertions, 0 deletions

diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
index 5854206..27d7ffd 100644
--- a/src/components/molecules/layout/widget.module.scss
+++ b/src/components/molecules/layout/widget.module.scss
@@ -1,4 +1,5 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 .widget {
   display: flex;
@@ -32,6 +33,25 @@
     }
   }
 
+  &--expanded#{&}--has-scroll {
+    @include mix.media("screen") {
+      @include mix.dimensions("lg") {
+        max-height: 95vh;
+
+        .widget__body {
+          overflow: hidden;
+        }
+
+        &:hover,
+        &:focus-within {
+          .widget__body {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
+
   &--expanded & {
     &__body {
       max-height: 10000px; // needs a fixed value for transition.