refactor: ajust input media aesthetics details

devhatt · Aug 20, 2024 · 67d136d · 67d136d
1 parent 3c8617e
commit 67d136d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.module.scss
@@ -4,7 +4,7 @@
   width: 100%;
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
   gap: 1.4rem;
 
   align-items: center;

diff --git a/...ents/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss b/...ents/MainComposer/components/InputMediaGroup/components/InputMedia/InputMedia.module.scss
@@ -19,11 +19,14 @@
 }
 
 .button {
+  height: 116px;
+
   border: 2px dotted global.$baseColor;
 }
 
 .buttonSelected {
   width: 100%;
+  height: 100%;
 
   border: 2px solid global.$tertiaryPurple;
 }

diff --git a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.module.scss b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.module.scss
@@ -7,6 +7,8 @@
   flex-grow: 1;
 
   .bottomWrapper {
+    height: 100%;
+
     padding: 1.6rem;
     padding-top: 0;
 

diff --git a/src/pages/home/components/Sidebar/components/SocialMediaForm/SocialMediaForm.module.scss b/src/pages/home/components/Sidebar/components/SocialMediaForm/SocialMediaForm.module.scss
@@ -2,6 +2,8 @@
 @use '~styles/breakpoints.scss' as breakpoints;
 
 .selectionGrid {
+  height: 10.4rem;
+
   display: grid;
   flex-wrap: wrap;
   grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));