aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-26 02:54:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): make settings view mobile-friendly

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

62
src/styles/components/forms.css
View File

@@ -14,11 +14,34 @@
.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; color: rgb(212 212 216); /* zinc-300 */ cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.font-size-btn:hover { background: rgb(63 63 70); /* zinc-700 */ border-color: rgb(113 113 122); /* zinc-500 */ }
.font-size-btn.active { background: rgb(99 102 241); /* indigo-500 */ border-color: rgb(99 102 241); /* indigo-500 */ color: white; }
.setting-preview { margin: 1.5rem 0; padding: 1rem; background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 8px; }
.setting-preview {
margin: 1.5rem 0;
padding: 1rem;
background: rgb(24 24 27); /* zinc-900 */
border: 1px solid rgb(63 63 70); /* zinc-700 */
border-radius: 8px;
max-width: 100%;
overflow: hidden;
}
.preview-label { font-size: 0.875rem; color: rgb(161 161 170); /* zinc-400 */ margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.preview-content { color: rgb(228 228 231); /* zinc-200 */ line-height: 1.7; }
.preview-content h3 { margin: 0 0 1rem 0; font-size: 1.5em; color: rgb(255 255 255); /* white */ }
.preview-content p { margin: 0.75rem 0; }
.preview-content {
color: rgb(228 228 231); /* zinc-200 */
line-height: 1.7;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.preview-content h3 {
margin: 0 0 1rem 0;
font-size: 1.5em;
color: rgb(255 255 255); /* white */
word-wrap: break-word;
}
.preview-content p {
margin: 0.75rem 0;
word-wrap: break-word;
}
.setting-select { width: 100%; padding: 0.5rem; background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 4px; color: rgb(255 255 255); /* white */ font-size: 1rem; }
.setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
.setting-select:focus { outline: none; border-color: rgb(99 102 241); /* indigo-500 */ }
@@ -27,4 +50,35 @@
.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: rgb(99 102 241); /* indigo-500 */ }
.checkbox-label span { color: rgb(228 228 231); /* zinc-200 */ text-align: left; font-weight: 500; }
/* Mobile responsive styles */
@media (max-width: 768px) {
.setting-group.setting-inline {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.setting-inline .setting-select {
width: 100%;
min-width: unset;
}
.setting-control {
width: 100%;
justify-content: flex-start;
}
.setting-buttons {
flex-wrap: wrap;
}
.color-picker {
flex-wrap: wrap;
}
.preview-content h3 {
font-size: 1.25em;
}
}

28
src/styles/components/settings.css
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;
}
}