fix: update min height of modals

#22 #29
prinsss · Jun 16, 2024 · 2d284b5 · 2d284b5
1 parent e4d6aa2
commit 2d284b5
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
         )}