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:
parent
a03af7a4d2
commit
261a77935f
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user