From e00c6f2c140962f0007e2a16c6b2fd4408192d68 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sat, 9 Nov 2024 16:59:00 -0500
Subject: [PATCH] add min width for delete button, dropdown dakrtheme

---
 frontend/src/components/DocumentPagination.tsx | 2 +-
 frontend/src/index.css                         | 2 +-
 frontend/src/settings/Documents.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index b5d82456..3edeff9d 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -48,7 +48,7 @@ const Pagination: React.FC<PaginationProps> = ({
         <select
           value={rowsPerPage}
           onChange={(e) => onRowsPerPageChange(Number(e.target.value))}
-          className="border border-gray-300 rounded px-2 py-1"
+          className="border border-gray-300 rounded px-2 py-1 dark:bg-transparent dark:text-gray-50"
         >
           {rowsPerPageOptions.map((option) => (
             <option key={option} value={option}>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1c72035e..6de42c24 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -50,7 +50,7 @@ body.dark {
 
 @layer components {
   .table-default {
-    @apply block w-full mx-auto table-fixed content-start justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
+    @apply block w-full mx-auto table-auto content-start justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
   }
 
   .table-default th {
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 70cc86ba..26af09d5 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -199,7 +199,7 @@ const Documents: React.FC<DocumentsProps> = ({ handleDeleteDocument }) => {
                         {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
                       </td>
                       <td>
-                        <div className="flex flex-row items-center">
+                        <div className="min-w-[70px] flex flex-row items-end justify-end ml-auto">
                           {document.type !== 'remote' && (
                             <img
                               src={Trash}