Fix stakeholder Details view on mobile

[Giolii]

Summary

Fixed mobile view for stakeholder details by refactoring the logic to give the stakeholder parent (Mobile.jsx) a responsive height that never exceeds the bottom of the device.

Problem

The StakeholderDetails component had position tracking logic to add padding based on the draggable panel position, but this approach needed to be fixed every time a new component was added.

If added at the top of StakeholderDetails (announcements for example), the StakeholderDetails parent would extend past the bottom of the device, making it impossible to see the last part of the stakeholder
information.

Adding a new component to the bottom (outdated information) it would not show up since the parent end is behind the bottom of the device and the padding bottom is not enough to bring the component back into view.

Solution

The solution is not straightforward because the overlay has position: absolute, so managing its height is not as simple as using flex: 1 like we would in a normal flexbox flow.

The new implementation controls the height of the overlay dynamically using positionY. Instead of the panel extending beyond the bottom of the device, the bottom property is calculated using positionY.

When the user drags the panel, positionY recalculates the overlay height as the difference between the screen height and the distance from the top of the screen to the handle. This recalculation happens on every drag event, so the overlay always ends exactly at the bottom of the screen.

This means adding or changing components inside StakeholderDetails will never break the layout, since the height is always driven by the panel position, not by hardcoded padding values.

Before	After
old.mov	new.mov

Changes

• Removed usePosition and paddingBottom state from StakeholderDetails
• Removed useEffect that added padding bottom based on position
• Renamed overlay to getOverlayStyle and passed positionY as parameter
• Removed height: 100% to use top: 0 and bottom: positionY instead
• Added flexbox to enable flex: 1 for content to fill available space without exceeding device height in Mobile.jsx
• Added handleDrag handler for handling position updates during drag
• Added Box wrapper to show filters toolbar

Test

• Verify draggable panel moves smoothly on mobile
• Confirm StakeholderDetails content is fully scrollable
• Check that filters toolbar displays correctly
• Test panel snapping behavior at different positions
• Add new components to StakeholderDetails and verify layout doesn't break

Fix #2661