Skip to content

Fix search modal layout - add missing CSS classes#17

Merged
brunoborges merged 2 commits intomainfrom
copilot/fix-search-modal-layout
Feb 17, 2026
Merged

Fix search modal layout - add missing CSS classes#17
brunoborges merged 2 commits intomainfrom
copilot/fix-search-modal-layout

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 17, 2026

The search modal HTML referenced three CSS classes that didn't exist in the stylesheet, causing the ESC badge and keyboard shortcuts footer to render unstyled.

Changes

  • .search-input-wrap - Flexbox container for horizontal layout of search icon, input, and ESC badge
  • .search-esc - Badge styling with border, background, and typography for the ESC indicator
  • .search-footer - Footer layout with styled <kbd> elements for keyboard hints (↑↓, ↵, esc)

Before / After

Before: ESC text and keyboard shortcuts displayed outside modal, completely unstyled

Broken layout

After: All elements properly contained and styled within modal

Fixed layout

Technical Notes

The HTML template (templates/index.html) was already correct - only CSS was missing. Site regenerated with java -jar html-generators/generate.jar to propagate changes.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • github-production-user-asset-6210df.s3.amazonaws.com
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>Search modal layout is broken</issue_title>
<issue_description>
See image - CSS Magic needs to be done.

Image</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: brunoborges <129743+brunoborges@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix broken layout of search modal in CSS Fix search modal layout - add missing CSS classes Feb 17, 2026
Copilot AI requested a review from brunoborges February 17, 2026 12:15
@brunoborges brunoborges marked this pull request as ready for review February 17, 2026 12:32
@brunoborges brunoborges merged commit eb7c9bf into main Feb 17, 2026
@brunoborges brunoborges deleted the copilot/fix-search-modal-layout branch February 26, 2026 01:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Search modal layout is broken

2 participants