few small tweaks

marhaupe · Sep 6, 2024 · 5a1ac6b · 5a1ac6b
1 parent 501d498
commit 5a1ac6b
Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/backlog.md b/backlog.md
@@ -4,3 +4,4 @@ Features:
 - Restart session (need to prototype this, maybe we need to change the API, e.g. uitail "nx run website:serve")
 - filter out messages
 - figure out what to do with the histogram
+- fix flicker when typing
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -111,6 +111,7 @@ export function App() {
             ref={searchInputRef}
             onFilterStateChange={(query) => setFilterState(query)}
           />
+          <div className="h-2" />
           <LogList ref={logListRef} logs={logs} />
         </Card>
       </div>

diff --git a/packages/frontend/src/SearchBar.tsx b/packages/frontend/src/SearchBar.tsx
@@ -73,20 +73,24 @@ export const SearchQueryBuilder = forwardRef(function SearchQueryBuilder(
             {...register("message")}
             id="message-input"
             placeholder="Filter ('/')"
+            className="font-mono text-xs"
           />
           <div className="absolute top-0 right-0">
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger>
-                  <Toggle
-                    aria-label="Match case"
-                    pressed={watch("caseInsensitive")}
-                    onPressedChange={(pressed) =>
-                      setValue("caseInsensitive", pressed)
-                    }
-                  >
-                    Aa
-                  </Toggle>
+                <TooltipTrigger asChild>
+                  {/* Hack to not have two nested buttons. Removing `asChild` does not fix it. */}
+                  <span>
+                    <Toggle
+                      aria-label="Match case"
+                      pressed={watch("caseInsensitive")}
+                      onPressedChange={(pressed) =>
+                        setValue("caseInsensitive", pressed)
+                      }
+                    >
+                      Aa
+                    </Toggle>
+                  </span>
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>Match case</p>