fix: OneSideContainer overflow issue

Giveth · Jun 2, 2023 · 3aa024a · 3aa024a
1 parent c18c57a
commit 3aa024a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.9",
+	"version": "1.11.10",
 	"files": [
 		"/lib"
 	],

diff --git a/src/components/layout/Grid.tsx b/src/components/layout/Grid.tsx
@@ -60,20 +60,20 @@ export const Container = styled.div`
 
 export const OneSideContainer = styled.div`
 	@media (min-width: ${minWidth.sm}px) {
-		width: calc(50vw + ${width.sm / 2}px);
-		margin-left: calc(50vw - ${width.sm / 2}px);
+		width: calc(50% + ${width.sm / 2}px);
+		margin-left: calc(50% - ${width.sm / 2}px);
 	}
 	@media (min-width: ${minWidth.md}px) {
-		width: calc(50vw + ${width.md / 2}px);
-		margin-left: calc(50vw - ${width.md / 2}px);
+		width: calc(50% + ${width.md / 2}px);
+		margin-left: calc(50% - ${width.md / 2}px);
 	}
 	@media (min-width: ${minWidth.lg}px) {
-		width: calc(50vw + ${width.lg / 2}px);
-		margin-left: calc(50vw - ${width.lg / 2}px);
+		width: calc(50% + ${width.lg / 2}px);
+		margin-left: calc(50% - ${width.lg / 2}px);
 	}
 	@media (min-width: ${minWidth.xl}px) {
-		width: calc(50vw + ${width.xl / 2}px);
-		margin-left: calc(50vw - ${width.xl / 2}px);
+		width: calc(50% + ${width.xl / 2}px);
+		margin-left: calc(50% - ${width.xl / 2}px);
 	}
 `;