fix: better responsive design

Fixes #2 #4
prinsss · Mar 14, 2024 · 0b5340d · 0b5340d
1 parent 7b707d9
commit 0b5340d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/components/common.tsx b/src/components/common.tsx
@@ -77,7 +77,7 @@ export function Modal({
 
   return (
     <dialog class="modal modal-open" open>
-      <div class={cx('modal-box p-3', className)}>
+      <div class={cx('modal-box p-3 flex flex-col', className)}>
         <header class="flex items-center h-9 mb-2">
           <div
             onClick={onClose}

diff --git a/src/components/modals/export-media.tsx b/src/components/modals/export-media.tsx
@@ -83,7 +83,7 @@ export function ExportMediaModal<T>({
       onClose={onClose}
     >
       {/* Modal content. */}
-      <div class="px-4 text-base">
+      <div class="px-4 text-base overflow-y-scroll overscroll-none">
         <p class="text-base-content text-opacity-60 leading-5 text-sm">
           Download and save media files from captured data. This may take a while depending on the
           amount of data. Media that will be downloaded includes: profile images, profile banners
@@ -143,7 +143,7 @@ export function ExportMediaModal<T>({
           </div>
         </div>
         {/* Media list preview. */}
-        <div class="my-3 max-h-60 overflow-scroll overscroll-none">
+        <div class="my-3 overflow-x-scroll">
           <table class="table table-xs table-zebra">
             <thead>
               <tr>
@@ -192,13 +192,13 @@ export function ExportMediaModal<T>({
             value={(currentProgress / (totalProgress || 1)) * 100}
             max="100"
           />
-          <span class="text-sm leading-none mt-2 text-base-content text-opacity-60">
+          <span class="text-sm h-2 leading-none mt-2 text-base-content text-opacity-60">
             {`${currentProgress}/${mediaList.length}`}
           </span>
         </div>
       </div>
       {/* Action buttons. */}
-      <div class="flex space-x-2">
+      <div class="flex space-x-2 mt-2">
         <span class="flex-grow" />
         <button class="btn" onClick={onClose}>
           Cancel

diff --git a/src/components/table/table-view.tsx b/src/components/table/table-view.tsx
@@ -85,7 +85,7 @@ export function TableView<T>({ title, recordsSignal, isTweet }: TableViewProps<T
     <>
       <SearchArea defaultValue={table.getState().globalFilter} onChange={table.setGlobalFilter} />
       {/* Data view. */}
-      <main class="max-w-full h-[600px] overflow-scroll bg-base-200 overscroll-none">
+      <main class="max-w-full grow overflow-scroll bg-base-200 overscroll-none">
         <table class="table table-pin-rows table-border-bc table-padding-sm">
           <thead>
             {table.getHeaderGroups().map((headerGroup) => (