fix: responsive css grid

ccontrols · Sep 20, 2020 · c973790 · c973790
1 parent b1e2e84
commit c973790
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/ui/design-tokens/src/Colors/ColorBlock1/ColorBlock1.tsx b/ui/design-tokens/src/Colors/ColorBlock1/ColorBlock1.tsx
@@ -16,7 +16,14 @@ export const ColorBlock1: FC<ColoBlock1Props> = ({ name, color, sx }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{

diff --git a/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx b/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx
@@ -17,7 +17,14 @@ export const ColorBlock4: FC<ColorBlock4Props> = ({ name, color, sx }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', width: 180 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{

diff --git a/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx b/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx
@@ -52,7 +52,14 @@ export const ColorBlock5: FC<ColorBlock5Props> = ({ name, color, sx }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 180 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{

diff --git a/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx b/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
@@ -8,7 +8,7 @@ export const GridContainer: FC<GridContainerProps> = ({
   children,
   palette,
   gap = 2,
-  columns = [3],
+  width = 220,
   ref,
   ...rest
 }) => {
@@ -19,7 +19,7 @@ export const GridContainer: FC<GridContainerProps> = ({
       onMouseOver={() => setHover(true)}
       onMouseOut={() => setHover(false)}
       gap={gap}
-      columns={columns}
+      width={width}
       {...rest}
     >
       {Object.keys(palette).map(color =>