deco/obs-ss-plugin-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert dropdown to simpler positioning approach
Some checks failed
Lint and Build / build (pull_request) Failing after 1m13s
Details

Browse source 
Simplified dropdown positioning to fix layering issues:
- Reverted to absolute positioning with inline z-index styles
- Added explicit z-index to dropdown container in streams page
- Removed complex fixed positioning logic that was causing problems

This should resolve dropdown visibility issues while maintaining proper positioning.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-20 01:55:22 -04:00
parent fd58d200f2
commit 882c71f2ba
2 changed files with 24 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/streams/page.tsx
View file

@ -235,7 +235,7 @@ export default function AddStream() {
Team
</label>
<div className="form-row">
<div style={{ flex: 1 }}>
<div style={{ flex: 1, position: 'relative', zIndex: 10000 }}>
<Dropdown
options={teams}
activeId={formData.team_id}

71
components/Dropdown.tsx
View file

@ -20,15 +20,12 @@ export default function Dropdown({
onToggle,
}: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const [isOpen, setIsOpen] = useState(controlledIsOpen ?? false);
const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (!dropdownRef.current || !(event.target instanceof Node)) return;
if (dropdownRef.current && !dropdownRef.current.contains(event.target) &&
buttonRef.current && !buttonRef.current.contains(event.target)) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
if (onToggle) onToggle(false);
else setIsOpen(false);
}
@ -43,17 +40,6 @@ export default function Dropdown({
};
}, [controlledIsOpen, isOpen, onToggle]);
useEffect(() => {
if ((controlledIsOpen ?? isOpen) && buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect();
setDropdownPosition({
top: rect.bottom + window.scrollY,
left: rect.left + window.scrollX,
width: rect.width
});
}
}, [controlledIsOpen, isOpen]);
const activeOption = options.find((option) => option.id === activeId) || null;
const handleSelect = (option: { id: number }) => {
@ -68,41 +54,30 @@ export default function Dropdown({
};
return (
<>
<div className="relative w-full">
<button
ref={buttonRef}
type="button"
onClick={toggleDropdown}
className="dropdown-button"
<div className="relative w-full" ref={dropdownRef} style={{ zIndex: 9999 }}>
<button
type="button"
onClick={toggleDropdown}
className="dropdown-button"
>
<span>
{activeOption ? activeOption.name : label}
</span>
<svg
className={`icon-sm transition-transform duration-200 ${(controlledIsOpen ?? isOpen) ? 'rotate-180' : ''}`}
fill="currentColor"
viewBox="0 0 20 20"
>
<span>
{activeOption ? activeOption.name : label}
</span>
<svg
className={`icon-sm transition-transform duration-200 ${(controlledIsOpen ?? isOpen) ? 'rotate-180' : ''}`}
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a 1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
{(controlledIsOpen ?? isOpen) && (
<div
ref={dropdownRef}
className="fixed z-[9999] dropdown-menu"
style={{
top: dropdownPosition.top,
left: dropdownPosition.left,
width: dropdownPosition.width
}}
>
<div className="absolute top-full left-0 w-full dropdown-menu" style={{ zIndex: 9999 }}>
{options.length === 0 ? (
<div className="dropdown-item text-center">
No teams available
@ -120,6 +95,6 @@ export default function Dropdown({
)}
</div>
)}
</>
</div>
);
}