diff --git a/src/components/dashboard/entity-info-drawer/expandable-list.tsx b/src/components/dashboard/entity-info-drawer/expandable-list.tsx
new file mode 100644
index 00000000..4bd43e81
--- /dev/null
+++ b/src/components/dashboard/entity-info-drawer/expandable-list.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { useState, type FC } from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * The expand/collapse pair behind every truncated list in the entity info
+ * drawer (GOAL-315). Before this, a list that overflowed its cap rendered a
+ * dead "+ N more" label: it told the user content existed but gave them no
+ * way to reach it.
+ *
+ * The closest precedent in the app is `active-pulses.tsx`, which flips
+ * between "View all" and "Show less" — except there the state is owned by
+ * the parent route. Here each drawer section owns its own.
+ */
+
+/** Collapse state for one truncated list. */
+export function useExpandableList<T>(items: T[], limit: number) {
+  const [expanded, setExpanded] = useState(false)
+  return {
+    visible: expanded ? items : items.slice(0, limit),
+    hiddenCount: Math.max(0, items.length - limit),
+    expanded,
+    toggle: () => setExpanded((prev) => !prev),
+  }
+}
+
+/**
+ * Interactive "+ N more" / "Show less" toggle. The visible string is the
+ * accessible name (WCAG 2.5.3 Label in Name) with the item noun appended
+ * off-screen, so "click show less" spoken by a voice-input user matches.
+ */
+export const ShowMoreToggle: FC<{
+  expanded: boolean
+  hiddenCount: number
+  onToggle: () => void
+  /** Plural noun appended to the accessible name, e.g. "pulses". */
+  itemLabel: string
+  className?: string
+}> = ({ expanded, hiddenCount, onToggle, itemLabel, className }) => (
+  <button
+    type="button"
+    onClick={onToggle}
+    aria-expanded={expanded}
+    className={cn(
+      'inline-flex items-center gap-1 rounded-lg px-3 py-1.5',
+      'text-[11px] font-semibold text-gp-ink-muted dark:text-white/55',
+      'hover:text-gp-primary hover:bg-gp-primary/10',
+      'dark:hover:text-gp-primary dark:hover:bg-gp-primary/15',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-gp-primary/50',
+      'transition-all cursor-pointer',
+      className
+    )}
+  >
+    <span
+      className="material-symbols-outlined text-[16px] leading-none"
+      aria-hidden="true"
+    >
+      {expanded ? 'expand_less' : 'expand_more'}
+    </span>
+    {expanded ? 'Show less' : `+ ${hiddenCount} more`}
+    <span className="sr-only">{` ${itemLabel}`}</span>
+  </button>
+)
diff --git a/src/components/dashboard/entity-info-drawer/field-context-details-body.tsx b/src/components/dashboard/entity-info-drawer/field-context-details-body.tsx
index 094f5a2a..df75673b 100644
--- a/src/components/dashboard/entity-info-drawer/field-context-details-body.tsx
+++ b/src/components/dashboard/entity-info-drawer/field-context-details-body.tsx
@@ -12,7 +12,6 @@ import {
   Users,
   Waves,
 } from 'lucide-react'
-import { cn } from '@/lib/utils'
 import { GET_FIELD_CONTEXT_DETAILS } from '@/app/graphql/queries/FIELD_CONTEXT_DETAILS_QUERIES'
 import { GET_FIELD_CONTEXT_PEOPLE } from '@/app/graphql/queries/FIELD_CONTEXT_PEOPLE_QUERIES'
 import { GET_DOCUMENTS_BY_FIELD_CONTEXT } from '@/app/graphql/queries/DOCUMENT_QUERIES'
@@ -20,7 +19,6 @@ import {
   UPDATE_FIELD_CONTEXT_MUTATION,
   LOG_FIELD_ACTIVITY,
 } from '@/app/graphql/mutations'
-import { formatResonanceLabel } from '@/utils/graph-utils'
 import {
   BodySkeleton,
   EditCta,
@@ -29,9 +27,16 @@ import {
   ErrorBody,
   NotFoundBody,
   PrimaryCta,
-  SectionHeader,
   StatCell,
 } from './shared'
+import {
+  DocumentsSection,
+  PeopleSection,
+  PulsesSection,
+  ResonancesSection,
+  type FieldContextDocument,
+  type FieldContextPerson,
+} from './field-context-sections'
 import { dispatchOpenInfoDrawer } from './types'
 
 /**
@@ -61,14 +66,7 @@ export const FieldContextDetailsBody: FC<{
   const { data: peopleData } = useQuery<{
     fieldContexts?: {
       id: string
-      people?: {
-        id: string
-        name: string | null
-        firstName: string | null
-        lastName: string | null
-        email: string | null
-        photo: string | null
-      }[]
+      people?: FieldContextPerson[]
     }[]
   }>(GET_FIELD_CONTEXT_PEOPLE, {
     variables: { contextId },
@@ -76,11 +74,7 @@ export const FieldContextDetailsBody: FC<{
   })
 
   const { data: docsData } = useQuery<{
-    documentsByFieldContext?: {
-      id: string
-      filename: string
-      uploadedAt: string
-    }[]
+    documentsByFieldContext?: FieldContextDocument[]
   }>(GET_DOCUMENTS_BY_FIELD_CONTEXT, {
     variables: { fieldContextId: contextId },
     fetchPolicy: 'cache-and-network',
@@ -237,163 +231,13 @@ export const FieldContextDetailsBody: FC<{
         />
       </section>
 
-      {allPulses.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>Recent pulses ({allPulses.length})</SectionHeader>
-          <ul className="mt-2 space-y-1.5">
-            {allPulses.slice(0, 8).map((pulse) => (
-              <li key={pulse.id}>
-                <button
-                  type="button"
-                  onClick={() =>
-                    dispatchOpenInfoDrawer({
-                      type: 'Pulse',
-                      id: pulse.id,
-                      label: pulse.title ?? undefined,
-                    })
-                  }
-                  className="group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-3.5 py-2.5 transition-all cursor-pointer flex items-center gap-3"
-                >
-                  <span className="text-[9px] font-bold uppercase tracking-wider text-gp-ink-muted dark:text-white/45 w-14 shrink-0">
-                    {typenameLabel(pulse.__typename)}
-                  </span>
-                  <div className="min-w-0 flex-1">
-                    <p className="text-xs font-semibold text-gp-ink-strong dark:text-white/90 truncate">
-                      {pulse.title || 'Untitled'}
-                    </p>
-                  </div>
-                  <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
-                </button>
-              </li>
-            ))}
-            {allPulses.length > 8 && (
-              <li className="text-[11px] text-gp-ink-muted dark:text-white/45 px-3 pt-1">
-                + {allPulses.length - 8} more
-              </li>
-            )}
-          </ul>
-        </section>
-      )}
+      <PulsesSection pulses={allPulses} />
 
-      {resonances.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>Resonances ({resonances.length})</SectionHeader>
-          <ul className="mt-2 space-y-1.5">
-            {resonances.slice(0, 6).map((res) => {
-              const src = res.source?.[0]
-              const tgt = res.target?.[0]
-              const srcTitle =
-                (src && 'title' in src ? src.title : undefined) ?? 'Pulse'
-              const tgtTitle =
-                (tgt && 'title' in tgt ? tgt.title : undefined) ?? 'Pulse'
-              return (
-                <li key={res.id}>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      dispatchOpenInfoDrawer({
-                        type: 'ResonanceLink',
-                        id: res.id,
-                        label: res.label ?? undefined,
-                      })
-                    }
-                    className={cn(
-                      'group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03]',
-                      'hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20',
-                      'px-3.5 py-2.5 transition-all cursor-pointer'
-                    )}
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="text-[10px] font-bold uppercase tracking-wider text-gp-primary truncate">
-                        {formatResonanceLabel(res.label ?? null)}
-                      </span>
-                      <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all shrink-0" />
-                    </div>
-                    <p className="mt-1 text-[11px] text-gp-ink-muted dark:text-white/55 truncate">
-                      {srcTitle} ↔ {tgtTitle}
-                    </p>
-                  </button>
-                </li>
-              )
-            })}
-            {resonances.length > 6 && (
-              <li className="text-[11px] text-gp-ink-muted dark:text-white/45 px-3 pt-1">
-                + {resonances.length - 6} more
-              </li>
-            )}
-          </ul>
-        </section>
-      )}
+      <ResonancesSection resonances={resonances} />
 
-      {people.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>People ({people.length})</SectionHeader>
-          <ul className="mt-2 grid grid-cols-2 gap-1.5">
-            {people.slice(0, 8).map((person) => {
-              const name =
-                person.name?.trim() ||
-                `${person.firstName ?? ''} ${person.lastName ?? ''}`.trim() ||
-                'Member'
-              return (
-                <li key={person.id}>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      dispatchOpenInfoDrawer({
-                        type: 'Person',
-                        id: person.id,
-                        label: name,
-                      })
-                    }
-                    className="group w-full text-left rounded-lg border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-2 py-1.5 transition-all cursor-pointer flex items-center gap-2"
-                  >
-                    <div className="size-6 shrink-0 rounded-full bg-white/10 border border-white/10 flex items-center justify-center text-[9px] font-bold text-white/80">
-                      {name.slice(0, 2).toUpperCase()}
-                    </div>
-                    <span className="text-[11px] font-medium text-gp-ink-strong dark:text-white/85 truncate">
-                      {name}
-                    </span>
-                  </button>
-                </li>
-              )
-            })}
-          </ul>
-        </section>
-      )}
+      <PeopleSection people={people} />
 
-      {documents.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>Documents ({documents.length})</SectionHeader>
-          <ul className="mt-2 space-y-1.5">
-            {documents.slice(0, 5).map((doc) => (
-              <li key={doc.id}>
-                <button
-                  type="button"
-                  onClick={() =>
-                    dispatchOpenInfoDrawer({
-                      type: 'Document',
-                      id: doc.id,
-                      label: doc.filename,
-                    })
-                  }
-                  className="group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-3.5 py-2.5 transition-all cursor-pointer flex items-center gap-3"
-                >
-                  <FileText className="w-3.5 h-3.5 text-gp-ink-muted dark:text-white/55 shrink-0" />
-                  <span className="text-xs font-medium text-gp-ink-strong dark:text-white/85 truncate flex-1">
-                    {doc.filename}
-                  </span>
-                  <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
-                </button>
-              </li>
-            ))}
-            {documents.length > 5 && (
-              <li className="text-[11px] text-gp-ink-muted dark:text-white/45 px-3 pt-1">
-                + {documents.length - 5} more
-              </li>
-            )}
-          </ul>
-        </section>
-      )}
+      <DocumentsSection documents={documents} />
 
       <footer className="mt-auto px-6 py-5 border-t border-gp-glass-border bg-white/[0.02] dark:bg-white/[0.02]">
         {isEditMode ? (
@@ -420,20 +264,3 @@ export const FieldContextDetailsBody: FC<{
     </div>
   )
 }
-
-function typenameLabel(typename: string | null | undefined): string {
-  switch (typename) {
-    case 'GoalPulse':
-      return 'Goal'
-    case 'ResourcePulse':
-      return 'Resource'
-    case 'StoryPulse':
-      return 'Story'
-    case 'CarePulse':
-      return 'Care'
-    case 'CoreValuePulse':
-      return 'Value'
-    default:
-      return 'Pulse'
-  }
-}
diff --git a/src/components/dashboard/entity-info-drawer/field-context-sections.tsx b/src/components/dashboard/entity-info-drawer/field-context-sections.tsx
new file mode 100644
index 00000000..369a783e
--- /dev/null
+++ b/src/components/dashboard/entity-info-drawer/field-context-sections.tsx
@@ -0,0 +1,296 @@
+'use client'
+
+import type { FC } from 'react'
+import { ArrowRight, FileText } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { GetFieldContextDetailsQuery } from '@/gql/graphql'
+import { formatResonanceLabel } from '@/utils/graph-utils'
+import { SectionHeader } from './shared'
+import { ShowMoreToggle, useExpandableList } from './expandable-list'
+import { dispatchOpenInfoDrawer } from './types'
+
+/**
+ * The list sections of the FieldContext drawer (GOAL-315). Split out of
+ * `field-context-details-body.tsx` so each section owns its own
+ * expand/collapse state instead of the body carrying four hooks, and so
+ * neither file exceeds the 400-line component budget.
+ *
+ * Every list renders a capped slice by default and an interactive
+ * "+ N more" toggle that reveals the rest in place. Rows keep their existing
+ * behaviour: clicking one opens that entity's info drawer.
+ */
+
+type FieldContextQuery = GetFieldContextDetailsQuery
+
+export type FieldContextPulse =
+  | FieldContextQuery['goalPulses'][number]
+  | FieldContextQuery['resourcePulses'][number]
+  | FieldContextQuery['storyPulses'][number]
+  | FieldContextQuery['carePulses'][number]
+  | FieldContextQuery['coreValuePulses'][number]
+
+export type FieldContextResonance = NonNullable<
+  FieldContextQuery['fieldContexts'][number]['resonancesInContext']
+>[number]
+
+export type FieldContextPerson = {
+  id: string
+  name: string | null
+  firstName: string | null
+  lastName: string | null
+  email: string | null
+  photo: string | null
+}
+
+export type FieldContextDocument = {
+  id: string
+  filename: string
+  uploadedAt: string
+}
+
+const PULSE_LIMIT = 8
+const RESONANCE_LIMIT = 6
+const PEOPLE_LIMIT = 8
+const DOCUMENT_LIMIT = 5
+
+const rowClass = cn(
+  'group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03]',
+  'hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20',
+  'px-3.5 py-2.5 transition-all cursor-pointer'
+)
+
+export const PulsesSection: FC<{ pulses: FieldContextPulse[] }> = ({
+  pulses,
+}) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    pulses,
+    PULSE_LIMIT
+  )
+  if (pulses.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>Recent pulses ({pulses.length})</SectionHeader>
+      <ul className="mt-2 space-y-1.5">
+        {visible.map((pulse) => (
+          <li key={pulse.id}>
+            <button
+              type="button"
+              onClick={() =>
+                dispatchOpenInfoDrawer({
+                  type: 'Pulse',
+                  id: pulse.id,
+                  label: pulse.title ?? undefined,
+                })
+              }
+              className={cn(rowClass, 'flex items-center gap-3')}
+            >
+              <span className="text-[9px] font-bold uppercase tracking-wider text-gp-ink-muted dark:text-white/45 w-14 shrink-0">
+                {typenameLabel(pulse.__typename)}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="text-xs font-semibold text-gp-ink-strong dark:text-white/90 truncate">
+                  {pulse.title || 'Untitled'}
+                </p>
+              </div>
+              <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
+            </button>
+          </li>
+        ))}
+        {hiddenCount > 0 && (
+          <li className="pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="pulses"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+export const ResonancesSection: FC<{
+  resonances: FieldContextResonance[]
+}> = ({ resonances }) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    resonances,
+    RESONANCE_LIMIT
+  )
+  if (resonances.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>Resonances ({resonances.length})</SectionHeader>
+      <ul className="mt-2 space-y-1.5">
+        {visible.map((res) => {
+          const src = res.source?.[0]
+          const tgt = res.target?.[0]
+          const srcTitle =
+            (src && 'title' in src ? src.title : undefined) ?? 'Pulse'
+          const tgtTitle =
+            (tgt && 'title' in tgt ? tgt.title : undefined) ?? 'Pulse'
+          return (
+            <li key={res.id}>
+              <button
+                type="button"
+                onClick={() =>
+                  dispatchOpenInfoDrawer({
+                    type: 'ResonanceLink',
+                    id: res.id,
+                    label: res.label ?? undefined,
+                  })
+                }
+                className={rowClass}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-gp-primary truncate">
+                    {formatResonanceLabel(res.label ?? null)}
+                  </span>
+                  <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all shrink-0" />
+                </div>
+                <p className="mt-1 text-[11px] text-gp-ink-muted dark:text-white/55 truncate">
+                  {srcTitle} ↔ {tgtTitle}
+                </p>
+              </button>
+            </li>
+          )
+        })}
+        {hiddenCount > 0 && (
+          <li className="pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="resonances"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+export const PeopleSection: FC<{ people: FieldContextPerson[] }> = ({
+  people,
+}) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    people,
+    PEOPLE_LIMIT
+  )
+  if (people.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>People ({people.length})</SectionHeader>
+      <ul className="mt-2 grid grid-cols-2 gap-1.5">
+        {visible.map((person) => {
+          const name =
+            person.name?.trim() ||
+            `${person.firstName ?? ''} ${person.lastName ?? ''}`.trim() ||
+            'Member'
+          return (
+            <li key={person.id} className="min-w-0">
+              <button
+                type="button"
+                onClick={() =>
+                  dispatchOpenInfoDrawer({
+                    type: 'Person',
+                    id: person.id,
+                    label: name,
+                  })
+                }
+                className="group w-full text-left rounded-lg border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-2 py-1.5 transition-all cursor-pointer flex items-center gap-2 min-w-0"
+              >
+                <div className="size-6 shrink-0 rounded-full bg-white/10 border border-white/10 flex items-center justify-center text-[9px] font-bold text-white/80">
+                  {name.slice(0, 2).toUpperCase()}
+                </div>
+                <span className="text-[11px] font-medium text-gp-ink-strong dark:text-white/85 truncate">
+                  {name}
+                </span>
+              </button>
+            </li>
+          )
+        })}
+        {hiddenCount > 0 && (
+          <li className="col-span-2 pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="people"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+export const DocumentsSection: FC<{ documents: FieldContextDocument[] }> = ({
+  documents,
+}) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    documents,
+    DOCUMENT_LIMIT
+  )
+  if (documents.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>Documents ({documents.length})</SectionHeader>
+      <ul className="mt-2 space-y-1.5">
+        {visible.map((doc) => (
+          <li key={doc.id}>
+            <button
+              type="button"
+              onClick={() =>
+                dispatchOpenInfoDrawer({
+                  type: 'Document',
+                  id: doc.id,
+                  label: doc.filename,
+                })
+              }
+              className={cn(rowClass, 'flex items-center gap-3')}
+            >
+              <FileText className="w-3.5 h-3.5 text-gp-ink-muted dark:text-white/55 shrink-0" />
+              <span className="text-xs font-medium text-gp-ink-strong dark:text-white/85 truncate flex-1">
+                {doc.filename}
+              </span>
+              <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
+            </button>
+          </li>
+        ))}
+        {hiddenCount > 0 && (
+          <li className="pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="documents"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+function typenameLabel(typename: string | null | undefined): string {
+  switch (typename) {
+    case 'GoalPulse':
+      return 'Goal'
+    case 'ResourcePulse':
+      return 'Resource'
+    case 'StoryPulse':
+      return 'Story'
+    case 'CarePulse':
+      return 'Care'
+    case 'CoreValuePulse':
+      return 'Value'
+    default:
+      return 'Pulse'
+  }
+}
diff --git a/src/components/dashboard/entity-info-drawer/index.tsx b/src/components/dashboard/entity-info-drawer/index.tsx
index f9aed6e0..dd70494f 100644
--- a/src/components/dashboard/entity-info-drawer/index.tsx
+++ b/src/components/dashboard/entity-info-drawer/index.tsx
@@ -210,7 +210,19 @@ export const EntityInfoDrawer: FC = () => {
         </header>
 
         <div className="flex-1 overflow-y-auto">
-          <DrawerBody entity={entity} onClose={close} />
+          {/*
+            Keyed on the entity so swapping one entity for another of the SAME
+            type (Person A → a connection → Person B) remounts the body instead
+            of reusing the instance. Without this, every `useState` inside the
+            body survives the swap — edit mode, and (GOAL-315) the per-list
+            expanded flags, would carry over to an entity the user never
+            expanded.
+          */}
+          <DrawerBody
+            key={`${entity.type}:${entity.id}`}
+            entity={entity}
+            onClose={close}
+          />
         </div>
       </aside>
     </>
diff --git a/src/components/dashboard/entity-info-drawer/person-details-body.tsx b/src/components/dashboard/entity-info-drawer/person-details-body.tsx
index 18488129..bf39bda2 100644
--- a/src/components/dashboard/entity-info-drawer/person-details-body.tsx
+++ b/src/components/dashboard/entity-info-drawer/person-details-body.tsx
@@ -5,7 +5,6 @@ import { useRouter } from 'next/navigation'
 import { useQuery } from '@apollo/client/react'
 import Image from 'next/image'
 import { ArrowRight, Hash, Layers, Sparkles, Users } from 'lucide-react'
-import { cn } from '@/lib/utils'
 import { useFocalEntity } from '@/contexts'
 import {
   GET_PERSON_DIRECTORY,
@@ -20,7 +19,6 @@ import {
   EntityProvenance,
   type ProvenanceDocument,
 } from '@/components/fields/entity-provenance'
-import { LinkifiedText } from '@/components/ui/linkified-text'
 import { saveFocusEntities } from '@/lib/simulation/focus-entities-storage'
 import type { PivotEntityType } from '@/lib/simulation/entity-collector'
 import {
@@ -33,6 +31,12 @@ import {
   StatCell,
 } from './shared'
 import { LimitedPersonBody } from './limited-person-body'
+import {
+  AttrBlock,
+  PersonConnectionsSection,
+  PersonPulsesSection,
+  SpaceRow,
+} from './person-sections'
 import { dispatchOpenInfoDrawer } from './types'
 
 /**
@@ -197,12 +201,6 @@ export const PersonDetailsBody: FC<{
     router.push(`/protected/dashboard?focus=${focus}`)
   }
 
-  const connectionEdge = (id: string) =>
-    person.connectionEdges?.find(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (e: any) => e.connectedPersonId === id
-    )
-
   return (
     <div className="flex flex-col">
       <section className="relative px-6 pt-7 pb-6 border-b border-gp-glass-border bg-gradient-to-br from-gp-primary/20 via-gp-accent-glow/10 to-transparent">
@@ -307,72 +305,10 @@ export const PersonDetailsBody: FC<{
         </section>
       )}
 
-      {person.connections && person.connections.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>Connections ({person.connections.length})</SectionHeader>
-          <ul className="mt-2 space-y-2">
-            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-            {person.connections.slice(0, 6).map((connection: any) => {
-              const edge = connectionEdge(connection.id)
-              return (
-                <li key={connection.id}>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      dispatchOpenInfoDrawer({
-                        type: 'Person',
-                        id: connection.id,
-                        label: connection.name ?? undefined,
-                      })
-                    }
-                    className="group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-4 py-3 transition-all cursor-pointer"
-                  >
-                    <div className="flex items-center gap-3">
-                      <div className="size-9 shrink-0 rounded-full bg-linear-to-br from-gp-primary/20 to-gp-primary/10 flex items-center justify-center">
-                        {connection.photo ? (
-                          <Image
-                            src={connection.photo}
-                            alt={connection.name}
-                            width={36}
-                            height={36}
-                            className="size-9 rounded-full object-cover"
-                          />
-                        ) : (
-                          <span className="material-symbols-outlined text-gp-primary text-lg">
-                            person
-                          </span>
-                        )}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <p className="text-sm font-semibold text-gp-ink-strong dark:text-white/90 truncate">
-                          {connection.name}
-                        </p>
-                      </div>
-                      <ArrowRight className="w-4 h-4 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
-                    </div>
-                    {edge?.why && (
-                      <p className="mt-2 text-[11px] text-gp-ink-muted dark:text-white/55 leading-relaxed line-clamp-2">
-                        {edge.why}
-                      </p>
-                    )}
-                    {edge?.interests && (
-                      <p className="mt-1 text-[11px] text-gp-ink-muted dark:text-white/45 leading-relaxed line-clamp-1">
-                        <span className="font-semibold">Interests:</span>{' '}
-                        {edge.interests}
-                      </p>
-                    )}
-                  </button>
-                </li>
-              )
-            })}
-            {person.connections.length > 6 && (
-              <li className="text-[11px] text-gp-ink-muted dark:text-white/45 px-3 pt-1">
-                + {person.connections.length - 6} more
-              </li>
-            )}
-          </ul>
-        </section>
-      )}
+      <PersonConnectionsSection
+        connections={person.connections ?? []}
+        connectionEdges={person.connectionEdges}
+      />
 
       {person.ownsSpaces && person.ownsSpaces.length > 0 && (
         <section className="px-6 pb-5">
@@ -414,38 +350,7 @@ export const PersonDetailsBody: FC<{
         </section>
       )}
 
-      {allPulses.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>Recent pulses</SectionHeader>
-          <ul className="mt-2 space-y-1.5">
-            {allPulses.slice(0, 5).map((pulse) => (
-              <li key={pulse.id}>
-                <button
-                  type="button"
-                  onClick={() =>
-                    dispatchOpenInfoDrawer({
-                      type: 'Pulse',
-                      id: pulse.id,
-                      label: pulse.title ?? undefined,
-                    })
-                  }
-                  className="group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-4 py-2.5 transition-all cursor-pointer flex items-center gap-3"
-                >
-                  <div className="min-w-0 flex-1">
-                    <p className="text-xs font-semibold text-gp-ink-strong dark:text-white/90 truncate">
-                      {pulse.title}
-                    </p>
-                    <p className="text-[10px] text-gp-ink-muted dark:text-white/45 truncate">
-                      {pulse.spaceName} · {pulse.contextName}
-                    </p>
-                  </div>
-                  <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
-                </button>
-              </li>
-            ))}
-          </ul>
-        </section>
-      )}
+      <PersonPulsesSection pulses={allPulses} />
 
       {relatedRows.length > 0 && (
         <section className="px-6 pb-5">
@@ -481,44 +386,3 @@ export const PersonDetailsBody: FC<{
     </div>
   )
 }
-
-const AttrBlock: FC<{ label: string; text: string }> = ({ label, text }) => (
-  <div>
-    <SectionHeader>{label}</SectionHeader>
-    <div className="mt-1.5 text-xs text-gp-ink-muted dark:text-white/65 leading-relaxed">
-      <LinkifiedText text={text} />
-    </div>
-  </div>
-)
-
-const SpaceRow: FC<{
-  id: string
-  name: string
-  kind: 'MeSpace' | 'WeSpace'
-  meta?: string
-}> = ({ id, name, kind, meta }) => (
-  <li>
-    <button
-      type="button"
-      onClick={() =>
-        dispatchOpenInfoDrawer({ type: kind, id, label: name })
-      }
-      className={cn(
-        'group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03]',
-        'hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20',
-        'px-3 py-2.5 transition-all cursor-pointer flex items-center justify-between gap-2'
-      )}
-    >
-      <div className="min-w-0 flex-1">
-        <p className="text-xs font-semibold text-gp-ink-strong dark:text-white/90 truncate">
-          {name}
-        </p>
-        <p className="text-[10px] uppercase tracking-wider text-gp-ink-muted dark:text-white/45">
-          {kind === 'MeSpace' ? 'Me Space' : 'We Space'}
-          {meta ? ` · ${meta}` : ''}
-        </p>
-      </div>
-      <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
-    </button>
-  </li>
-)
diff --git a/src/components/dashboard/entity-info-drawer/person-sections.tsx b/src/components/dashboard/entity-info-drawer/person-sections.tsx
new file mode 100644
index 00000000..fd9379d3
--- /dev/null
+++ b/src/components/dashboard/entity-info-drawer/person-sections.tsx
@@ -0,0 +1,225 @@
+'use client'
+
+import type { FC } from 'react'
+import Image from 'next/image'
+import { ArrowRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { LinkifiedText } from '@/components/ui/linkified-text'
+import type { GetPersonProfileQuery } from '@/gql/graphql'
+import { SectionHeader } from './shared'
+import { ShowMoreToggle, useExpandableList } from './expandable-list'
+import { dispatchOpenInfoDrawer } from './types'
+
+/**
+ * Truncated list sections of the Person drawer (GOAL-315). Split out of
+ * `person-details-body.tsx` so each section owns its own expand/collapse
+ * state instead of the body carrying a hook per list, and so the body stays
+ * inside the 400-line component budget.
+ */
+
+type PersonProfile = GetPersonProfileQuery['people'][number]
+export type PersonConnection = PersonProfile['connections'][number]
+export type PersonConnectionEdge = PersonProfile['connectionEdges'][number]
+
+/**
+ * A pulse reached through a WeSpace the person owns, decorated in the body
+ * with the space/context it came from.
+ */
+export type PersonOwnedPulseRow = {
+  id: string
+  title?: string | null
+  spaceName?: string | null
+  contextName?: string | null
+}
+
+const CONNECTION_LIMIT = 6
+const PULSE_LIMIT = 5
+
+export const PersonConnectionsSection: FC<{
+  connections: PersonConnection[]
+  connectionEdges?: PersonConnectionEdge[] | null
+}> = ({ connections, connectionEdges }) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    connections,
+    CONNECTION_LIMIT
+  )
+  // Map rather than a per-row `.find()`: once expanded this list is
+  // unbounded, and the linear scan made rendering it O(n²).
+  const edges = new Map(
+    (connectionEdges ?? []).map((e) => [e.connectedPersonId, e])
+  )
+  if (connections.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>Connections ({connections.length})</SectionHeader>
+      <ul className="mt-2 space-y-2">
+        {visible.map((connection) => {
+          const edge = edges.get(connection.id)
+          return (
+            <li key={connection.id}>
+              <button
+                type="button"
+                onClick={() =>
+                  dispatchOpenInfoDrawer({
+                    type: 'Person',
+                    id: connection.id,
+                    label: connection.name ?? undefined,
+                  })
+                }
+                className="group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-4 py-3 transition-all cursor-pointer"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="size-9 shrink-0 rounded-full bg-linear-to-br from-gp-primary/20 to-gp-primary/10 flex items-center justify-center">
+                    {connection.photo ? (
+                      <Image
+                        src={connection.photo}
+                        alt={connection.name}
+                        width={36}
+                        height={36}
+                        className="size-9 rounded-full object-cover"
+                      />
+                    ) : (
+                      <span className="material-symbols-outlined text-gp-primary text-lg">
+                        person
+                      </span>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-semibold text-gp-ink-strong dark:text-white/90 truncate">
+                      {connection.name}
+                    </p>
+                  </div>
+                  <ArrowRight className="w-4 h-4 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
+                </div>
+                {edge?.why && (
+                  <p className="mt-2 text-[11px] text-gp-ink-muted dark:text-white/55 leading-relaxed line-clamp-2">
+                    {edge.why}
+                  </p>
+                )}
+                {edge?.interests && (
+                  <p className="mt-1 text-[11px] text-gp-ink-muted dark:text-white/45 leading-relaxed line-clamp-1">
+                    <span className="font-semibold">Interests:</span>{' '}
+                    {edge.interests}
+                  </p>
+                )}
+              </button>
+            </li>
+          )
+        })}
+        {hiddenCount > 0 && (
+          <li className="pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="connections"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+/**
+ * Recent pulses reached via the person's owned WeSpaces. Previously this
+ * list was silently capped at five with no indicator at all — worse than
+ * the "+ N more" label elsewhere, since nothing hinted more existed.
+ */
+export const PersonPulsesSection: FC<{ pulses: PersonOwnedPulseRow[] }> = ({
+  pulses,
+}) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    pulses,
+    PULSE_LIMIT
+  )
+  if (pulses.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>Recent pulses ({pulses.length})</SectionHeader>
+      <ul className="mt-2 space-y-1.5">
+        {visible.map((pulse) => (
+          <li key={pulse.id}>
+            <button
+              type="button"
+              onClick={() =>
+                dispatchOpenInfoDrawer({
+                  type: 'Pulse',
+                  id: pulse.id,
+                  label: pulse.title ?? undefined,
+                })
+              }
+              className="group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03] hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20 px-4 py-2.5 transition-all cursor-pointer flex items-center gap-3"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="text-xs font-semibold text-gp-ink-strong dark:text-white/90 truncate">
+                  {pulse.title}
+                </p>
+                <p className="text-[10px] text-gp-ink-muted dark:text-white/45 truncate">
+                  {pulse.spaceName} · {pulse.contextName}
+                </p>
+              </div>
+              <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
+            </button>
+          </li>
+        ))}
+        {hiddenCount > 0 && (
+          <li className="pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="pulses"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+/**
+ * Small presentational rows shared by the Person drawer body.
+ */
+export const AttrBlock: FC<{ label: string; text: string }> = ({ label, text }) => (
+  <div>
+    <SectionHeader>{label}</SectionHeader>
+    <div className="mt-1.5 text-xs text-gp-ink-muted dark:text-white/65 leading-relaxed">
+      <LinkifiedText text={text} />
+    </div>
+  </div>
+)
+
+export const SpaceRow: FC<{
+  id: string
+  name: string
+  kind: 'MeSpace' | 'WeSpace'
+  meta?: string
+}> = ({ id, name, kind, meta }) => (
+  <li>
+    <button
+      type="button"
+      onClick={() =>
+        dispatchOpenInfoDrawer({ type: kind, id, label: name })
+      }
+      className={cn(
+        'group w-full text-left rounded-xl border border-gp-glass-border bg-white/5 dark:bg-white/[0.03]',
+        'hover:bg-white/10 dark:hover:bg-white/[0.06] hover:border-white/20',
+        'px-3 py-2.5 transition-all cursor-pointer flex items-center justify-between gap-2'
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        <p className="text-xs font-semibold text-gp-ink-strong dark:text-white/90 truncate">
+          {name}
+        </p>
+        <p className="text-[10px] uppercase tracking-wider text-gp-ink-muted dark:text-white/45">
+          {kind === 'MeSpace' ? 'Me Space' : 'We Space'}
+          {meta ? ` · ${meta}` : ''}
+        </p>
+      </div>
+      <ArrowRight className="w-3.5 h-3.5 text-white/30 group-hover:text-white/70 group-hover:translate-x-0.5 transition-all" />
+    </button>
+  </li>
+)
diff --git a/src/components/dashboard/entity-info-drawer/space-details-body.tsx b/src/components/dashboard/entity-info-drawer/space-details-body.tsx
index f647710a..9a1f88cd 100644
--- a/src/components/dashboard/entity-info-drawer/space-details-body.tsx
+++ b/src/components/dashboard/entity-info-drawer/space-details-body.tsx
@@ -26,6 +26,7 @@ import {
   SectionHeader,
   StatCell,
 } from './shared'
+import { SpaceMembersSection, VisibilityChoice } from './space-sections'
 import { dispatchOpenInfoDrawer } from './types'
 
 export const SpaceDetailsBody: FC<{ spaceId: string; label?: string }> = ({
@@ -357,57 +358,7 @@ export const SpaceDetailsBody: FC<{ spaceId: string; label?: string }> = ({
         )}
       </section>
 
-      {!isMe && members.length > 0 && (
-        <section className="px-6 pb-5">
-          <SectionHeader>Members ({members.length})</SectionHeader>
-          <ul className="mt-2 space-y-1.5">
-            {members.slice(0, 6).map((m) => {
-              const mp = m.member?.[0]
-              const name = mp
-                ? mp.name ||
-                  `${mp.firstName ?? ''} ${mp.lastName ?? ''}`.trim() ||
-                  'Member'
-                : 'Member'
-              const role = m.role || 'MEMBER'
-              return (
-                <li
-                  key={m.id}
-                  className="flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-white/[0.03] border border-white/5"
-                >
-                  <button
-                    type="button"
-                    onClick={() =>
-                      mp?.id &&
-                      dispatchOpenInfoDrawer({
-                        type: 'Person',
-                        id: mp.id,
-                        label: typeof name === 'string' ? name : undefined,
-                      })
-                    }
-                    disabled={!mp?.id}
-                    className="flex items-center gap-2.5 min-w-0 cursor-pointer disabled:cursor-default flex-1"
-                  >
-                    <div className="size-7 rounded-full bg-white/10 border border-white/10 flex items-center justify-center text-[10px] font-bold text-white/80">
-                      {String(name).slice(0, 2).toUpperCase()}
-                    </div>
-                    <span className="text-xs font-medium text-gp-ink-strong dark:text-white/85 truncate text-left">
-                      {String(name)}
-                    </span>
-                  </button>
-                  <span className="text-[10px] uppercase tracking-wider text-gp-ink-muted dark:text-white/45">
-                    {role}
-                  </span>
-                </li>
-              )
-            })}
-            {members.length > 6 && (
-              <li className="text-[11px] text-gp-ink-muted dark:text-white/45 px-3 pt-1">
-                + {members.length - 6} more
-              </li>
-            )}
-          </ul>
-        </section>
-      )}
+      {!isMe && <SpaceMembersSection members={members} />}
 
       <footer className="mt-auto px-6 py-5 border-t border-gp-glass-border bg-white/[0.02] dark:bg-white/[0.02] space-y-3">
         {isEditMode ? (
@@ -437,31 +388,3 @@ export const SpaceDetailsBody: FC<{ spaceId: string; label?: string }> = ({
     </div>
   )
 }
-
-const VisibilityChoice: FC<{
-  label: string
-  hint: string
-  active: boolean
-  onClick: () => void
-  disabled?: boolean
-}> = ({ label, hint, active, onClick, disabled }) => (
-  <button
-    type="button"
-    onClick={onClick}
-    disabled={disabled}
-    className={cn(
-      'flex-1 rounded-xl border px-3 py-2.5 text-left transition-all cursor-pointer',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      active
-        ? 'border-gp-primary/60 bg-gp-primary/10 ring-1 ring-gp-primary/40'
-        : 'border-gp-glass-border bg-white/40 hover:bg-white/60 dark:bg-white/[0.04] dark:hover:bg-white/[0.08]'
-    )}
-  >
-    <p className="text-xs font-semibold text-gp-ink-strong dark:text-white">
-      {label}
-    </p>
-    <p className="text-[10px] text-gp-ink-muted dark:text-white/50 mt-0.5">
-      {hint}
-    </p>
-  </button>
-)
diff --git a/src/components/dashboard/entity-info-drawer/space-sections.tsx b/src/components/dashboard/entity-info-drawer/space-sections.tsx
new file mode 100644
index 00000000..669da404
--- /dev/null
+++ b/src/components/dashboard/entity-info-drawer/space-sections.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import type { FC } from 'react'
+import { cn } from '@/lib/utils'
+import type { GetSpaceDetailsCompleteQuery } from '@/gql/graphql'
+import { SectionHeader } from './shared'
+import { ShowMoreToggle, useExpandableList } from './expandable-list'
+import { dispatchOpenInfoDrawer } from './types'
+
+/**
+ * Truncated list sections of the Space drawer (GOAL-315). Split out of
+ * `space-details-body.tsx` so each section owns its own expand/collapse
+ * state instead of the body carrying a hook per list, and so the body stays
+ * inside the 400-line component budget.
+ */
+
+type SpaceNode = GetSpaceDetailsCompleteQuery['spaces'][number]
+export type SpaceMembershipRow = Extract<
+  SpaceNode,
+  { members: unknown }
+>['members'][number]
+
+const MEMBER_LIMIT = 6
+
+export const SpaceMembersSection: FC<{ members: SpaceMembershipRow[] }> = ({
+  members,
+}) => {
+  const { visible, hiddenCount, expanded, toggle } = useExpandableList(
+    members,
+    MEMBER_LIMIT
+  )
+  if (members.length === 0) return null
+
+  return (
+    <section className="px-6 pb-5">
+      <SectionHeader>Members ({members.length})</SectionHeader>
+      <ul className="mt-2 space-y-1.5">
+        {visible.map((m) => {
+          const mp = m.member?.[0]
+          const name = mp
+            ? mp.name ||
+              `${mp.firstName ?? ''} ${mp.lastName ?? ''}`.trim() ||
+              'Member'
+            : 'Member'
+          const role = m.role || 'MEMBER'
+          return (
+            <li
+              key={m.id}
+              className="flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-white/[0.03] border border-white/5"
+            >
+              <button
+                type="button"
+                onClick={() =>
+                  mp?.id &&
+                  dispatchOpenInfoDrawer({
+                    type: 'Person',
+                    id: mp.id,
+                    label: name,
+                  })
+                }
+                disabled={!mp?.id}
+                className="flex items-center gap-2.5 min-w-0 cursor-pointer disabled:cursor-default flex-1"
+              >
+                <div className="size-7 shrink-0 rounded-full bg-white/10 border border-white/10 flex items-center justify-center text-[10px] font-bold text-white/80">
+                  {name.slice(0, 2).toUpperCase()}
+                </div>
+                <span className="text-xs font-medium text-gp-ink-strong dark:text-white/85 truncate text-left">
+                  {name}
+                </span>
+              </button>
+              <span className="text-[10px] uppercase tracking-wider text-gp-ink-muted dark:text-white/45 shrink-0">
+                {role}
+              </span>
+            </li>
+          )
+        })}
+        {hiddenCount > 0 && (
+          <li className="pt-0.5">
+            <ShowMoreToggle
+              expanded={expanded}
+              hiddenCount={hiddenCount}
+              onToggle={toggle}
+              itemLabel="members"
+            />
+          </li>
+        )}
+      </ul>
+    </section>
+  )
+}
+
+export const VisibilityChoice: FC<{
+  label: string
+  hint: string
+  active: boolean
+  onClick: () => void
+  disabled?: boolean
+}> = ({ label, hint, active, onClick, disabled }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    disabled={disabled}
+    className={cn(
+      'flex-1 rounded-xl border px-3 py-2.5 text-left transition-all cursor-pointer',
+      'disabled:opacity-50 disabled:cursor-not-allowed',
+      active
+        ? 'border-gp-primary/60 bg-gp-primary/10 ring-1 ring-gp-primary/40'
+        : 'border-gp-glass-border bg-white/40 hover:bg-white/60 dark:bg-white/[0.04] dark:hover:bg-white/[0.08]'
+    )}
+  >
+    <p className="text-xs font-semibold text-gp-ink-strong dark:text-white">
+      {label}
+    </p>
+    <p className="text-[10px] text-gp-ink-muted dark:text-white/50 mt-0.5">
+      {hint}
+    </p>
+  </button>
+)