From 2d284b57e9d154945c7217a045eca9d1a9b3cc89 Mon Sep 17 00:00:00 2001
From: prin <hi@prin.studio>
Date: Mon, 17 Jun 2024 01:06:44 +0800
Subject: [PATCH] fix: update min height of modals

#22 #29
---
 src/components/common.tsx              | 8 +-------
 src/components/modals/export-data.tsx  | 2 +-
 src/components/modals/export-media.tsx | 2 +-
 src/components/module-ui.tsx           | 7 ++++++-
 src/components/table/table-view.tsx    | 2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/common.tsx b/src/components/common.tsx
index f991ba6..41366f4 100644
--- a/src/components/common.tsx
+++ b/src/components/common.tsx
@@ -65,13 +65,7 @@ type ModalProps = {
 /**
  * Common template for modals.
  */
-export function Modal({
-  show,
-  onClose,
-  title,
-  children,
-  class: className = 'max-w-4xl md:max-w-screen-md sm:max-w-screen-sm',
-}: ModalProps) {
+export function Modal({ show, onClose, title, children, class: className }: ModalProps) {
   if (!show) {
     return <dialog class="modal" />;
   }
diff --git a/src/components/modals/export-data.tsx b/src/components/modals/export-data.tsx
index 45dfa9b..a09c7a2 100644
--- a/src/components/modals/export-data.tsx
+++ b/src/components/modals/export-data.tsx
@@ -86,7 +86,7 @@ export function ExportDataModal<T>({ title, table, show, onClose }: ExportDataMo
 
   return (
     <Modal
-      class="max-w-sm md:max-w-screen-sm sm:max-w-screen-sm"
+      class="max-w-sm md:max-w-screen-sm sm:max-w-screen-sm max-h-full"
       title={`${t(title as TranslationKey, title, { ns: 'common' })} ${t('Data')}`}
       show={show}
       onClose={onClose}
diff --git a/src/components/modals/export-media.tsx b/src/components/modals/export-media.tsx
index e814c23..3f868d1 100644
--- a/src/components/modals/export-media.tsx
+++ b/src/components/modals/export-media.tsx
@@ -80,7 +80,7 @@ export function ExportMediaModal<T>({
 
   return (
     <Modal
-      class="max-w-sm md:max-w-screen-sm sm:max-w-screen-sm"
+      class="max-w-sm md:max-w-screen-sm sm:max-w-screen-sm max-h-full"
       title={`${t(title as TranslationKey, title, { ns: 'common' })} ${t('Media')}`}
       show={show}
       onClose={onClose}
diff --git a/src/components/module-ui.tsx b/src/components/module-ui.tsx
index b72a8e7..97c3743 100644
--- a/src/components/module-ui.tsx
+++ b/src/components/module-ui.tsx
@@ -31,7 +31,12 @@ export function CommonModuleUI({ extension }: CommonModuleUIProps) {
       onClick={toggleShowModal}
       indicatorColor={extension.type === ExtensionType.TWEET ? 'bg-primary' : 'bg-secondary'}
     >
-      <Modal title={title} show={showModal} onClose={toggleShowModal}>
+      <Modal
+        class="max-w-4xl md:max-w-screen-md sm:max-w-screen-sm min-h-[512px]"
+        title={title}
+        show={showModal}
+        onClose={toggleShowModal}
+      >
         <TableView title={title} extension={extension} />
       </Modal>
     </ExtensionPanel>
diff --git a/src/components/table/table-view.tsx b/src/components/table/table-view.tsx
index fa6ab63..992317d 100644
--- a/src/components/table/table-view.tsx
+++ b/src/components/table/table-view.tsx
@@ -137,7 +137,7 @@ export function TableView({ title, extension }: TableViewProps) {
         </table>
         {/* Empty view. */}
         {table.getRowModel().rows.length > 0 ? null : (
-          <div class="flex items-center justify-center h-52 w-full">
+          <div class="flex items-center justify-center h-[320px] w-full">
             <p class="text-base-content text-opacity-50">{t('No data available.')}</p>
           </div>
         )}