TRCKR-254 - trckr

← TRCKR-254

web,bug

Created: 2025-12-11 • Updated: 2025-12-16

Relationships Loading...

## Problem

The filter dropdown menus in the header row (Status, Priority, Project, Label filters) are getting clipped/cut off when they extend beyond the data table boundaries. The dropdown should display fully on top of the table content.

## Screenshot

The Status filter dropdown is being clipped - only showing 'Triage' partially visible before being cut off by the table's overflow settings.

## Root Cause

Likely the table container or parent element has `overflow: hidden` or `overflow: auto` which clips positioned child elements (the dropdown menus).

## Solution

1. Check the CSS for `.data-table`, `#issues-table`, or parent containers
2. The dropdown menus need to either:
   - Use `position: fixed` instead of `position: absolute`
   - Or the parent container needs `overflow: visible` 
   - Or use a portal/overlay approach to render outside the clipping container

## Files to Check

- `server/templates/base.html` - CSS styles for tables and dropdowns
- `server/templates/partials/issues_table.html` - Filter dropdown structure
- `server/static/css/style.css` - If external CSS exists

## Acceptance Criteria

- Filter dropdowns should fully display without clipping
- Dropdowns should appear above table content
- Should work for all filter types (Status, Priority, Project, Label)

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-11

Fixed filter dropdown clipping by changing CSS positioning strategy. **Root Cause:** The .data-table element had overflow: hidden (line 331 in base.html) which was clipping filter dropdown menus that used position: absolute. The dropdowns were positioned relative to their parent th.filterable elements, causing them to be cut off at the table boundaries. **Changes Made:** 1. server/templates/base.html:386 - Changed dropdown from position: absolute to position: fixed 2. server/templates/base.html:2442-2445 - Updated toggleHeaderFilter() to dynamically position dropdowns based on header cell coordinates using getBoundingClientRect() **Testing:** - All pytest tests pass (1164 passed, 40 skipped) - Deployed to production at trckr.roboalch.com - Dropdowns now render above table content without clipping - Works for all filter types: Status, Priority, Project, and Label