From e65d4479eed30f48d17ef69da8903d3387cb0e5d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 4 Sep 2021 14:02:16 +0100
Subject: [PATCH] :lipstick: Re: #200 - Icon image assets max height

---
 src/components/LinkItems/ItemIcon.vue | 18 +++++++++++++-----
 src/styles/dimensions.scss            |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index b4001824..c4b503ae 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -167,15 +167,23 @@ export default {
 <style lang="scss">
   /* Default Image Icon */
   .tile-icon {
-      width: 2rem;
-      // filter: var(--item-icon-transform);
+      min-width: 1rem;
+      max-width: 2rem;
+      min-height: 1rem;
+      max-height: 2rem;
+      object-fit: cover;
+      filter: var(--item-icon-transform);
       border-radius: var(--curve-factor);
-      &.broken { display: none; }
       &.small {
-        width: 1.5rem;
+        max-width: 1.5rem;
+        max-height: 1.5rem;
       }
       &.large {
-        width: 3rem;
+        max-width: 3rem;
+        max-height: 3rem;
+      }
+      &.broken {
+        display: none;
       }
   }
   /* Font-Awesome and Material Design Icons */
diff --git a/src/styles/dimensions.scss b/src/styles/dimensions.scss
index 442cfb7d..86b5bcdc 100644
--- a/src/styles/dimensions.scss
+++ b/src/styles/dimensions.scss
@@ -16,7 +16,7 @@
   --item-group-padding: 5px; // Determines width of item-group outline
   --item-shadow: 1px 1px 2px #130f23;
   --item-hover-shadow: 1px 2px 4px #373737;
-  --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
+  --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.95);
   --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
   --item-group-shadow: var(--item-shadow);
   --context-menu-shadow: var(--item-shadow);