feat: add responsive UI enhancements for mobile and tablet

[bbjiggy]

Summary

This PR implements four focused UI enhancements to improve the responsive experience across mobile and tablet devices.

Changes

Issue #181: Improved terminal preview layout on narrow phones

• Removed rotation transform on narrow screens to prevent layout issues
• Reduced terminal header height and padding for better space utilization
• Adjusted font sizes and line heights for optimal readability on small screens
• Optimized the success indicator spacing

Issue #185: Responsive visual treatment for inline validation

• Added smooth focus state transitions with box-shadow for better visual feedback
• Implemented invalid input states with red border and subtle shadow
• Added reduced motion support for accessibility
• Scaled down focus shadow on mobile devices for better proportions

Issue #186: Tablet-specific spacing scale for section headers

• Added dedicated spacing adjustments for tablet viewports (601px - 900px)
• Refined header margins and eyebrow spacing for better visual hierarchy
• Improved section header bottom margin for balanced layout

Issue #187: Portrait tablet layout for module cards

• Optimized module grid for portrait tablets (601px - 768px)
• Maintained 2-column layout with adjusted card dimensions
• Reduced padding and minimum height for better content density
• Fine-tuned heading margins for improved visual rhythm

Testing

• ✅ Build passes successfully
• ✅ All responsive breakpoints verified
• ✅ Accessibility features maintained (keyboard navigation, ARIA attributes)
• ✅ Reduced motion preferences respected

Accessibility

• Focus states remain clear and visible across all viewport sizes
• Keyboard navigation unaffected
• Screen reader functionality preserved
• Respects prefers-reduced-motion user preference

Closes #181, Closes #185, Closes #186, Closes #187

[drips-wave]

@bbjiggy Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits