fix(): entry image styling (#1520)

AKASHAorg · Dec 15, 2021 · 14261c5 · 14261c5
1 parent 9e22b30
commit 14261c5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/ui/design/src/components/Editor/image-gallery.tsx b/ui/design/src/components/Editor/image-gallery.tsx
@@ -28,6 +28,7 @@ const StyledImg = styled.img<{ singleImage?: boolean; isMobile?: boolean }>`
 `;
 
 const StyledImgContainer = styled.div`
+  display: flex;
   position: relative;
   border: 1px solid ${props => props.theme.colors.border};
   border-radius: ${props => props.theme.shapes.smallBorderRadius};

diff --git a/ui/design/src/components/EntryCard/entry-image-gallery.tsx b/ui/design/src/components/EntryCard/entry-image-gallery.tsx
@@ -21,6 +21,7 @@ const StyledImg = styled.img<{ singleImage?: boolean }>`
 `;
 
 const StyledImgContainer = styled.div`
+  display: flex;
   position: relative;
   border-radius: ${props => props.theme.shapes.smallBorderRadius};
   border: 1px solid ${props => props.theme.colors.border};
@@ -40,6 +41,10 @@ const StyledPill = styled(Box)`
   z-index: 1;
 `;
 
+const SingleImageContainer = styled.div`
+  display: flex;
+`;
+
 export interface ImageObject {
   src: string;
   size: { width: number; height: number; naturalWidth: number; naturalHeight: number };
@@ -129,6 +134,15 @@ const EntryImageGallery: React.FC<IImageGallery> = props => {
   // limit shown images to 4
   const displayedImages = images.slice(0, 4);
 
+  if (images.length === 1) {
+    return (
+      <SingleImageContainer>
+        {images.map((image, index) => (
+          <ImageGridItem image={image} key={index} />
+        ))}
+      </SingleImageContainer>
+    );
+  }
   return (
     <StyledGrid>
       {displayedImages.map((image, index) => (