diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index 4052af3..4368b0d 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -1,7 +1,12 @@ +/** @jsx jsx */ +import { jsx, Box } from 'theme-ui' + import React from 'react' import { animated, useTransition } from '@react-spring/web' import useMeasure from 'react-use-measure' +const AnimatedBox = animated(Box) + export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth, style }) => { const styles = { button: { @@ -30,7 +35,7 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con opacity: 1, }, enter: { - width: containerWidth/5-5, + width: containerWidth/5-4, marginRight: 0, opacity: 1, }, @@ -42,20 +47,22 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con }) return ( transition((style, isShownTransition) => ( - isShownTransition && - + {label} - + )) ) } @@ -91,17 +98,19 @@ const TidCarouselV2Animated = ({ flexWrap: "wrap", gap: `${gap}px`, justifyContent: "flex-start", + marginRight: -30, }, button: { height: buttonHeight, // flex: `1 0 ${getButtonWidthCalc(5)}`, - maxWidth: getButtonWidthCalc(5), + // maxWidth: getButtonWidthCalc(5), }, } // ref not available on first render, so only render map after bounds exists. return ( -
+
+
{!bounds.width || allComments.map((c, i) => ( ))}
+
) }