分割可能でない単語がHintTextに含まれていたときにあふれないようにする

packages/react-sandbox/src/components/HintText/index.story.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react'
+import HintText from '.'
+
+export default {
+  title: 'react-sandbox/HintText',
+  component: HintText,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: { type: 'string' },
+    context: {
+      control: {
+        type: 'select',
+        options: ['page', 'section'],
+      },
+    },
+  },
+} as Meta<typeof HintText>
+
+export const Default: StoryObj<typeof HintText> = {
+  args: {
+    children: 'HintText',
+    context: 'section',
+  },
+  render: (props) => <HintText {...props} />,
+}
+
+export const NarrowWidth: StoryObj<typeof HintText> = {
+  args: {
+    children: 'LongLongLongLongLongLongLongLongLongText',
+    context: 'section',
+  },
+  render: (props) => (
+    <div style={{ width: 200 }}>
+      <HintText {...props} />
+    </div>
+  ),
+}

packages/react-sandbox/src/components/HintText/index.tsx

@@ -61,6 +61,8 @@ const IconWrap = styled.div`
 const Text = styled.p`
   ${theme((o) => [o.font.text2, o.typography(14)])}
   margin: 0;
+  min-width: 0;
+  overflow-wrap: break-word;
 `
 
 function styledProps(props: Props) {