dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed mobile ui on horizontal

Browse source
This commit is contained in:
dvorakmortonxd 2026-09-22 17:01:01 +02:00
commit 7446f6a0dc
2 changed files with 28 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/layout.tsx
View file

@ -28,7 +28,7 @@ export default function RootLayout({
<head>
<script
dangerouslySetInnerHTML={{
__html: `(function(){try{var t=localStorage.getItem('theme');if(t==='terminal'||t==='skeuo'){document.documentElement.setAttribute('data-theme',t);}}catch(e){}})();`,
__html: `(function(){try{var t=localStorage.getItem('theme');if(t==='terminal'||t==='skeuo'){document.documentElement.setAttribute('data-theme',t);}var ua=navigator.userAgent||'';var phone=/(iPhone|iPod|Android.+Mobile|Windows Phone|IEMobile|BlackBerry|Opera Mini|Mobile)/i.test(ua);document.documentElement.setAttribute('data-device',phone?'phone':'desktop');}catch(e){}})();`,
}}
/>
</head>

28
src/app/skeuo.css
View file

@ -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; }
}