romfast/clawd
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: US-014 - Frontend - Mobile responsive and touch optimization

Browse Source
This commit is contained in:
Echo
2026-02-10 17:30:22 +00:00
parent dfc2229091
commit ae06e84070
3 changed files with 238 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
dashboard/habits.html
View File

@@ -86,6 +86,96 @@
.filter-group {
width: 100%;
}
/* Mobile touch targets - minimum 44px */
.habit-card-action-btn {
min-width: 44px;
min-height: 44px;
}
.habit-card-check-btn {
min-height: 48px;
font-size: var(--text-lg);
}
.habit-card-skip-btn {
min-height: 44px;
padding: var(--space-2) var(--space-3);
}
.modal-close {
min-width: 44px;
min-height: 44px;
}
/* Stats row 2x2 on mobile */
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
/* Icon and color pickers wrap properly */
.color-picker-swatches {
grid-template-columns: repeat(4, 1fr);
}
.icon-picker-grid {
grid-template-columns: repeat(4, 1fr);
max-height: 300px;
}
/* Day checkboxes wrap on small screens */
.day-checkboxes {
grid-template-columns: repeat(4, 1fr);
}
/* Modal padding adjustment */
.modal {
margin: var(--space-2);
}
.modal-body,
.modal-header,
.modal-footer {
padding: var(--space-3);
}
/* Touch-friendly form elements */
.form-input,
.form-select,
.form-textarea {
min-height: 44px;
font-size: var(--text-base);
}
/* Larger touch targets for pickers */
.color-swatch {
min-height: 44px;
}
.icon-option {
min-height: 44px;
}
.icon-option svg {
width: 24px;
height: 24px;
}
.day-checkbox-label {
min-height: 44px;
padding: var(--space-1);
}
/* Mood and rating buttons */
.mood-btn {
min-width: 44px;
min-height: 44px;
font-size: 36px;
}
.rating-star {
font-size: 36px;
}
}
/* Habits grid */