letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(mobile): add CSS rules to switch shells based on data-form-factor + viewport

Browse Source
This commit is contained in:
Matt Ciaccio
2026-04-29 14:00:49 +02:00
parent 9f786fbcf3
commit 1b085f81ed
1 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/globals.css
View File

@@ -127,3 +127,32 @@
@apply bg-muted-foreground/30; @apply bg-muted-foreground/30;
} }
} }
/* ─── Form-factor shell visibility ──────────────────────────────────────────
* Two shells (desktop + mobile) render to the DOM on every page; CSS reveals
* one and hides the other. The data-form-factor body attribute is set
* server-side from User-Agent (see src/lib/form-factor.ts). The media-query
* fallback handles desktop browsers resized below lg (1024px), or stripped UAs.
*/
[data-shell='desktop'] {
display: block;
}
[data-shell='mobile'] {
display: none;
}
@media (max-width: 1023.98px) {
[data-shell='desktop'] {
display: none;
}
[data-shell='mobile'] {
display: block;
}
}
body[data-form-factor='mobile'] [data-shell='desktop'] {
display: none;
}
body[data-form-factor='mobile'] [data-shell='mobile'] {
display: block;
}