refactor: adjust input media aesthetics details

devhatt · Aug 21, 2024 · 7f7761b · 7f7761b
1 parent 3c8617e
commit 7f7761b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss
@@ -7,7 +7,7 @@
   grid-template-columns: repeat(auto-fill, minmax(112px, 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/...ents/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss b/...ents/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss
@@ -2,13 +2,18 @@
 
 .button,
 .buttonSelected {
+  height: 100%;
   overflow: hidden;
 
   display: flex;
 
   align-items: center;
   justify-content: center;
 
+  padding: 5.2rem;
+
+  position: relative;
+
   transition: color 0.3s ease;
 
   cursor: pointer;
@@ -34,6 +39,10 @@
 
 .imagePlaceholder,
 .imageSelected {
+  max-width: 100%;
+  max-height: 100%;
+
+  position: absolute;
   object-fit: cover;
 }