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 Team
</label> </label>
<div className="form-row"> <div className="form-row">
<div style={{ flex: 1 }}> <div style={{ flex: 1, position: 'relative', zIndex: 10000 }}>
<Dropdown <Dropdown
options={teams} options={teams}
activeId={formData.team_id} activeId={formData.team_id}

71
components/Dropdown.tsx
View file

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