Jocaru/echoes-of-the-ash
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): disable scrolling when dropdown is open

Browse Source
This commit is contained in:
Joan
2026-02-07 23:30:33 +01:00
parent 596a3ce010
commit 8820cd897e
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pwa/src/components/common/GameDropdown.tsx
View File

@@ -55,15 +55,14 @@ export const GameDropdown: React.FC<GameDropdownProps> = ({
// Use mousedown to catch clicks before they might trigger other things // Use mousedown to catch clicks before they might trigger other things
document.addEventListener('mousedown', handleClickOutside); document.addEventListener('mousedown', handleClickOutside);
// Handle scroll to update position or close? // Disable scrolling while dropdown is open
const handleScroll = () => { const originalOverflow = document.body.style.overflow;
// Optional: onClose(); document.body.style.overflow = 'hidden';
};
window.addEventListener('scroll', handleScroll, true);
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('mousedown', handleClickOutside);
window.removeEventListener('scroll', handleScroll, true); // Restore scrolling
document.body.style.overflow = originalOverflow;
}; };
}, [isOpen, onClose]); }, [isOpen, onClose]);

15
pwa/src/components/game/LocationView.css
View File

@@ -9,25 +9,28 @@
} }
/* Padded Image for enemies */ /* Padded Image for enemies */
/* Padded Image for enemies - Matches item card structure but with padding */ .grid-card .entity-image.padded-image {
.padded-image {
padding: 10px; padding: 10px;
box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
margin: 0;
} }
.padded-image img { .grid-card .entity-image.padded-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain !important; object-fit: cover !important;
/* Ensure enemies don't get cropped */ /* Crop to 1:1 as requested */
display: block;
margin: 0;
} }
/* Remove old expanded grid styles */ /* Remove old expanded grid styles */
.corpse-container { .corpse-container {
display: contents; display: contents;