fix: style adjustment

ui/src/components/QueryGroup/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   sortKey?: string;
   className?: string;
   pathname?: string;
+  wrapClassName?: string;
 }
 const MAX_BUTTON_COUNT = 3;
 const Index: FC<Props> = ({
@@ -21,6 +22,7 @@ const Index: FC<Props> = ({
   i18nKeyPrefix = '',
   className = '',
   pathname = '',
+  wrapClassName = '',
 }) => {
   const [searchParams, setUrlSearchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -51,7 +53,7 @@ const Index: FC<Props> = ({
     return (typeof btn === 'string' ? btn : btn.name) === currentSort;
   });
   return (
-    <ButtonGroup size="sm">
+    <ButtonGroup size="sm" className={wrapClassName}>
       {data.map((btn, index) => {
         const key = typeof btn === 'string' ? btn : btn.sort;
         const name = typeof btn === 'string' ? btn : btn.name;
@@ -62,7 +64,7 @@ const Index: FC<Props> = ({
             variant="outline-secondary"
             active={currentSort === name}
             className={classNames(
-              'text-capitalize',
+              'text-capitalize fit-content',
               data.length > MAX_BUTTON_COUNT &&
                 index > MAX_BUTTON_COUNT - 2 &&
                 'd-none d-md-block',

ui/src/components/QuestionList/index.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Row, Col, ListGroup } from 'react-bootstrap';
+import { ListGroup } from 'react-bootstrap';
 import { NavLink, useParams, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -103,23 +103,19 @@ const QuestionList: FC<Props> = ({ source }) => {
 
   return (
     <div>
-      <Row className="mb-3">
-        <Col className="d-flex align-items-center">
-          <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
-            {source === 'questions'
-              ? t('all_questions')
-              : t('x_questions', { count })}
-          </h5>
-        </Col>
-        <Col>
-          <QueryGroup
-            data={QuestionOrderKeys}
-            currentSort={curOrder}
-            pathname={source === 'questions' ? '/questions' : ''}
-            i18nKeyPrefix="question"
-          />
-        </Col>
-      </Row>
+      <div className="mb-3 d-flex flex-wrap justify-content-between">
+        <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
+          {source === 'questions'
+            ? t('all_questions')
+            : t('x_questions', { count })}
+        </h5>
+        <QueryGroup
+          data={QuestionOrderKeys}
+          currentSort={curOrder}
+          pathname={source === 'questions' ? '/questions' : ''}
+          i18nKeyPrefix="question"
+        />
+      </div>
       <ListGroup variant="flush" className="border-top border-bottom-0">
         {listData?.list?.map((li) => {
           return (

ui/src/index.scss

@@ -141,6 +141,11 @@ a {
   background-color: #fff3cd80;
 }
 
+.fit-content {
+  height: fit-content;
+  flex: none;
+}
+
 // fix bug for React-Bootstrap Form.Text
 .form-text {
   display: inline-block;