Make the layout of the search cancel button flexible

apps/docs/src/components/override-components/Search.astro

@@ -36,7 +36,7 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
   </button>
 
   <dialog style="padding:0" aria-label={Astro.locals.t("search.label")}>
-    <div class="dialog-frame sl-flex">
+    <div class="dialog-frame">
       {
         /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
       }
@@ -264,17 +264,18 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
     .dialog-frame {
       position: relative;
       overflow: auto;
-      flex-direction: column;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-areas: "search cancel" "results results";
       flex-grow: 1;
       gap: 1rem;
       padding: 1rem;
     }
 
     button[data-close-modal] {
-      position: absolute;
+      grid-area: cancel;
       z-index: 1;
       align-items: center;
-      align-self: flex-end;
       height: calc(64px * var(--pagefind-ui-scale));
       padding: 0.25rem;
       border: 0;
@@ -283,6 +284,12 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
       color: var(--sl-color-text-accent);
     }
 
+    .search-container,
+    #starlight__search,
+    #starlight__search .pagefind-ui {
+      display: contents;
+    }
+
     #starlight__search {
       --pagefind-ui-primary: var(--sl-color-text);
       --pagefind-ui-text: var(--sl-color-gray-2);
@@ -291,18 +298,13 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
       --pagefind-ui-border: var(--sl-color-gray-5);
       --pagefind-ui-border-width: 1px;
       --pagefind-ui-tag: var(--sl-color-gray-5);
-      --sl-search-cancel-space: 5rem;
     }
 
     :root[data-theme="light"] #starlight__search {
       --pagefind-ui-tag: var(--sl-color-gray-6);
     }
 
     @media (min-width: 50rem) {
-      #starlight__search {
-        --sl-search-cancel-space: 0px;
-      }
-
       dialog {
         margin: 4rem auto auto;
         border-radius: 0.5rem;
@@ -315,6 +317,8 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
 
       .dialog-frame {
         padding: 1.5rem;
+        grid-template-columns: 1fr;
+        grid-template-areas: "search" "results";
       }
     }
   }
@@ -357,6 +361,10 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
       );
     }
 
+    #starlight__search .pagefind-ui__form {
+      grid-area: search;
+    }
+
     #starlight__search .pagefind-ui__form::before {
       --pagefind-ui-text: var(--sl-color-gray-1);
       opacity: 1;
@@ -365,15 +373,15 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
     #starlight__search .pagefind-ui__search-input {
       color: var(--sl-color-white);
       font-weight: 400;
-      width: calc(100% - var(--sl-search-cancel-space));
+      width: 100%;
     }
 
     #starlight__search input:focus {
       --pagefind-ui-border: var(--sl-color-accent);
     }
 
     #starlight__search .pagefind-ui__search-clear {
-      inset-inline-end: var(--sl-search-cancel-space);
+      inset-inline-end: 0;
       width: calc(60px * var(--pagefind-ui-scale));
       padding: 0;
       background-color: transparent;
@@ -394,6 +402,10 @@ if ((project as { trailingSlash?: string })?.trailingSlash === 'never')
       height: 100%;
     }
 
+    #starlight__search .pagefind-ui__results {
+      grid-area: results;
+    }
+
     #starlight__search .pagefind-ui__results > * + * {
       margin-top: var(--sl-search-result-spacing);
     }

apps/docs/tests/verify-search.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Search Cancel Button Layout', () => {
+  test('should have flexible cancel button on mobile', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto('/');
+
+    const searchButton = page.locator('button[data-open-modal]');
+    await searchButton.click();
+
+    const dialog = page.locator('dialog');
+    await expect(dialog).toBeVisible();
+
+    const cancelButton = page.locator('button[data-close-modal]');
+    await expect(cancelButton).toBeVisible();
+
+    // Check original width
+    const originalBox = await cancelButton.boundingBox();
+    console.log(`Original cancel button width: ${originalBox?.width}`);
+
+    // Inject a long label
+    await cancelButton.evaluate(node => {
+      node.textContent = 'Moc dlouhé tlačítko pro zrušení';
+    });
+
+    const newBox = await cancelButton.boundingBox();
+    console.log(`New cancel button width: ${newBox?.width}`);
+
+    expect(newBox?.width).toBeGreaterThan(originalBox?.width || 0);
+
+    await page.screenshot({ path: 'search-modal-mobile-long-cancel.png' });
+  });
+
+  test('should look correct on desktop', async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 800 });
+    await page.goto('/');
+
+    const searchButton = page.locator('button[data-open-modal]');
+    await searchButton.click();
+
+    const dialog = page.locator('dialog');
+    await expect(dialog).toBeVisible();
+
+    const cancelButton = page.locator('button[data-close-modal]');
+    await expect(cancelButton).toBeHidden(); // Hidden on desktop in original code (md:sl-hidden)
+
+    await page.screenshot({ path: 'search-modal-desktop.png' });
+  });
+});