Closes #504

- Changed Icon Wrapper to use media queries to adapt to the resolution and add a scroll
- Udated icon-modal to have a maximum height based on the viewport to remove the scroll on the modal.

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);
 }

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;