feat: tables add responsive attributes #917

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>

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' ? (

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>

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>