From 490af4cbbbcf8c7917e08d85fbfa900dfc5a4da8 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 7 Sep 2023 01:50:54 +0300
Subject: [PATCH] Modal height fix on author page

---
 src/components/Author/AuthorCard/AuthorCard.tsx | 4 ++--
 src/components/Nav/Modal/Modal.module.scss      | 6 ++++++
 src/components/Nav/Modal/Modal.tsx              | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 8bd7bc79..3975b566 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -339,7 +339,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
       </div>
 
       <Show when={props.followers}>
-        <Modal variant="wide" name="followers">
+        <Modal variant="wide" name="followers" maxHeight>
           <>
             <h2>{t('Followers')}</h2>
             <div class={styles.listWrapper}>
@@ -366,7 +366,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
       </Show>
 
       <Show when={props.subscriptions}>
-        <Modal variant="wide" name="subscriptions">
+        <Modal variant="wide" name="subscriptions" maxHeight>
           <>
             <h2>{t('Subscriptions')}</h2>
             <ul class="view-switcher">
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index 6a9b655b..ac88da4f 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -74,3 +74,9 @@
 .noPadding {
   padding: 0 2rem;
 }
+
+.maxHeight {
+  display: flex;
+  flex-direction: column;
+  height: 90vh;
+}
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index c568e150..452f66cc 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -13,6 +13,7 @@ interface ModalProps {
   children: JSX.Element
   onClose?: () => void
   noPadding?: boolean
+  maxHeight?: boolean
 }
 
 export const Modal = (props: ModalProps) => {
@@ -39,7 +40,8 @@ export const Modal = (props: ModalProps) => {
         <div
           class={clsx(styles.modal, {
             [styles.narrow]: props.variant === 'narrow',
-            [styles.noPadding]: props.noPadding
+            [styles.noPadding]: props.noPadding,
+            [styles.maxHeight]: props.maxHeight
           })}
           onClick={(event) => event.stopPropagation()}
         >