From 9548694f13fd5151023a69d7a7d96b5fcf887759 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 17 Dec 2025 17:11:51 +0300 Subject: [PATCH] PreferencesSelector: fix responsive styles --- .../PreferencesSelector.module.css | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/src/app/components/Preferences/PreferencesSelector.module.css b/src/app/components/Preferences/PreferencesSelector.module.css index 221772c..5f2bb3c 100644 --- a/src/app/components/Preferences/PreferencesSelector.module.css +++ b/src/app/components/Preferences/PreferencesSelector.module.css @@ -11,6 +11,7 @@ align-items: center; background: linear-gradient(135deg, #42475c 0%, #20222f 100%); z-index: 1000; + padding: 16px; } .card { @@ -21,6 +22,8 @@ background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); + max-height: calc(100vh - 32px); + overflow: auto; } .optionsContainer { @@ -56,3 +59,39 @@ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); } + +@media (max-width: 600px) { + .container { + align-items: flex-start; + padding: 12px; + } + + .card { + width: 100%; + max-width: 100%; + padding: 1rem; + border-radius: 14px; + max-height: calc(100vh - 24px); + } + + .optionsContainer { + margin: 1rem 0; + } + + .optionCard { + margin-bottom: 0.75rem; + } + + .continueButton { + width: 100%; + min-width: 0; + height: 44px; + border-radius: 14px; + } +} + +@media (max-width: 380px) { + .card { + padding: 0.85rem; + } +}