diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 5ece92f..3a65539 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -15,7 +15,7 @@ jobs:
       with:
         node-version: lts/*
     - name: Install dependencies
-      run: npm install -g pnpm && pnpm install
+      run: npm install -g pnpm@9 && pnpm install
     - name: Install Playwright Browsers
       run: pnpm exec playwright install --with-deps
     - name: Run Playwright tests
diff --git a/src/components/databrowser/components/delete-key-modal.tsx b/src/components/databrowser/components/delete-key-modal.tsx
index 48a14ec..263a9de 100644
--- a/src/components/databrowser/components/delete-key-modal.tsx
+++ b/src/components/databrowser/components/delete-key-modal.tsx
@@ -55,7 +55,7 @@ export function DeleteKeyModal({
           <DialogTitle>
             {isPlural ? `Delete ${count} ${itemsLabel}` : `Delete ${itemLabel}`}
           </DialogTitle>
-          <DialogDescription className="mt-5">
+          <DialogDescription className="mt-5 break-all">
             Are you sure you want to delete{" "}
             {name ? (
               <>
diff --git a/src/components/databrowser/components/display/display-header.tsx b/src/components/databrowser/components/display/display-header.tsx
index c18a7b3..018eed1 100644
--- a/src/components/databrowser/components/display/display-header.tsx
+++ b/src/components/databrowser/components/display/display-header.tsx
@@ -35,7 +35,7 @@ export const DisplayHeader = ({
     <div className="rounded-lg">
       {/* Key title and actions */}
       <div className="flex h-[26px] items-center justify-between gap-4">
-        <h2 className="grow truncate text-sm">
+        <h2 className="min-w-0 grow truncate text-sm">
           {dataKey.trim() === "" ? (
             <span className="ml-1 text-zinc-500">(Empty Key)</span>
           ) : (
diff --git a/src/components/databrowser/components/header/index.tsx b/src/components/databrowser/components/header/index.tsx
index 6d7697d..18ba062 100644
--- a/src/components/databrowser/components/header/index.tsx
+++ b/src/components/databrowser/components/header/index.tsx
@@ -130,8 +130,8 @@ const IndexSelector = () => {
         modal={false}
       >
         <PopoverTrigger asChild>
-          <button className="flex min-w-[140px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100">
-            <span className="truncate">{index || "Select an index"}</span>
+          <button className="flex min-w-[140px] max-w-[240px] items-center justify-between gap-2 rounded-r-lg border border-zinc-300 bg-emerald-50 px-3 py-[5px] text-sm font-medium text-emerald-800 transition-colors hover:bg-emerald-100">
+            <span className="min-w-0 truncate">{index || "Select an index"}</span>
             <IconChevronDown className="size-4 shrink-0 opacity-50" />
           </button>
         </PopoverTrigger>
@@ -172,11 +172,11 @@ const IndexSelector = () => {
                       setValuesSearchIndex(idx)
                       setOpen(false)
                     }}
-                    className="flex flex-1 items-center gap-2 text-left text-sm"
+                    className="flex min-w-0 flex-1 items-center gap-2 text-left text-sm"
                   >
                     <span
                       className={cn(
-                        "flex size-5 items-center justify-center",
+                        "flex size-5 shrink-0 items-center justify-center",
                         idx === index ? "text-emerald-600" : "text-transparent"
                       )}
                     >