Landscape: add short-height variant; fix Home column overflow on landscape phones
Root cause: a landscape phone is wide (>=640px) but short, so width-based sm: roominess inflated the title/buttons while the screen height was small -> the right column overflowed (vs-Computer card cut off). Add a height-based `short:` variant (@media max-height:520px) and compact Home's branding + action cards under it so the column fits short landscape viewports. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Height-based variants for short landscape phones (wide but short, where the
|
||||
width-based sm: roominess would otherwise overflow vertically). Use `short:`
|
||||
to compact and `tall:` for genuinely tall screens. */
|
||||
@custom-variant short (@media (max-height: 520px));
|
||||
@custom-variant tall (@media (min-height: 700px));
|
||||
|
||||
/*
|
||||
FlatRender Hokm — "Persian Luxury" theme.
|
||||
Deep navy/teal table, gold filigree accents, geometric motifs.
|
||||
|
||||
Reference in New Issue
Block a user