perf‌(group & symbol select): styles change

src/locales/en_US/pages.ts

@@ -145,8 +145,8 @@ export default {
   'pages.rules.allSymbols': 'All Symbols',
   'pages.rules.allAssets': 'All Assets',
   'pages.rules.searchResults': 'Search results',
-  'pages.rules.selectSearchResults': 'Select results',
+  'pages.rules.selectSearchResults': 'Select',
-  'pages.rules.deselectSearchResults': 'Deselect results',
+  'pages.rules.deselectSearchResults': 'Deselect',
   'pages.rules.trigger': 'Triggered',
   'pages.rules.triggeredCount': 'Times',
   'pages.rules.disable': 'Disable',

src/pages/rules/components/GroupSelect.tsx

@@ -158,23 +158,18 @@ const GroupSelect: React.FC<GroupSelectProps> = ({
                     padding: '8px 12px',
                   }}
                   onMouseDown={(event) => event.preventDefault()}
+                  className="flex justify-between"
                 >
-                  <Space wrap size={8} className="justify-between w-100">
                   <Typography.Text type="secondary">
-                      {$t('pages.rules.searchResults')}:{' '}
+                    {$t('pages.rules.searchResults')}: {searchResultKeys.length}
-                      {searchResultKeys.length}
                   </Typography.Text>
-                    <div>
+                  <Space wrap size={8}>
                     <Button size="small" onClick={handleSelectSearchResults}>
                       {$t('pages.rules.selectSearchResults')}
                     </Button>
-                      <Button
+                    <Button size="small" onClick={handleDeselectSearchResults}>
-                        size="small"
-                        onClick={handleDeselectSearchResults}
-                      >
                       {$t('pages.rules.deselectSearchResults')}
                     </Button>
-                    </div>
                   </Space>
                 </div>
                 {originNode}

src/pages/rules/components/SymbolSelect.tsx

@@ -157,23 +157,18 @@ const SymbolSelect: React.FC<SymbolSelectProps> = ({
                     padding: '8px 12px',
                   }}
                   onMouseDown={(event) => event.preventDefault()}
+                  className="flex justify-between"
                 >
-                  <Space wrap size={8} className="justify-between w-100">
+                  <Typography.Text type="secondary">
-                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                    {$t('pages.rules.searchResults')}: {searchResultKeys.length}
-                      {$t('pages.rules.searchResults')}:{' '}
-                      {searchResultKeys.length}
                   </Typography.Text>
-                    <div>
+                  <Space wrap size={8}>
                     <Button size="small" onClick={handleSelectSearchResults}>
                       {$t('pages.rules.selectSearchResults')}
                     </Button>
-                      <Button
+                    <Button size="small" onClick={handleDeselectSearchResults}>
-                        size="small"
-                        onClick={handleDeselectSearchResults}
-                      >
                       {$t('pages.rules.deselectSearchResults')}
                     </Button>
-                    </div>
                   </Space>
                 </div>
                 {originNode}