fix query bar spacing bug (#2247)

* fix query bar spacing bug * formatting changes
parca-dev · Dec 8, 2022 · 31d47ba · 31d47ba
1 parent 3a25a9f
commit 31d47ba
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 42 deletions.
diff --git a/ui/packages/shared/components/src/Select/index.tsx b/ui/packages/shared/components/src/Select/index.tsx
@@ -66,7 +66,7 @@ const Select = ({
               <Listbox.Button
                 className={cx(
                   width !== undefined ? `w-${width}` : '',
-                  'relative bg-gray-50 dark:bg-gray-900 border-t border-r border-b border-l dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-sm w-[270px]',
+                  'relative bg-gray-50 dark:bg-gray-900 border-t border-r border-b border-l dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-sm',
                   {[className]: className.length > 0}
                 )}
               >

diff --git a/ui/packages/shared/profile/src/MatchersInput/index.tsx b/ui/packages/shared/profile/src/MatchersInput/index.tsx
@@ -192,7 +192,7 @@ const MatchersInput = ({
   const profileSelected = currentQuery.profileName() === '';
 
   return (
-    <div className="font-mono flex-1 w-full block">
+    <div className="font-mono flex-1 w-full min-w-[300px]">
       <TextareaAutosize
         ref={inputRef}
         className={cx(

diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx
@@ -29,7 +29,6 @@ import {
   useGrpcMetadata,
 } from '@parca/components';
 import {CloseIcon} from '@parca/icons';
-import cx from 'classnames';
 import ProfileTypeSelector from '../ProfileTypeSelector/index';
 
 export interface QuerySelection {
@@ -179,53 +178,54 @@ const ProfileSelector = ({
 
   return (
     <Card>
-      <Card.Header className={cx(comparing && 'overflow-x-scroll')}>
-        <div className="flex space-x-4">
-          {comparing && (
-            <button type="button" onClick={() => closeProfile()}>
-              <CloseIcon />
-            </button>
-          )}
-          <ProfileTypeSelector
-            profileTypesData={profileTypesData}
-            loading={profileTypesLoading}
-            selectedKey={selectedProfileName}
-            onSelection={setProfileName}
-            error={error}
-          />
-          <MatchersInput
-            queryClient={queryClient}
-            setMatchersString={setMatchersString}
-            runQuery={setQueryExpression}
-            currentQuery={query}
-          />
+      <Card.Header className="flex space-x-2">
+        <div className="flex flex-wrap w-full justify-start space-x-2 space-y-1">
+          <div className="ml-2 mt-1">
+            <ProfileTypeSelector
+              profileTypesData={profileTypesData}
+              loading={profileTypesLoading}
+              selectedKey={selectedProfileName}
+              onSelection={setProfileName}
+              error={error}
+            />
+          </div>
+          <div className="w-full flex-1">
+            <MatchersInput
+              queryClient={queryClient}
+              setMatchersString={setMatchersString}
+              runQuery={setQueryExpression}
+              currentQuery={query}
+            />
+          </div>
           <DateTimeRangePicker
             onRangeSelection={setTimeRangeSelection}
             range={timeRangeSelection}
           />
-          {searchDisabled ? (
-            <div>
-              <Button disabled={true}>Search</Button>
-            </div>
-          ) : (
-            <>
-              <ButtonGroup style={{marginRight: 5}}>
+          <ButtonGroup>
+            {!searchDisabled && (
+              <>
                 <MergeButton disabled={mergeDisabled} onClick={setMergedSelection} />
                 {!comparing && (
                   <CompareButton disabled={compareDisabled} onClick={handleCompareClick} />
                 )}
-              </ButtonGroup>
-              <div>
-                <Button
-                  onClick={(e: React.MouseEvent<HTMLElement>) => {
-                    e.preventDefault();
-                    setQueryExpression();
-                  }}
-                >
-                  Search
-                </Button>
-              </div>
-            </>
+              </>
+            )}
+            <Button
+              disabled={searchDisabled}
+              onClick={(e: React.MouseEvent<HTMLElement>) => {
+                e.preventDefault();
+                setQueryExpression();
+              }}
+            >
+              Search
+            </Button>
+          </ButtonGroup>
+        </div>
+        <div>
+          {comparing && (
+            <button type="button" onClick={() => closeProfile()}>
+              <CloseIcon />
+            </button>
           )}
         </div>
       </Card.Header>