Metadata-Version: 2.4
Name: mcp-open-client
Version: 0.3.2
Summary: MCP Open Client - A NiceGUI-based chat application for Claude
Home-page: https://github.com/alejoair/mcp-open-client
Author: alejoair
Author-email: alejoair <your.email@example.com>
License: MIT
Project-URL: Homepage, https://github.com/alejoair/mcp-open-client
Project-URL: Bug Tracker, https://github.com/alejoair/mcp-open-client/issues
Classifier: Programming Language :: Python :: 3
Classifier: License :: OSI Approved :: MIT License
Classifier: Operating System :: OS Independent
Requires-Python: >=3.7
Description-Content-Type: text/markdown
Requires-Dist: nicegui
Requires-Dist: openai
Requires-Dist: jsonschema
Requires-Dist: requests
Requires-Dist: fastmcp
Provides-Extra: dev
Requires-Dist: types-requests; extra == "dev"
Requires-Dist: types-jsonschema; extra == "dev"
Requires-Dist: mypy; extra == "dev"
Dynamic: author
Dynamic: home-page
Dynamic: requires-python

# Drawer Close Button Positioning Solution

This repository contains a comprehensive solution for moving the drawer close button from its default right position to the left side in a NiceGUI application that uses Quasar components.

## Files Included

- **settings/app-styles.css**: Contains 7 different CSS selector options to move the drawer close button
- **drawer-button-verification.md**: Guide for testing and troubleshooting the solution
- **drawer-solution-summary.md**: Summary of the approach and explanation of CSS options
- **browser-specific-fixes.css**: Additional CSS for browser compatibility
- **custom-drawer-example.py**: Alternative Python implementations with custom drawers

## Quick Start

1. Include the CSS from `settings/app-styles.css` in your NiceGUI application
2. Test the drawer close button position
3. If needed, refer to `drawer-button-verification.md` for troubleshooting

## CSS Solution

The primary solution uses CSS to change the `justify-content` property of the drawer header from `flex-end` (right-aligned) to `flex-start` (left-aligned). Multiple selector options are provided to ensure compatibility with different Quasar/NiceGUI versions.

Example:
```css
.q-drawer__content > div:first-child {
  justify-content: flex-start !important;
}
```

## Alternative Approaches

If the CSS solution doesn't work for your specific implementation, alternative approaches are provided:

1. **Custom Drawer Header**: Create your own drawer header with a manually positioned close button
2. **JavaScript Solution**: Use client-side JavaScript to reposition the button programmatically
3. **CSS Hiding Technique**: Hide the default button and add your own in the desired position

## Browser Compatibility

The solution includes specific fixes for:
- Chrome and Chromium-based browsers
- Firefox
- Safari
- Edge/IE Legacy
- Mobile devices
- High-density displays

## Integration with NiceGUI

The solution is designed to work with NiceGUI's implementation of Quasar's drawer component. It respects the existing drawer functionality while only changing the position of the close button.

## Troubleshooting

If you encounter issues:

1. Check which CSS selector works best for your specific implementation
2. Use browser developer tools to inspect the drawer structure
3. Try the alternative approaches provided in `custom-drawer-example.py`
4. Refer to `drawer-button-verification.md` for detailed troubleshooting steps

## License

This solution is provided under the MIT License.
