🚀 Devlog #2: Making स्याउ OS Fully Responsive Across Web, Tablets & Mobile!

💡 The Big Update

Simulating a full desktop operating system inside a browser comes with a major challenge: desktop windowing systems are typically built for large monitors and mouse pointers. But we know hackathon judges, contributors, and friends often open projects directly on smartphones, iPads, and split screens.

Today, we officially rolled out v1.1.0-responsive, making स्याउ OS (Syau OS) adapt seamlessly across any device while keeping its signature frosted glass aesthetic and fluid Devanagari typography intact!

📱 What We Built & Optimized

1. 🪟 Adaptive Viewport Clamping & Auto-Maximized Windows

On small screens (<768px), windows automatically adapt their width (calc(100vw - 16px)) and auto-maximize to fit the viewport.
Bounding boxes are clamped so window titlebars and close controls never get pushed off-screen.

2. 🌊 Touch-Optimized Floating Dock

Dock icons dynamically scale down and adjust spacing on smaller screens.
Added smooth horizontal scroll with hidden scrollbars for mobile screens with high app density.
Enlarged hitboxes so icons are easy to tap with a finger.

3. ⏱️ Responsive TopBar & Nepali BS Calendar

Re-architected TopBar flex priorities: keeps the स्याउ OS brand logo, live Bikram Sambat (२०८३ BS) date widget, and Dark/Light mode switcher cleanly visible without overflowing on narrow screens.

4. 🍱 Fluid Bento Grids Across All Native Apps

Creator Profile App (Kantaraj Luitel / Susant): Bio, certifications, and Buy Me a Coffee button seamlessly collapse into single-column cards on phones.
Drive Photo Gallery: 33 photos now arrange into an adaptive responsive masonry grid with touch-friendly lightbox previews.
Devlog Viewer & Settings: Left sidebar and detail panes switch to a mobile-friendly view.

🛠️ Tech Stack & Implementation Highlights

Framework: React 18 + TypeScript + Vite
Styling: Tailored CSS Glassmorphism + Dynamic CSS Variables (Dark & Light White mode)
State & Motion: Zustand + Framer Motion (touch drag bounds clamping)
Typography: Noto Sans Devanagari 600 (स्याउ) + Space Grotesk 700 (OS) + Inter

👉 Check it out live and try resizing your browser or opening it on your phone! 🎉