Align custom query inputs with schema reference - #25
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR reorganizes the query interface layout by aligning three components (SQL editor, natural language query form, and schema reference) into a single horizontal row with equal column widths. The changes improve visual consistency by standardizing button styling and spacing across all forms.
- Restructured layout from nested flex containers to Bootstrap grid system with equal column widths
- Standardized submit button styling with consistent Bootstrap classes and spacing
- Removed excessive padding and margins for a more compact layout
| <form class="d-flex flex-column w-100" method="POST" action="{{ url_for('query') }}"> | ||
| <label class="p-2">Custom Query</label> | ||
| <input type="hidden" id="query-input" name="query" value="{{ query }}"> | ||
| <div id="query-editor" class="w-100 border" style="height: 300px;"></div> |
There was a problem hiding this comment.
The inline style 'height: 300px;' should be moved to a CSS class for better maintainability and consistency with other styling approaches in the template.
| <div id="query-editor" class="w-100 border" style="height: 300px;"></div> | |
| <div id="query-editor" class="w-100 border query-editor-height"></div> |
| <div id="fields-container" class="mt-3"> | ||
| <ul id="fields-list" class="mb-0"></ul> | ||
| <div class="col-md-4 p-2"> | ||
| <div class="d-flex flex-column"> |
There was a problem hiding this comment.
[nitpick] The schema reference section uses a nested div with flex classes while the other two sections use form elements directly. Consider restructuring for consistency - either wrap all sections in similar containers or remove the unnecessary nested div here.
Summary
Testing
black .pytest tests/test_api.py::test_index -q(fails: ModuleNotFoundError: No module named 'langchain')https://chatgpt.com/codex/tasks/task_e_689390c8128c8323ba225f27fab5c433