fix(ui): make settings view mobile-friendly

- Add max-width: 100% and overflow handling to preview content
- Add word-break and overflow-wrap to prevent text overflow
- Make inline settings stack vertically on mobile
- Reduce padding on mobile for settings view
- Make zap preset buttons flex to fit mobile width
- Ensure all setting controls respect viewport width
- Fix preview heading size on mobile
This commit is contained in:
Gigi
2025-10-13 23:53:43 +02:00
parent ad5cd875de
commit caa07012a7
2 changed files with 86 additions and 4 deletions

View File

@@ -96,4 +96,32 @@
color: rgb(161 161 170); /* zinc-400 */
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.settings-view {
padding: 0.5rem;
max-width: 100vw;
overflow-x: hidden;
}
.settings-content {
padding: 0 0.25rem 2rem 0.25rem;
max-width: 100%;
}
.settings-section {
max-width: 100%;
overflow-x: hidden;
}
.zap-preset-buttons {
width: 100%;
}
.zap-preset-btn {
flex: 1 1 auto;
min-width: 70px;
}
}