[PR #262] [MERGED] Fix GraphQL doc explorer CountBadge stacking order #188

Closed
opened 2025-12-29 08:31:58 +01:00 by adam · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/mountain-loop/yaak/pull/262
Author: @kiendang
Created: 10/7/2025
Status: Merged
Merged: 10/18/2025
Merged by: @gschier

Base: mainHead: fix-graphql-explorer-count-badge


📝 Commits (1)

  • 0a9c704 Fix GraphQL doc explorer CountBadge stacking order

📊 Changes

1 file changed (+1 additions, -1 deletions)

View changed files

📝 src-web/components/graphql/GraphQLDocsExplorer.tsx (+1 -1)

📄 Description

Fix the issue where the GraphQL doc explorer CountBadge appearing over the search dropdown menu

Reproduction

  1. Run any GraphQL query with documentation/introspection available, e.g https://graphql.org/graphql/ with the query
    query MyQuery {
      allPlanets(last: 10, first: 10, before: "") {
        totalCount
      }
    }
    
  2. Open documentation, click on Search

The All Schema Types CountBadge would appear over the Search dropdown.
countbadge-issue

This is due to the CountBadge has opacity < 1, set by opacity-70
485a9ea47c/src-web/components/core/CountBadge.tsx (L16)
This creates a new stacking context, making it drawn over the nav children. To check, remove opacity-70, the CountBadge would disappear under the dropdown menu.

Adding z-10 to the nav fixes this while keeping opacity-70 for the CountBadge.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/mountain-loop/yaak/pull/262 **Author:** [@kiendang](https://github.com/kiendang) **Created:** 10/7/2025 **Status:** ✅ Merged **Merged:** 10/18/2025 **Merged by:** [@gschier](https://github.com/gschier) **Base:** `main` ← **Head:** `fix-graphql-explorer-count-badge` --- ### 📝 Commits (1) - [`0a9c704`](https://github.com/mountain-loop/yaak/commit/0a9c704ad5312f0ed632a8dfe575491cb50add73) Fix GraphQL doc explorer CountBadge stacking order ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `src-web/components/graphql/GraphQLDocsExplorer.tsx` (+1 -1) </details> ### 📄 Description Fix the issue where the GraphQL doc explorer CountBadge appearing over the search dropdown menu Reproduction 1. Run any GraphQL query with documentation/introspection available, e.g `https://graphql.org/graphql/` with the query ```graphql query MyQuery { allPlanets(last: 10, first: 10, before: "") { totalCount } } ``` 2. Open documentation, click on Search The All Schema Types CountBadge would appear over the Search dropdown. <img width="1080" height="239" alt="countbadge-issue" src="https://github.com/user-attachments/assets/91e4f999-5d1e-4989-9716-1b3f7459b1f2" /> This is due to the CountBadge has opacity < 1, set by `opacity-70` https://github.com/mountain-loop/yaak/blob/485a9ea47c3ca98196706136bd8827cdbe7e888c/src-web/components/core/CountBadge.tsx#L16 This creates a new stacking context, making it drawn over the `nav` children. To check, remove `opacity-70`, the CountBadge would disappear under the dropdown menu. Adding `z-10` to the `nav` fixes this while keeping `opacity-70` for the CountBadge. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2025-12-29 08:31:58 +01:00
adam closed this issue 2025-12-29 08:31:59 +01:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/yaak-mountain-loop#188