From d26e373e2e4101ba6c37aee88727fa24a4bbd1ec Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Sun, 28 Apr 2024 17:43:58 +0800
Subject: [PATCH] feat: tables add responsive attributes #917

---
 ui/src/pages/Admin/Answers/index.tsx           | 3 ++-
 ui/src/pages/Admin/Plugins/Installed/index.tsx | 4 ++--
 ui/src/pages/Admin/Questions/index.tsx         | 3 ++-
 ui/src/pages/Admin/Users/index.tsx             | 9 ++++++---
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/Admin/Answers/index.tsx b/ui/src/pages/Admin/Answers/index.tsx
index ad66e3d5..42339263 100644
--- a/ui/src/pages/Admin/Answers/index.tsx
+++ b/ui/src/pages/Admin/Answers/index.tsx
@@ -76,7 +76,7 @@ const Answers: FC = () => {
   return (
     <>
       <h3 className="mb-4">{t('page_title')}</h3>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-3">
         <QueryGroup
           data={answerFilterItems}
           currentSort={curFilter}
@@ -91,6 +91,7 @@ const Answers: FC = () => {
           type="search"
           placeholder={t('filter.placeholder')}
           style={{ width: '12.25rem' }}
+          className="mt-3 mt-sm-0"
         />
       </div>
       <Table responsive>
diff --git a/ui/src/pages/Admin/Plugins/Installed/index.tsx b/ui/src/pages/Admin/Plugins/Installed/index.tsx
index 6df6d716..f1ced442 100644
--- a/ui/src/pages/Admin/Plugins/Installed/index.tsx
+++ b/ui/src/pages/Admin/Plugins/Installed/index.tsx
@@ -103,10 +103,10 @@ const Users: FC = () => {
           />
         </Stack>
       </div>
-      <Table>
+      <Table responsive>
         <thead>
           <tr>
-            <th>{t('name')}</th>
+            <th className="min-w-15">{t('name')}</th>
             <th style={{ width: '17%' }}>{t('version')}</th>
             <th style={{ width: '11%' }}>{t('status')}</th>
             {curFilter !== 'deleted' ? (
diff --git a/ui/src/pages/Admin/Questions/index.tsx b/ui/src/pages/Admin/Questions/index.tsx
index b2f4b38c..4a3c669a 100644
--- a/ui/src/pages/Admin/Questions/index.tsx
+++ b/ui/src/pages/Admin/Questions/index.tsx
@@ -74,7 +74,7 @@ const Questions: FC = () => {
   return (
     <>
       <h3 className="mb-4">{t('page_title')}</h3>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-3">
         <QueryGroup
           data={questionFilterItems}
           currentSort={curFilter}
@@ -89,6 +89,7 @@ const Questions: FC = () => {
           placeholder={t('filter.placeholder')}
           onChange={handleFilter}
           style={{ width: '12.25rem' }}
+          className="mt-3 mt-sm-0"
         />
       </div>
       <Table responsive>
diff --git a/ui/src/pages/Admin/Users/index.tsx b/ui/src/pages/Admin/Users/index.tsx
index c119e864..c8f4fab4 100644
--- a/ui/src/pages/Admin/Users/index.tsx
+++ b/ui/src/pages/Admin/Users/index.tsx
@@ -165,7 +165,7 @@ const Users: FC = () => {
   return (
     <>
       <h3 className="mb-4">{t('title')}</h3>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-3">
         <Stack direction="horizontal" gap={3}>
           <QueryGroup
             data={UserFilterKeys}
@@ -190,14 +190,17 @@ const Users: FC = () => {
           onChange={handleFilter}
           placeholder={t('filter.placeholder')}
           style={{ width: '12.25rem' }}
+          className="mt-3 mt-sm-0"
         />
       </div>
-      <Table>
+      <Table responsive>
         <thead>
           <tr>
             <th>{t('name')}</th>
             <th style={{ width: '12%' }}>{t('reputation')}</th>
-            <th style={{ width: '20%' }}>{t('email')}</th>
+            <th style={{ width: '20%' }} className="min-w-15">
+              {t('email')}
+            </th>
             <th className="text-nowrap" style={{ width: '15%' }}>
               {t('created_at')}
             </th>