Add mobile responsiveness to fix query box overflow

- Make window full width on mobile (<=768px)
- Stack form controls vertically on small screens
- Fix query input overflow by making it full width
- Stack labels above inputs on mobile
- Make summary sections full width and stack vertically
- Remove side margins on mobile for full screen usage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
knight 2025-11-05 00:14:33 -05:00
parent a03af7a4d2
commit 261a77935f

View File

@ -39,6 +39,50 @@ body {
margin: 0;
}
/* Mobile responsiveness */
@media screen and (max-width: 768px) {
.window {
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
min-height: 100vh;
}
.field-row {
flex-wrap: wrap;
}
.field-row label {
width: 100% !important;
margin-bottom: 4px;
}
.field-row input[type="text"],
.field-row .channel-dropdown {
flex: 1 1 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-bottom: 8px;
}
.field-row button,
.field-row select {
margin-left: 0 !important;
margin-bottom: 8px;
}
.summary-row {
flex-direction: column;
}
.summary-left,
.summary-right {
max-width: 100%;
min-width: 100%;
}
}
/* Channel dropdown custom styling */
.channel-dropdown {
position: relative;