We have created an application to view a list and documents in a table and display details about the documents in a side sheet that overlays the main screen. This is still a prototype and we are already discovering issues with it. Your task is to help us fix one of these issues
The application has a layout problem where the "Open" button (OpenDocumentButton) in the document table gets hidden behind the DetailsSheet when it's opened. This creates a poor user experience as users cannot access the button when the details panel is visible.
- OpenDocumentButton Position: The button is positioned with
absolute right-1 top-0.5
classes within table cells - DetailsSheet Width: Currently the only sheet
DocumentDetailsSheet
has a fixed width ofw-[800px]
but future sheets could have different width - Z-index Issue: The sheet appears to overlay the button, making it inaccessible
- Responsive Behavior: The button should remain visible and clickable regardless of the sheet's width
Fix the layout issue so that:
- ✅ The OpenDocumentButton remains visible and accessible at all times
- ✅ The button stays within its table cell boundaries
- ✅ The solution works with variable DetailsSheet widths
- ✅ The fix maintains the current design aesthetics
- ✅ The solution is responsive and works on different screen sizes
-
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev
-
Open the application and test the issue:
- Click any "Open" button in the table
- Notice how the button becomes inaccessible when the details sheet opens
- Try different approaches to fix the layout
Your solution will be evaluated on:
- Functionality: Does the button remain accessible when the sheet is open?
- Code Quality: Is the solution clean, maintainable, and follows React best practices?
- CSS/Styling: Does the fix maintain visual consistency and responsive behavior?
- Edge Cases: Does it handle different sheet widths and screen sizes?
- User Experience: Is the interaction smooth and intuitive?
- Do not modify the core functionality of opening/closing the details sheet
- Maintain the existing table structure and data display
- Keep the current button styling and behavior
- Document your approach and reasoning in comments
Good luck! Take your time to understand the codebase structure before implementing your solution.