pub const MOBILE_BUTTON_STYLES: &str = r#"
@media (max-width: 768px) {
/* Ensure all buttons meet touch target requirements */
button,
.btn,
[role="button"] {
min-height: var(--touch-min, 44px);
min-width: var(--touch-min, 44px);
padding: 10px 16px;
font-size: 14px;
}
/* Toggle button groups */
.toggle-group {
gap: 6px;
padding: 4px;
border-radius: 8px;
}
.toggle-btn {
padding: 10px 16px;
font-size: 14px;
border-radius: 6px;
min-height: var(--touch-min, 44px);
min-width: var(--touch-min, 44px);
display: flex;
align-items: center;
justify-content: center;
}
/* Small icon buttons */
.icon-btn {
width: var(--touch-min, 44px);
height: var(--touch-min, 44px);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.icon-btn svg,
.icon-btn .icon {
width: 20px;
height: 20px;
}
}
"#;Expand description
Mobile-optimized button styles with proper touch targets