💻 DApp
Mobile UX

Mobile UX Guide

📱 Mobile Optimization

SEAL360 dApp is fully optimized for mobile devices with responsive design and touch-friendly interactions.

✅ Recent Mobile Fixes (v6.1.0)

Horizontal Scroll Issue - RESOLVED ✅

Problem: Dashboard was sliding horizontally on mobile, with visible black padding and content overflowing.

Solution Implemented:

  1. Global overflow control in html and body elements
  2. Layout container fixes with overflow-x-hidden and min-w-0
  3. Mobile-specific CSS rules for viewport constraints
  4. Flex container optimization to prevent content overflow

Technical Implementation

/* Global overflow prevention */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
 
/* Mobile-specific fixes */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
  }
}
// Dashboard layout optimization
<div className="min-h-screen w-full overflow-x-hidden">
  <div className="flex w-full overflow-x-hidden">
    <main className="flex-1 w-full min-w-0 overflow-x-hidden">
      <div className="max-w-7xl mx-auto w-full min-w-0">
        {/* Content */}
      </div>
    </main>
  </div>
</div>

🎨 Mobile Design Principles

1. Touch Targets

  • Minimum size: 44x44px for all interactive elements
  • Spacing: Adequate gap between clickable items
  • Feedback: Visual response to touch events

2. Responsive Layout

  • Breakpoints:
    • Mobile: < 768px
    • Tablet: 768px - 1024px
    • Desktop: > 1024px

3. Performance

  • Reduced animations: 0.3s max duration on mobile
  • Optimized images: WebP format with lazy loading
  • Code splitting: Route-based for faster load times

📐 Layout Behavior

Sidebar

  • Desktop: Fixed sidebar, always visible
  • Mobile: Collapsible sidebar, swipe to open
  • Transition: Smooth 300ms animation

Grid Systems

// Auto-responsive grids
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  {/* Cards stack on mobile, expand on larger screens */}
</div>

Navigation

  • Top bar: Sticky header on scroll
  • Bottom nav: Hidden on desktop, visible on mobile
  • Tab switching: Native-like transitions

🔧 Developer Guidelines

Preventing Horizontal Scroll

❌ Common Mistakes

// DON'T: Fixed widths that exceed viewport
<div style={{ width: '1200px' }}>Content</div>
 
// DON'T: Flex items without min-width
<div className="flex">
  <div className="flex-1">Long content without bounds</div>
</div>

✅ Best Practices

// DO: Use max-width with percentage
<div className="w-full max-w-7xl mx-auto">Content</div>
 
// DO: Add min-w-0 to flex children
<div className="flex">
  <div className="flex-1 min-w-0">Long content constrained</div>
</div>
 
// DO: Use overflow-x-hidden strategically
<div className="w-full overflow-x-hidden">
  <div className="max-w-full">Content</div>
</div>

Responsive Images

// Always set max-width
<Image 
  src="/image.png"
  alt="Description"
  width={800}
  height={600}
  className="w-full max-w-full h-auto"
/>

Safe Areas (iOS)

/* Handle notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

🧪 Testing Mobile UX

Browser DevTools

  1. Open Chrome DevTools (F12)
  2. Click device toolbar icon (Ctrl+Shift+M)
  3. Select device preset or custom dimensions
  4. Test interactions and scroll behavior

Real Device Testing

  • iOS: Safari, Chrome
  • Android: Chrome, Samsung Internet
  • Features to test:
    • Touch interactions
    • Scroll performance
    • Wallet connections
    • Form inputs (no zoom on focus)

Common Issues Checklist

  • No horizontal scroll on any page
  • Touch targets minimum 44x44px
  • No iOS zoom on input focus (font-size: 16px minimum)
  • Smooth animations without jank
  • Wallet connect works on mobile browsers
  • Images don't overflow containers
  • Cards stack properly on mobile
  • Navigation accessible with thumb

📊 Performance Metrics

Mobile Lighthouse Scores (Target)

  • Performance: > 90
  • Accessibility: > 95
  • Best Practices: > 95
  • SEO: > 95

Current Metrics (v6.1.0)

Performance: 92
Accessibility: 98
Best Practices: 96
SEO: 100

🐛 Known Issues & Workarounds

WalletConnect on Mobile

Issue: Some wallets don't redirect back to dApp
Workaround: Use deep linking or QR code scanning

// Enable deep linking
<WalletConnectButton 
  enableDeepLink={true}
  preferredChains={[43113, 43114]}
/>

iOS Safari Viewport

Issue: 100vh includes browser UI
Solution: Use CSS custom property

:root {
  --vh: 1vh;
}
 
@supports (-webkit-touch-callout: none) {
  :root {
    --vh: calc(1vh - 1px);
  }
}
 
.full-height {
  height: calc(var(--vh, 1vh) * 100);
}

📚 Resources

🆘 Report Mobile Issues

Found a mobile UX issue?

  1. Check existing issues: GitHub Issues (opens in a new tab)
  2. Provide details:
    • Device model
    • OS version
    • Browser version
    • Screenshots/video
  3. Submit: New Issue (opens in a new tab)

🔄 Changelog

v6.1.0 (2026-01-13)

  • ✅ Fixed horizontal scroll on all mobile devices
  • ✅ Removed black padding overflow
  • ✅ Improved sidebar mobile interaction
  • ✅ Enhanced touch target sizes

v6.0.0 (2026-01-09)

  • Mobile-first responsive redesign
  • Touch-optimized navigation
  • Performance improvements
FeaturesContract Integration