Fix search button breakpoints

rucio · Oct 9, 2024 · 9a82a2e · 9a82a2e
1 parent 56aedf1
commit 9a82a2e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/component-library/features/search/DIDSearchPanel.tsx b/src/component-library/features/search/DIDSearchPanel.tsx
@@ -134,7 +134,7 @@ export const DIDSearchPanel = (props: SearchPanelProps) => {
                     />
                 </div>
             </div>
-            <SearchButton isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
+            <SearchButton className="sm:w-full md:w-48" isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
         </div>
     );
 };
diff --git a/src/component-library/features/search/SearchButton.tsx b/src/component-library/features/search/SearchButton.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
 import { HiPlay, HiStop } from 'react-icons/hi';
 import { IconButton } from '@/component-library/features/search/IconButton';
+import { cn } from '@/component-library/utils';
 
 interface SearchButtonProps {
     isRunning: boolean;
     onStop: (event: any) => void;
     onSearch: (event: any) => void;
+    className?: string;
 }
 
-export const SearchButton: React.FC<SearchButtonProps> = ({ isRunning, onSearch, onStop }) => {
+export const SearchButton: React.FC<SearchButtonProps> = ({ isRunning, onSearch, onStop, className }) => {
     return (
         <IconButton
-            className="sm:w-full md:w-48"
+            className={cn('w-full sm:w-48', className)}
             icon={isRunning ? <HiStop className="text-xl" /> : <HiPlay className="text-xl" />}
             onClick={isRunning ? onStop : onSearch}
             variant={isRunning ? 'error' : 'success'}
-Original file line number
+Diff line change
@@ Expand Up @@
                         />
                     </div>
                 </div>
-                <SearchButton isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
+                <SearchButton className="sm:w-full md:w-48" isRunning={props.isRunning} onStop={onStop} onSearch={onSearch} />
             </div>
         );
     };