Skip to content

Comments

Redesign cluster search as collapsible sidebar#650

Merged
LukasWallrich merged 3 commits intocopilot/make-cluster-page-searchablefrom
copilot/sub-pr-616
Feb 18, 2026
Merged

Redesign cluster search as collapsible sidebar#650
LukasWallrich merged 3 commits intocopilot/make-cluster-page-searchablefrom
copilot/sub-pr-616

Conversation

Copy link
Contributor

Copilot AI commented Feb 18, 2026

The previous inline search results box blocked the main content, preventing users from navigating to cluster tabs. Search results displayed in a sticky container that grew large enough to hide all cluster content below.

Changes

Replaced inline search with collapsible left sidebar:

  • Toggle button fixed to left edge (200px from top, z-index 1000)
  • 350px sidebar slides in/out with CSS transitions (left: -350px → 0)
  • Sidebar contains search input, results summary, and scrollable result cards
  • Full viewport height with independent scroll

Result display:

  • Compact cards: tab name + badge, cluster name, highlighted snippet
  • Active state uses inset box-shadow (prevents layout shift)
  • Click navigates to cluster tab, sidebar remains open
  • Auto-focuses search input on open

Interaction:

  • Toggle button, close button (X), ESC key all control sidebar
  • Enter key triggers search
  • Clear button shown only when results exist

Responsive:

  • Desktop: 350px sidebar
  • Mobile (<768px): 100% width sidebar

Example Structure

// Before: sticky container inserted after intro section
const searchContainer = document.createElement('div');
searchContainer.className = 'cluster-search-container';
introSection.parentNode.insertBefore(searchContainer, introSection.nextSibling);

// After: fixed sidebar at body start
const sidebar = document.createElement('div');
sidebar.innerHTML = `
  <button class="cluster-search-toggle">...</button>
  <div class="cluster-search-panel">
    <div class="cluster-search-header">...</div>
    <div class="cluster-search-body">...</div>
  </div>
`;
document.body.insertBefore(sidebar, document.body.firstChild);

CSS handles visibility via panel.classList.toggle('open') which transitions left property.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 2 commits February 18, 2026 16:25
Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>
…ayout shift

Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>
Copilot AI changed the title [WIP] Implement search functionality for cluster page Redesign cluster search as collapsible sidebar Feb 18, 2026
Copilot AI requested a review from LukasWallrich February 18, 2026 16:32
@LukasWallrich LukasWallrich marked this pull request as ready for review February 18, 2026 16:35
@LukasWallrich LukasWallrich requested a review from a team as a code owner February 18, 2026 16:35
@github-actions
Copy link
Contributor

✅ Spell Check Passed

No spelling issues found in this PR! 🎉

@github-actions
Copy link
Contributor

👍 All image files/references (if any) are in webp format, in line with our policy.

@LukasWallrich LukasWallrich merged commit 1066ec6 into copilot/make-cluster-page-searchable Feb 18, 2026
2 checks passed
@LukasWallrich LukasWallrich deleted the copilot/sub-pr-616 branch February 18, 2026 16:49
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.

2 participants