feat(KB-626): add mobile responsive styles for model dropdown
- Add media query for tablet screens (max-width: 768px) with 70vh max-height - Add media query for mobile screens (max-width: 640px) with 60vh max-height - Center dropdown horizontally using transform translateX - Set responsive width with viewport calculation and min-width unset
This commit is contained in:
@@ -5364,6 +5364,26 @@ body {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Mobile responsive model dropdown */
|
||||
@media (max-width: 768px) {
|
||||
.model-combobox-dropdown {
|
||||
max-height: 70vh;
|
||||
max-height: 70dvh; /* Use dynamic viewport height where supported */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.model-combobox-dropdown {
|
||||
max-height: 60vh;
|
||||
max-height: 60dvh;
|
||||
/* Ensure dropdown doesn't overflow horizontally on small screens */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100vw - 32px);
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
THEME SYSTEM
|
||||
============================================================ */
|
||||
|
||||
Reference in New Issue
Block a user