diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 88f886f..93a211b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -28,7 +28,7 @@ export default function RootLayout({
diff --git a/src/app/skeuo.css b/src/app/skeuo.css index d783e52..94291c9 100644 --- a/src/app/skeuo.css +++ b/src/app/skeuo.css @@ -35,6 +35,10 @@ html[data-theme="skeuo"] body { .skeuo-mobile-root { display: block; } } +/* Real phones always get the Android UI, even in landscape. */ +html[data-device="phone"] .skeuo-desktop-root { display: none; } +html[data-device="phone"] .skeuo-mobile-root { display: block; } + /* ============================================================ DESKTOP (Plasma) ============================================================ */ @@ -1169,10 +1173,11 @@ a.win-icon { pointer-events: none; } .android-app-label { - max-width: 72px; + max-width: 100%; font-size: 0.68rem; line-height: 1.15; text-align: center; + overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } @@ -1297,3 +1302,24 @@ a.win-icon { grid-template-columns: repeat(3, 1fr); } } + +/* Phones in landscape: compact the home so the app grid (and its labels) fit. */ +@media (orientation: landscape) and (max-height: 620px) { + .android-glance { top: 32px; left: 16px; } + .android-glance-time { font-size: 1.9rem; } + .android-glance-sub { margin-top: 1px; font-size: 0.66rem; } + .android-theme-chip { top: 28px; right: 12px; height: 30px; padding: 0 12px; font-size: 0.7rem; } + .android-grid { + top: 92px; + bottom: 80px; + grid-template-columns: repeat(6, 1fr); + gap: 10px 8px; + padding: 4px 24px; + } + .android-app { gap: 4px; } + .android-app-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 21px; } + .android-app-label { font-size: 0.6rem; } + .android-dock { bottom: 26px; gap: 18px; } + .android-app.in-dock .android-app-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; } + .android-navbar { height: 16px; } +}