diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss index 6b99ed422..ae15e1392 100644 --- a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss +++ b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss @@ -4,10 +4,10 @@ width: 100%; display: grid; - grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1.4rem; - align-items: center; + align-items: start; justify-content: start; .imageGroup { @@ -31,6 +31,7 @@ .removeButton { width: 2.2rem; + height: 2.2rem; color: global.$tertiaryPurple; text-align: center; diff --git a/src/components/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss b/src/components/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss index 5f897d375..96e624520 100644 --- a/src/components/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss +++ b/src/components/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss @@ -2,6 +2,7 @@ .button, .buttonSelected { + height: 100%; overflow: hidden; display: flex; @@ -9,12 +10,16 @@ align-items: center; justify-content: center; + padding: 5.2rem; + + position: relative; + transition: color 0.3s ease; cursor: pointer; &:hover { - background-color: global.$hovering; + background-color: global.$pressing; } } @@ -34,6 +39,10 @@ .imagePlaceholder, .imageSelected { + max-width: 100%; + max-height: 100%; + + position: absolute; object-fit: cover; }