Merge pull request #681 from glints-dev/hotfix/gallery-wide-image-mobile-view

yjwong · web-flow · commit 3018160dcda0 · 2022-05-10T11:26:54.000+08:00
fix(gallery): change image width to 100% in carousel mode
diff --git a/src/Display/Gallery/GalleryStyle.ts b/src/Display/Gallery/GalleryStyle.ts
@@ -64,7 +64,7 @@ export const GalleryImageWrapper = styled.div`
 
   img {
     height: 50vh;
-    width: auto;
+    width: 100%;
     object-fit: contain;
   }
 `;
diff --git a/src/Display/Gallery/__snapshots__/Gallery.test.tsx.snap b/src/Display/Gallery/__snapshots__/Gallery.test.tsx.snap
@@ -232,7 +232,7 @@ exports[`<Gallery /> active item click on gallery item 1`] = `
 
 .c13 img {
   height: 50vh;
-  width: auto;
+  width: 100%;
   object-fit: contain;
 }
 
@@ -888,7 +888,7 @@ exports[`<Gallery /> active item click on gallery thumbnail 1`] = `
 
 .c13 img {
   height: 50vh;
-  width: auto;
+  width: 100%;
   object-fit: contain;
 }
 
@@ -2242,7 +2242,7 @@ exports[`<Gallery /> rendering should match snapshot when slider is shown 1`] =
 
 .c13 img {
   height: 50vh;
-  width: auto;
+  width: 100%;
   object-fit: contain;
 }
 

Original file line number	Diff line number	Diff line change
@@ -64,7 +64,7 @@ export const GalleryImageWrapper = styled.div`
`64`	`64`
`65`	`65`	`img {`
`66`	`66`	`height: 50vh;`
`67`		`- width: auto;`
	`67`	`+ width: 100%;`
`68`	`68`	`object-fit: contain;`
`69`	`69`	`}`
`70`	`70`	`;
Original file line number	Diff line number	Diff line change
@@ -232,7 +232,7 @@ exports[`<Gallery /> active item click on gallery item 1`] = `
`232`	`232`
`233`	`233`	`.c13 img {`
`234`	`234`	`height: 50vh;`
`235`		`- width: auto;`
	`235`	`+ width: 100%;`
`236`	`236`	`object-fit: contain;`
`237`	`237`	`}`
`238`	`238`
@@ -888,7 +888,7 @@ exports[`<Gallery /> active item click on gallery thumbnail 1`] = `
`888`	`888`
`889`	`889`	`.c13 img {`
`890`	`890`	`height: 50vh;`
`891`		`- width: auto;`
	`891`	`+ width: 100%;`
`892`	`892`	`object-fit: contain;`
`893`	`893`	`}`
`894`	`894`
@@ -2242,7 +2242,7 @@ exports[`<Gallery /> rendering should match snapshot when slider is shown 1`] =
`2242`	`2242`
`2243`	`2243`	`.c13 img {`
`2244`	`2244`	`height: 50vh;`
`2245`		`- width: auto;`
	`2245`	`+ width: 100%;`
`2246`	`2246`	`object-fit: contain;`
`2247`	`2247`	`}`
`2248`	`2248`