coral(bug): View environments: search box too small for placeholder text + edit placeholder text for clarity

[vikramsubramanian]

What happened?

The placeholder text is cut off:

What did you expect to happen?

Search box does not cut placeholder text

Additionally, the text should state clearly on what the search will match (not only env name)

[mayil-ai[bot]]

To address the issue of the search box placeholder text being cut off and to ensure the placeholder text clearly states what the search will match, follow these steps:

1. Adjust Search Box Size:

   • Modify the CSS in style.min.css to ensure the search box is large enough to display the full placeholder text.

     /* core/src/main/resources/static/assets/css/style.min.css */
     .search-box {
     width: 100%; /* Adjust width as needed */
     max-width: 400px; /* Set a reasonable max-width */
     }

2. Update Placeholder Text:

   • Edit the placeholder text in SearchFilter.tsx to provide clear instructions on what the search will match.

     // coral/src/app/features/components/filters/SearchFilter.tsx
     <SearchInput
     type={"search"}
     aria-label="Search by environment name, ID, or other attributes"
     aria-describedby={"search-field-description"}
     role="search"
     placeholder="Search by environment name, ID, or other attributes"
     defaultValue={search.toString()}
     onChange={debounce(
     (event: ChangeEvent<HTMLInputElement>) =>
      setFilterValue({
        name: "search",
        value: String(event.target.value).trim(),
      }),
     500
     )}
     className="search-box"
     />

3. Update Usage in SearchTopicFilter.tsx:

   • Ensure the updated placeholder text is used in SearchTopicFilter.tsx.

     // coral/src/app/features/components/filters/SearchTopicFilter.tsx
     function SearchTopicFilter() {
     return (
     <SearchFilter
      placeholder="Search by environment name, ID, or other attributes"
      description={`Search for a partial match for environment name, ID, or other attributes. Searching starts automatically with a little delay while typing. Press "Escape" to delete all your input.`}
     />
     );
     }

4. Verify Changes:

   • Ensure the search box displays the full placeholder text without cutting it off.
   • Confirm the placeholder text provides clear instructions on what the search will match.

Here are some code snippets that may help you get started:

• coral/src/app/features/components/filters/SearchFilter.tsx:1-38 | The placeholder text and aria-label need to be updated to provide clear instructions on what the search will match.

• core/src/main/resources/static/assets/css/style.min.css:35-35 | CSS adjustments are needed to ensure the search box is large enough to display the full placeholder text.

• core/src/main/resources/static/assets/plugins/bootstrap/css/bootstrap.css:1-10037 | This CSS snippet includes styling for form controls, including size, padding, and placeholder styling. It is necessary to review this snippet to ensure the search box size and placeholder text are styled correctly.

💡 To rerun Mayil, comment mayil-ai rerun. Mayil will incorporate any new context added to the ticket. Include details in your rerun comment to guide Mayil!