make sure that searching doesn't make height jumps

Author: laander

packages/browser-sdk/src/toolbar/Flags.css

@@ -50,10 +50,14 @@
   }
 }
 
-.flag-empty-cell {
-  width: 100%;
+.flags-table-empty {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   color: var(--gray500);
-  padding: 6px 0;
+  padding: 12px 12px;
+  line-height: 1.5;
 }
 
 .flag-name-cell {

packages/browser-sdk/src/toolbar/Flags.tsx

@@ -1,4 +1,4 @@
-import { h } from "preact";
+import { Fragment, h } from "preact";
 
 import { Switch } from "./Switch";
 import { FlagItem } from "./Toolbar";
@@ -49,32 +49,31 @@ export function FlagsTable({
         });
 
   return (
-    <table class="flags-table" style={{ "--n": searchedFlags.length }}>
-      <tbody>
-        {(!hasFlags || !hasShownFlags) && (
-          <tr>
-            <td class="flag-empty-cell" colSpan={3}>
-              No flags {hasFlags ? `matching "${searchQuery} "` : ""}
-              found
-            </td>
-          </tr>
-        )}
-        {searchedFlags.map((flag, index) => (
-          <FlagRow
-            key={flag.flagKey}
-            appBaseUrl={appBaseUrl}
-            flag={flag}
-            index={index}
-            isNotVisible={
-              searchQuery !== null && !isFound(flag.flagKey, searchQuery)
-            }
-            setEnabledOverride={(override) =>
-              setIsEnabledOverride(flag.flagKey, override)
-            }
-          />
-        ))}
-      </tbody>
-    </table>
+    <Fragment>
+      {(!hasFlags || !hasShownFlags) && (
+        <div class="flags-table-empty">
+          No flags {hasFlags ? `matching "${searchQuery}"` : "found"}
+        </div>
+      )}
+      <table class="flags-table">
+        <tbody>
+          {searchedFlags.map((flag, index) => (
+            <FlagRow
+              key={flag.flagKey}
+              appBaseUrl={appBaseUrl}
+              flag={flag}
+              index={index}
+              isNotVisible={
+                searchQuery !== null && !isFound(flag.flagKey, searchQuery)
+              }
+              setEnabledOverride={(override) =>
+                setIsEnabledOverride(flag.flagKey, override)
+              }
+            />
+          ))}
+        </tbody>
+      </table>
+    </Fragment>
   );
 }
 

packages/browser-sdk/src/toolbar/Toolbar.css

@@ -103,7 +103,7 @@
     0 0 0 1px var(--border-color);
   border-radius: 7px;
   z-index: 999999;
-  min-width: 220px;
+  min-width: 240px;
   padding: 0;
 
   --visible-flags: 15;
@@ -127,6 +127,7 @@
 
   &::-webkit-scrollbar {
     width: 8px;
+    height: 8px;
   }
   &::-webkit-scrollbar-track {
     background: transparent;

packages/browser-sdk/src/ui/Dialog.css

@@ -125,5 +125,6 @@
 }
 
 .dialog-content {
+  position: relative;
   padding: 7px 12px;
 }