From adfe7e1eef2b2e9403a70356de148154b750d2f2 Mon Sep 17 00:00:00 2001
From: Jesus Sanz <jesus@jsanz.dev>
Date: Wed, 11 Dec 2024 09:09:44 +0100
Subject: [PATCH 1/3] 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.
---
 .../components/icon-list.component.module.css | 26 +++++++++++++++++++
 .../icon-selector/modal/icon-modal.module.css |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

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;

From 1d4673b18bd38d0e4c8d5571289f93697291c4b7 Mon Sep 17 00:00:00 2001
From: Jesus Sanz <jesus@jsanz.dev>
Date: Wed, 11 Dec 2024 09:14:39 +0100
Subject: [PATCH 2/3] Icon drawer looks better with a bigger height.

---
 .../modal/components/icon-list.component.module.css             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 e447b853..c18f02a5 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
@@ -5,7 +5,7 @@
   padding: var(--space-md);
   overflow-y: auto;
   max-height: 60vh; /* Use a percentage of the viewport height for dynamic adjustment */
-  width: 80%;
+  width: 87%;
   gap: var(--space-s);
   border-radius: var(--border-radius-m);
 }

From cae37906334cb39ac983c27c6114d08aa1df283a Mon Sep 17 00:00:00 2001
From: Jesus Sanz <jesus@jsanz.dev>
Date: Wed, 11 Dec 2024 09:16:35 +0100
Subject: [PATCH 3/3] Changed back the width as it was looking weird with the
 other elements.

---
 .../modal/components/icon-list.component.module.css             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 c18f02a5..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
@@ -5,7 +5,7 @@
   padding: var(--space-md);
   overflow-y: auto;
   max-height: 60vh; /* Use a percentage of the viewport height for dynamic adjustment */
-  width: 87%;
+  width: 80%;
   gap: var(--space-s);
   border-radius: var(--border-radius-m);
 }