Responsive Design

Live Preview -- Three Breakpoints

Mobile <640px

Beranda

PENDAPATAN

12.4jt

TRANSAKSI

142

Home

Stok

Tugas

Lagi

Tablet 640--1024px

Dashboard

PENDAPATAN

12.4jt

TRANSAKSI

142

Desktop >1024px

RetailOS

Penjualan

Dashboard

Transaksi

Retur

Operasional

Stok

Dashboard

PENDAPATAN

12.4jt

TRANSAKSI

142

REFUND

3

MARGIN

24%

Bumi targets three breakpoints. The layout adapts between them with platform-appropriate navigation, grid systems, and spacing.

Breakpoints

Name	Range	Primary Context
Mobile	< 640px	Phone browsers, React Native apps
Tablet	640px -- 1024px	Tablets, small laptops
Desktop	> 1024px	Desktop browsers, large screens

/* Mobile first approach */
@media (min-width: 640px)  { /* tablet */ }
@media (min-width: 1024px) { /* desktop */ }

Layout by Breakpoint

Desktop (> 1024px)

Property	Value
Navigation	Fixed sidebar, 240px
Content grid	Up to 4 columns
Page padding	40px
Floating shell margin	12px
Cards	Side-by-side in grid

Tablet (640px -- 1024px)

Property	Value
Navigation	Collapsible sidebar (hamburger toggle)
Content grid	2 columns
Page padding	24px
Floating shell margin	8px
Cards	2-column grid

Mobile (< 640px)

Property	Value
Navigation	Bottom tab bar (no sidebar)
Content grid	Single column, full width
Page padding	20px
Floating shell margin	0px (full bleed)
Cards	Full-width stack

Floating Shell Adaptation

.app-shell {
  margin: 12px;
  border-radius: 14px;
  height: calc(100vh - 24px);
}

@media (max-width: 1024px) {
  .app-shell {
    margin: 8px;
    border-radius: 12px;
    height: calc(100vh - 16px);
  }
}

@media (max-width: 640px) {
  .app-shell {
    margin: 0;
    border-radius: 0;
    height: 100vh;
    box-shadow: none;
  }
}

Grid System

Use CSS Grid or Flexbox with gap utilities. Column counts adapt by breakpoint.

{/* Dashboard stats grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <StatCard />
  <StatCard />
  <StatCard />
  <StatCard />
</div>

{/* Content + sidebar layout */}
<div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6">
  <MainContent />
  <SidePanel />
</div>

Navigation Patterns by Platform

Platform	Primary Nav	Secondary Nav
Desktop Web	Sidebar (always visible)	Page-level tabs
Tablet Web	Collapsible sidebar	Page-level tabs
Mobile Web	Bottom tabs	Stack navigation (back button)
React Native (iOS/Android)	Bottom tabs	Stack navigation
POS (Electron)	Sidebar (fixed, never collapses)	Action bar

Mobile Safe Areas

React Native apps must respect device safe areas (notch, home indicator, status bar).

import { SafeAreaView } from 'react-native-safe-area-context';

export function Screen({ children }: { children: React.ReactNode }) {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#FAFAF7' }} edges={['top']}>
      {children}
    </SafeAreaView>
  );
}

Safe Area	iOS Value	Notes
Status bar (top)	44px--59px	Dynamic Island devices have taller area
Home indicator (bottom)	34px	Only on Face ID devices
Tab bar total height	84px	50px content + 34px safe area

Typography Scaling

Font sizes remain fixed (no responsive scaling). The type scale is designed to work at all breakpoints.

Why no responsive type?

Bumi's type scale (10px--32px) is calibrated for dense data applications. Scaling fonts up on desktop wastes space; scaling them down on mobile hurts readability. Keep sizes consistent and let the layout handle density.

Tables on Mobile

Data tables are common in RetailOS. On mobile, they adapt:

1. Horizontal scroll --- wrap the table in an overflow-x-auto container
2. Card transformation --- convert table rows to stacked cards for simple lists
3. Priority columns --- hide low-priority columns on mobile, show them on desktop

{/* Scrollable table */}
<div className="overflow-x-auto -mx-5 px-5">
  <table className="min-w-[600px] w-full">
    {/* ... */}
  </table>
</div>

DO and DON'T

DO

• Design mobile-first, then add complexity for larger screens
• Use the bottom tab bar for mobile navigation, sidebar for desktop
• Test all pages at 375px width (iPhone SE) as the minimum target
• Use safe-area-inset-* CSS env vars for web mobile layouts

DON'T

• Don't hide essential functionality behind desktop-only layouts
• Don't use responsive font scaling --- keep the type scale fixed
• Don't show the sidebar on mobile --- use bottom tabs instead
• Don't assume mouse hover on mobile --- all interactive states must work with touch