chore: make some widgets scrollable (like ToC)

3 files changed, 28 insertions, 1 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.
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
index feb2add..f50fe80 100644
--- a/src/components/molecules/layout/widget.tsx
+++ b/src/components/molecules/layout/widget.tsx
@@ -20,6 +20,10 @@ export type WidgetProps = Pick<
    * Determine if the widget body should have borders. Default: false.
    */
   withBorders?: boolean;
+  /**
+   * Determine if a vertical scrollbar should be displayed. Default: false.
+   */
+  withScroll?: boolean;
 };
 
 /**
@@ -34,16 +38,18 @@ const Widget: FC<WidgetProps> = ({
   level,
   title,
   withBorders = false,
+  withScroll = false,
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
   const stateClass = isExpanded ? 'widget--expanded' : 'widget--collapsed';
   const bordersClass = withBorders
     ? 'widget--has-borders'
     : 'widget--no-borders';
+  const scrollClass = withScroll ? 'widget--has-scroll' : 'widget--no-scroll';
 
   return (
     <div
-      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${className}`}
+      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`}
     >
       <HeadingButton
         level={level}
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 3f291e3..90dae4a 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -69,6 +69,7 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
       expanded={true}
       withBorders={true}
       className={styles.widget}
+      withScroll={true}
       {...props}
     >
       <List