Styling Reference
Responsive Size Reference
This table shows the responsive size classes used for key UI elements. Breakpoints are based on browser **width**, not device type or orientation.
- Mobilestyles apply to browser widths below 768px. This generally includes all phones in portrait mode.
- Phone Landscape(sm) styles apply to widths from 768px up to 1024px. This targets phones in landscape mode and small tablets.
- Tablet / Desktop(md) styles apply to widths 1024px and above. This targets iPads, tablets, and desktops.
| UI Element | Mobile (<768px) | Phone Landscape (sm) | Tablet / Desktop (md) | File Location |
|---|---|---|---|---|
| Finish ('Check') Button | h-10 w-10 (Icon: h-6 w-6) | sm:h-12 sm:w-12 (Icon: sm:h-7 sm:w-7) | md:h-16 md:w-16 (Icon: md:h-10 md:w-10) | /src/app/[lang]/coloring/[id]/client-page.tsx |
| Undo Button | h-10 w-10 (Icon: h-5 w-5) | sm:h-12 sm:w-12 (Icon: sm:h-6 sm:w-6) | md:h-16 md:w-16 (Icon: md:h-8 md:w-8) | /src/app/[lang]/coloring/[id]/client-page.tsx |
| Save Photo Button | h-10 w-10 (Icon: h-5 w-5) | sm:h-12 sm:w-12 (Icon: sm:h-6 sm:w-6) | md:h-16 md:w-16 (Icon: md:h-8 md:w-8) | /src/app/[lang]/coloring/[id]/client-page.tsx |
| Tool Palette Buttons | h-16 w-16 (Image: h-14 w-14) | sm:h-22 sm:w-22 (Image: sm:h-20 sm:w-20) | md:h-28 md:w-28 (Image: md:h-[104px] md:w-[104px]) | /src/components/tool-palette.tsx |
| Color Palette Swatches | h-12 w-12 | sm:h-14 sm:w-14 | md:h-16 md:w-16 | /src/components/color-palette.tsx |
| Emoji/Sticker Palette Items | h-12 w-12 (Img: h-10, Txt: 3xl) | sm:h-14 sm:w-14 (Img: h-12, Txt: 4xl) | md:h-16 md:w-16 (Img: h-12, Txt: 5xl) | /src/components/emoji-palette.tsx |
| Pattern Palette Items | h-12 w-12 | sm:h-14 sm:w-14 | md:h-16 md:w-16 | /src/components/pattern-palette.tsx |
| Brush Size Selector Button | h-14 w-14 | sm:h-18 sm:w-18 | md:h-20 md:w-20 | /src/components/brush-size-selector.tsx |
Tailwind CSS Sizing Guide
The values in the reference table (e.g., `h-10`) are Tailwind CSS utility classes. Here is a quick guide to what those values mean. You can request any standard Tailwind size value.
| Class | Value (rem / pixels) |
|---|---|
| h-8 / w-8 | 2rem (32px) |
| h-10 / w-10 | 2.5rem (40px) |
| h-12 / w-12 | 3rem (48px) |
| h-14 / w-14 | 3.5rem (56px) |
| h-16 / w-16 | 4rem (64px) |
| h-18 / w-18 | 4.5rem (72px) |
| h-20 / w-20 | 5rem (80px) |
| h-22 / w-22 | 5.5rem (88px) |
| h-24 / w-24 | 6rem (96px) |
| h-28 / w-28 | 7rem (112px) |
| h-32 / w-32 | 8rem (128px) |
| h-36 / w-36 | 9rem (144px) |
| h-40 / w-40 | 10rem (160px) |