diff --git a/package-lock.json b/package-lock.json
index d03ad2b..48475b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "hull.js": "^0.2.11",
         "radium": "^0.26.2",
         "react-easy-emoji": "^1.8.1",
+        "react-use-measure": "^2.1.1",
         "theme-ui": "^0.3.5",
         "victory-core": "~36.6.8"
       },
@@ -3764,6 +3765,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -6410,6 +6416,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
+      "integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
+      "dependencies": {
+        "debounce": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
diff --git a/package.json b/package.json
index c45ebaa..ba4be77 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "hull.js": "^0.2.11",
     "radium": "^0.26.2",
     "react-easy-emoji": "^1.8.1",
+    "react-use-measure": "^2.1.1",
     "theme-ui": "^0.3.5",
     "victory-core": "~36.6.8"
   }
diff --git a/stories/client-participation/TidCarouselV2.stories.js b/stories/client-participation/TidCarouselV2.stories.js
index df65ddb..dc9f3b5 100644
--- a/stories/client-participation/TidCarouselV2.stories.js
+++ b/stories/client-participation/TidCarouselV2.stories.js
@@ -3,29 +3,27 @@ import { action } from '@storybook/addon-actions'
 import Strings from '../../polis/client-participation/js/strings/en_us'
 import { animated, useTransition } from '@react-spring/web'
 import commentsData from '../../.storybook/data/3ntrtcehas-comments.json'
+import useMeasure from 'react-use-measure'
 
 commentsData.sort((a,b) => a.tid - b.tid)
 
-const TidCarouselButton = ({ label, isShown, isSelected, handleClick }) => {
+const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth }) => {
   const transition = useTransition(isShown, {
     from: {
       width: 0,
       marginRight: 0,
-      fontSize: 6,
       opacity: 1,
     },
     enter: {
-      width: 32,
-      marginRight: 5,
-      fontSize: 14,
+      width: containerWidth/5-5,
+      marginRight: 0,
       opacity: 1,
     },
     leave: {
       width: 0,
-      marginRight: 0,
-      fontSize: 0,
+      marginRight: -5,
       opacity: 0,
-    }
+    },
   })
   return (
     transition((style, isShownTransition) => (
@@ -38,7 +36,6 @@ const TidCarouselButton = ({ label, isShown, isSelected, handleClick }) => {
           // fontSize changes seem slow. Scale span instead.
           // fontSize: style.fontSize,
           opacity: style.opacity,
-          marginBottom: 5,
           padding: 0,
           border: 0,
           cursor: "pointer",
@@ -71,21 +68,26 @@ const TidCarouselV2 = ({
   Strings,
 }) => {
   if ( selectedTidCuration === null ) return null
+  const [ref, bounds] = useMeasure()
 
   allComments = allComments.sort((a, b) => a.tid - b.tid)
   const commentsToShowTids = commentsToShow.map(c => c.tid)
 
+  // ref not available on first render, so only render map after bounds exists.
   return (
-    <div style={{
+    <div ref={ref} style={{
       display: "flex",
       flex: 1,
-      width: 185,
+      width: "100%",
       height: 65,
       paddingX: 0,
+      gap: 5,
+      rowGap: 5,
       flexWrap: "wrap",
     }}>
-      {allComments.map(c => (
+      {!bounds.width || allComments.map((c, i) => (
         <TidCarouselButton
+          containerWidth={bounds.width}
           id={c.tid}
           label={c.tid}
           handleClick={() => handleCommentClick(c)}