fix: Optimize the mobile style of QueryGroup component

apache · Nov 25, 2024 · a26aae6 · a26aae6
1 parent 7fefc67
commit a26aae6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/ui/src/components/QueryGroup/index.scss b/ui/src/components/QueryGroup/index.scss
@@ -0,0 +1,16 @@
+.md-show {
+  display: flex !important;
+}
+.md-hide {
+  display: none;
+}
+
+
+@media screen and (max-width: 768px) {
+  .md-show {
+    display: none !important;
+  }
+  .md-hide {
+    display: block;
+  }
+}
diff --git a/ui/src/components/QueryGroup/index.tsx b/ui/src/components/QueryGroup/index.tsx
@@ -27,6 +27,8 @@ import classNames from 'classnames';
 import { REACT_BASE_PATH } from '@/router/alias';
 import { floppyNavigation } from '@/utils';
 
+import './index.scss';
+
 interface Props {
   data;
   i18nKeyPrefix: string;
@@ -80,9 +82,7 @@ const Index: FC<Props> = ({
 
   return (
     <>
-      <ButtonGroup
-        size="sm"
-        className={classNames('d-none d-sm-block', wrapClassName)}>
+      <ButtonGroup size="sm" className={classNames('md-show', wrapClassName)}>
         {normalBtnData.map((btn) => {
           const key = typeof btn === 'string' ? btn : btn.sort;
           const name = typeof btn === 'string' ? btn : btn.name;
@@ -132,8 +132,8 @@ const Index: FC<Props> = ({
       </ButtonGroup>
       <DropdownButton
         size="sm"
-        variant="secondary"
-        className="d-block d-sm-none"
+        variant="outline-secondary"
+        className="md-hide"
         title={t(currentSort)}>
         {data.map((btn) => {
           const key = typeof btn === 'string' ? btn : btn.sort;