Bug Report: Breake Top navigation Dropdown Position

henryavila commented

2025-12-05 13:11:10 +00:00

(Migrated from github.com)

Problem Description

The pxlrbt/filament-environment-indicator plugin causes navigation dropdowns in the topbar to open upwards instead of downwards, pushing them off-screen.

Root Cause Analysis

Location: `EnvironmentIndicatorPlugin.php:109-125`

The plugin injects CSS that adds a border to the topbar:

$panel->renderHook('panels::styles.after', function () {
    // ...
    return new HtmlString("
        <style>
            .fi-topbar {
                border-top: {$this->evaluate($this->borderWidth)}px solid {$this->getColor()['500']} !important;
            }
        </style>
    ");
});

Why This Breaks Dropdowns

Border increases topbar height: The border-top adds 5px (default) to the topbar's total height
JavaScript miscalculates available space: Filament's dropdown positioning JavaScript uses the element's bounding box to determine if there's enough space below to open the dropdown
Border affects bounding calculations: The added border changes the topbar's dimensions, making the JavaScript think there's insufficient space below
Forced upward opening: The dropdown is forced to open upwards, going off-screen

Reproduction Steps

Install pxlrbt/filament-environment-indicator v3.3.1
Enable the plugin with .visible(true) in a Filament panel with topNavigation()
Open any navigation dropdown in the topbar
Expected: Dropdown opens downward
Actual: Dropdown opens upward and goes off-screen

Proposed Solutions

Option 1: Use Pseudo-element (Recommended)

Instead of adding border-top directly to .fi-topbar, use a ::before pseudo-element:

return new HtmlString("
    <style>
        .fi-topbar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: {$this->evaluate($this->borderWidth)}px;
            background-color: {$this->getColor()['500']};
        }
        .fi-topbar {
            position: relative;
        }
    </style>
");

Option 2: Use Box-shadow Instead

Replace border-top with box-shadow which doesn't affect layout calculations:

return new HtmlString("
    <style>
        .fi-topbar {
            box-shadow: inset 0 {$this->evaluate($this->borderWidth)}px 0 0 {$this->getColor()['500']} !important;
        }
    </style>
");

Option 3: Remove !important Flag

Allow users to override the style if needed:

return new HtmlString("
    <style>
        .fi-topbar {
            border-top: {$this->evaluate($this->borderWidth)}px solid {$this->getColor()['500']};
        }
    </style>
");

Workaround (Temporary)

Users can disable the border and keep only the badge:

EnvironmentIndicatorPlugin::make()
    ->visible(true)
    ->showBorder(false)  // Disable the problematic border
    ->showBadge(true)    // Keep the badge indicator

Environment

Plugin version: v3.3.1
Filament version: v4
PHP version: 8.3.22
Issue affects: All Filament panels using topNavigation() mode

Additional Notes

The issue is specific to topNavigation() mode because:

Sidebar navigation doesn't have this issue (dropdowns are positioned differently)
The topbar is at the very top of the page, so upward-opening dropdowns go off-screen immediately
The border-top changes the topbar's box model, affecting JavaScript position calculations

Suggested PR Changes

File: src/EnvironmentIndicatorPlugin.php
Lines: 118-124

Replace the current CSS injection with Option 1 (pseudo-element) or Option 2 (box-shadow) solution.

## Problem Description The `pxlrbt/filament-environment-indicator` plugin causes navigation dropdowns in the topbar to open upwards instead of downwards, pushing them off-screen. ## Root Cause Analysis ### Location: `EnvironmentIndicatorPlugin.php:109-125` The plugin injects CSS that adds a border to the topbar: ```php $panel->renderHook('panels::styles.after', function () { // ... return new HtmlString(" <style> .fi-topbar { border-top: {$this->evaluate($this->borderWidth)}px solid {$this->getColor()['500']} !important; } </style> "); }); ``` ### Why This Breaks Dropdowns 1. **Border increases topbar height**: The `border-top` adds 5px (default) to the topbar's total height 2. **JavaScript miscalculates available space**: Filament's dropdown positioning JavaScript uses the element's bounding box to determine if there's enough space below to open the dropdown 3. **Border affects bounding calculations**: The added border changes the topbar's dimensions, making the JavaScript think there's insufficient space below 4. **Forced upward opening**: The dropdown is forced to open upwards, going off-screen ## Reproduction Steps 1. Install `pxlrbt/filament-environment-indicator` v3.3.1 2. Enable the plugin with `.visible(true)` in a Filament panel with `topNavigation()` 3. Open any navigation dropdown in the topbar 4. **Expected**: Dropdown opens downward 5. **Actual**: Dropdown opens upward and goes off-screen ## Proposed Solutions ### Option 1: Use Pseudo-element (Recommended) Instead of adding `border-top` directly to `.fi-topbar`, use a `::before` pseudo-element: ```php return new HtmlString(" <style> .fi-topbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: {$this->evaluate($this->borderWidth)}px; background-color: {$this->getColor()['500']}; } .fi-topbar { position: relative; } </style> "); ``` ### Option 2: Use Box-shadow Instead Replace `border-top` with `box-shadow` which doesn't affect layout calculations: ```php return new HtmlString(" <style> .fi-topbar { box-shadow: inset 0 {$this->evaluate($this->borderWidth)}px 0 0 {$this->getColor()['500']} !important; } </style> "); ``` ### Option 3: Remove !important Flag Allow users to override the style if needed: ```php return new HtmlString(" <style> .fi-topbar { border-top: {$this->evaluate($this->borderWidth)}px solid {$this->getColor()['500']}; } </style> "); ``` ## Workaround (Temporary) Users can disable the border and keep only the badge: ```php EnvironmentIndicatorPlugin::make() ->visible(true) ->showBorder(false) // Disable the problematic border ->showBadge(true) // Keep the badge indicator ``` ## Environment - Plugin version: v3.3.1 - Filament version: v4 - PHP version: 8.3.22 - Issue affects: All Filament panels using `topNavigation()` mode ## Additional Notes The issue is specific to `topNavigation()` mode because: - Sidebar navigation doesn't have this issue (dropdowns are positioned differently) - The topbar is at the very top of the page, so upward-opening dropdowns go off-screen immediately - The border-top changes the topbar's box model, affecting JavaScript position calculations ## Suggested PR Changes **File**: `src/EnvironmentIndicatorPlugin.php` **Lines**: 118-124 Replace the current CSS injection with Option 1 (pseudo-element) or Option 2 (box-shadow) solution.

👍 1

pxlrbt commented

2026-02-17 12:33:32 +00:00

(Migrated from github.com)

I tried to replicate this in Firefox, Chrome and Safari on macOS but I don't get this issue. Can you share a screenshot or some example?

I tried to replicate this in Firefox, Chrome and Safari on macOS but I don't get this issue. Can you share a screenshot or some example? <img width="801" height="273" alt="Image" src="https://github.com/user-attachments/assets/bc3ef288-0588-44c5-b49e-89a6bd2b316b" />

larsbo commented

2026-02-17 20:08:27 +00:00

(Migrated from github.com)

Hi @pxlrbt , thank you for investigating!

I created a minimal example repo that shows the issue. I added this plugin and guava/filament-knowledge-base as dependencies.
https://github.com/larsbo/environment-indicator-issue-example
If you toggle the border setting in the panel provider you can see the different behaviour of the dropdown menu next to the profile icon.
PS: I noticed that the profile dropdown is not affected but I don't see a difference of the two dropdowns.

Hi @pxlrbt , thank you for investigating! I created a minimal example repo that shows the issue. I added this plugin and [guava/filament-knowledge-base](https://github.com/GuavaCZ/filament-knowledge-base) as dependencies. https://github.com/larsbo/environment-indicator-issue-example If you toggle the border setting in the panel provider you can see the different behaviour of the dropdown menu next to the profile icon. PS: I noticed that the profile dropdown is not affected but I don't see a difference of the two dropdowns.

👍 1

pxlrbt commented

2026-02-20 12:34:53 +00:00

(Migrated from github.com)

@larsbo Thanks for the repo. I found the difference in the Knowledge Base plugin's dropdown and the user dropdown and opened a PR for the plugin. As this is not a problem with this plugin, I'll close this issue.

🚀 1

larsbo commented

2026-02-20 15:38:17 +00:00

(Migrated from github.com)

Awesome, thank you @pxlrbt !

Rows
Columns

Bug Report: Breake Top navigation Dropdown Position #32

Problem Description

Root Cause Analysis

Location: EnvironmentIndicatorPlugin.php:109-125

Why This Breaks Dropdowns

Reproduction Steps

Proposed Solutions

Option 1: Use Pseudo-element (Recommended)

Option 2: Use Box-shadow Instead

Option 3: Remove !important Flag

Workaround (Temporary)

Environment

Additional Notes

Suggested PR Changes

Location: `EnvironmentIndicatorPlugin.php:109-125`