From a26aae634854a28775b673d9140b06a83fd088a1 Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Mon, 25 Nov 2024 10:31:38 +0800
Subject: [PATCH] fix: Optimize the mobile style of QueryGroup component

---
 ui/src/components/QueryGroup/index.scss | 16 ++++++++++++++++
 ui/src/components/QueryGroup/index.tsx  | 10 +++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/components/QueryGroup/index.scss

diff --git a/ui/src/components/QueryGroup/index.scss b/ui/src/components/QueryGroup/index.scss
new file mode 100644
index 000000000..9ab5b36d1
--- /dev/null
+++ 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
index 7f6a0f3ea..52fca6166 100644
--- 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;