diff --git a/src/pods/properties/components/icon-selector/modal/components/icon-list.component.module.css b/src/pods/properties/components/icon-selector/modal/components/icon-list.component.module.css index 4a12e852..e447b853 100644 --- a/src/pods/properties/components/icon-selector/modal/components/icon-list.component.module.css +++ b/src/pods/properties/components/icon-selector/modal/components/icon-list.component.module.css @@ -3,11 +3,37 @@ flex-wrap: wrap; background-color: white; padding: var(--space-md); + overflow-y: auto; + max-height: 60vh; /* Use a percentage of the viewport height for dynamic adjustment */ width: 80%; gap: var(--space-s); border-radius: var(--border-radius-m); } +@media (max-width: 1200px) { + .iconWrapper { + max-height: 50vh; + } +} + +@media (max-width: 992px) { + .iconWrapper { + max-height: 40vh; + } +} + +@media (max-width: 768px) { + .iconWrapper { + max-height: 30vh; + } +} + +@media (max-width: 576px) { + .iconWrapper { + max-height: 20vh; + } +} + .icon { width: var(--fs-xxl); } diff --git a/src/pods/properties/components/icon-selector/modal/icon-modal.module.css b/src/pods/properties/components/icon-selector/modal/icon-modal.module.css index 620d0236..79251bc7 100644 --- a/src/pods/properties/components/icon-selector/modal/icon-modal.module.css +++ b/src/pods/properties/components/icon-selector/modal/icon-modal.module.css @@ -1,6 +1,6 @@ .container { background-color: var(--primary-700); - height: auto; + max-height: 70vh; /* This removes the scroll in lower resolutions. */ display: flex; flex-direction: column; align-items: center;