diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss index 58baffbcc6..fd5dc67d58 100644 --- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss +++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss @@ -79,6 +79,10 @@ justify-content: start; overflow-x: visible; } + + &.no-side-scroll { + flex-wrap: wrap; + } } .bubble-button { diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx index 0d80aac545..3701a9782c 100644 --- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx +++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx @@ -10,12 +10,14 @@ interface SelectionBubbleProps { options: string[]; onSelect: (selected: string) => void; selectedStyle?: "outline" | "fill"; + mobileSideScroll?: boolean; } export default function SelectionBubbles({ options, onSelect, selectedStyle = "outline", + mobileSideScroll = false, }: SelectionBubbleProps) { //Select first one as default on mount const [selectedOption, setSelectedOption] = useState( @@ -72,16 +74,23 @@ export default function SelectionBubbles({ return (
- {showLeftGradient && ( + {showLeftGradient && mobileSideScroll && ( )} -
+
{options.map(option => (
- {showGradient && ( + {showGradient && mobileSideScroll && (