@flamingo-stack/openframe-frontend-core 0.0.776 → 0.0.781

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -2,9 +2,9 @@
 
 import { cn } from '../../../utils/cn';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from '../../chat/entity-cards/content-card-frame';
-import { EntityMetadataAuthorCellSkeleton } from '../../chat/entity-cards/entity-author-card';
+import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
 import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
-import { StatusBadgeSkeleton } from '../../ui/status-badge';
+import { StatusBadge } from '../../ui/status-badge';
 import {
   RELEASE_CARD_CELL_CLASS,
   RELEASE_CARD_CELL_DIVIDER_CLASS,
@@ -83,7 +83,7 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
               <div className={RELEASE_CARD_CELL_STACK_CLASS}>
                 {/* The Type value is a card StatusBadge loaded; the others are a text-h4 line. */}
                 {i === 0 ? (
-                  <StatusBadgeSkeleton variant="card" className="justify-self-start" />
+                  <StatusBadge loading text="" variant="card" className="justify-self-start" />
                 ) : (
                   <p className="text-h4">
                     <TextLineSkeleton type="inherit" as="span" className="w-24" />
@@ -93,7 +93,7 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
               </div>
             </div>
           ))}
-          <EntityMetadataAuthorCellSkeleton />
+          <EntityMetadataAuthorCell loading />
         </div>
       </div>
     );

package/src/components/shared/product-release/product-release-card.tsx

@@ -79,7 +79,7 @@ export interface ProductReleaseCardAnchorProps {
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
 
-export interface ProductReleaseCardProps {
+export interface LoadedProductReleaseCardProps {
   /** Release title */
   title: string;
   /** Release summary/description */
@@ -108,8 +108,6 @@ export interface ProductReleaseCardProps {
   className?: string;
   /** Card density. Defaults to `'lg'` (the canonical large card). */
   size?: ProductReleaseCardSize;
-  /** The release is still being read: the card draws its own skeleton (also in a page's loading scope). */
-  loading?: boolean;
 
   // ─── Catalog-only props (ignored by `default` / `sm` branches) ─────────
   /** Cover image URL. Falls back to a neutral `Package`-icon placeholder. */
@@ -145,7 +143,20 @@ export interface ProductReleaseCardProps {
   };
 }
 
-export function ProductReleaseCard({
+/** The release, or `loading` while the host reads it: the card then draws its own loading form (also in a scope). */
+export type ProductReleaseCardProps =
+  | (LoadedProductReleaseCardProps & { loading?: boolean })
+  | (Partial<LoadedProductReleaseCardProps> & { loading: true });
+
+/** One switch: while the release is read (a prop, or a page's loading scope) the card is its own loading form. */
+export function ProductReleaseCard(props: ProductReleaseCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return <ProductReleaseCardSkeleton size={props.size ?? 'lg'} className={props.className} />;
+  }
+  return <LoadedProductReleaseCard {...props} />;
+}
+
+function LoadedProductReleaseCard({
   title,
   summary,
   version,
@@ -162,10 +173,7 @@ export function ProductReleaseCard({
   viewCount,
   author,
   changelogCounts,
-  loading = false,
-}: ProductReleaseCardProps) {
-  // One switch: while the release is read (a prop, or a page's loading scope) the card is its skeleton.
-  if (useLoadingScope() || loading) return <ProductReleaseCardSkeleton size={size} className={className} />;
+}: LoadedProductReleaseCardProps) {
   // ----- LG branch (rich /releases catalog row + related-content rail) -----
   // The card has THREE zones:
   //   1. Hero — cover image LEFT, version pill + title + summary RIGHT.

package/src/components/shared/product-release/product-releases-view.tsx

@@ -36,11 +36,14 @@ import { usePageDataSync } from '../../layout/page-data-sync';
 import { ListEmptyState } from '../../list-empty-state';
 import { LoadingRegion } from '../../loading/loading-region';
 import { LoadError } from '../../ui/error-state';
-import { useLoadingScope } from '../../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
 import { UnifiedPagination } from '../../unified-pagination';
-import { ProductReleaseCard, type ProductReleaseCardProps } from './product-release-card';
+import { type LoadedProductReleaseCardProps, ProductReleaseCard } from './product-release-card';
 
 const DEFAULT_ENDPOINT = '/api/releases';
+/** Releases a page lists when the host states no `itemsPerPage`: the list's own page size. */
+const PRODUCT_RELEASES_PAGE_SIZE = 5;
+
 /** The pager's row inside the list's bottom slot: no margin of its own (the slot spaces it), so the loaded pager is
  *  the height of its skeleton. */
 const PAGER_ROW_CLASS = 'flex w-full justify-center';
@@ -54,7 +57,7 @@ const DEFAULT_PAGE_PARAM_KEY = 'page';
  *  own data fields minus the ones this view supplies (title/summary/version/
  *  size/nav). `formattedDate` stays required so the spread satisfies the card. */
 export type ProductReleaseCardExtras = Omit<
-  ProductReleaseCardProps,
+  LoadedProductReleaseCardProps,
   'title' | 'summary' | 'version' | 'size' | 'anchorProps' | 'onClick' | 'className'
 >;
 
@@ -64,7 +67,7 @@ export interface ProductReleasesViewProps {
   endpoint?: string;
   /** Optional SSR hydrate for the first page — skips the initial client fetch. */
   initialData?: ProductReleaseListResponse;
-  /** Page size → fixed slot count + offset math. Default 5. */
+  /** Page size → fixed slot count + offset math. Default `PRODUCT_RELEASES_PAGE_SIZE`. */
   itemsPerPage?: number;
   /** Fallback detail-href prefix when `runtime.composeContentUrl` is not wired
    *  (single-platform embedders). Default `/releases`. */
@@ -140,7 +143,7 @@ function ReleaseRow({
 export function ProductReleasesView({
   endpoint = DEFAULT_ENDPOINT,
   initialData,
-  itemsPerPage = 5,
+  itemsPerPage = PRODUCT_RELEASES_PAGE_SIZE,
   basePath = '/releases',
   buildCardProps = buildProductReleaseCardProps,
   searchParamKey = DEFAULT_SEARCH_PARAM_KEY,
@@ -224,23 +227,25 @@ export function ProductReleasesView({
             {/* ALWAYS render `itemsPerPage` slots — visibility toggles so the
                 list height is stable across loading ↔ loaded. */}
             <LoadingRegion label="Loading releases" announce={isLoading} className="flex flex-col gap-6">
-              {Array.from({ length: itemsPerPage }).map((_, i) => {
-                const release = releases[i];
-                const hasData = !!release;
-                return (
-                  <div
-                    key={release?.id ?? `slot-${i}`}
-                    style={{ visibility: isLoading || hasData ? 'visible' : 'hidden' }}
-                  >
-                    {!isLoading && release ? (
-                      <ReleaseRow release={release} basePath={basePath} buildCardProps={buildCardProps} />
-                    ) : (
-                      // Read, or a hidden slot past the page's last release: the card draws its own skeleton.
-                      <ProductReleaseCard loading size="lg" title="" version="" formattedDate="" />
-                    )}
-                  </div>
-                );
-              })}
+              <LoadingItems count={itemsPerPage}>
+                {i => {
+                  const release = releases[i];
+                  return (
+                    <div
+                      // One slot of the page's list, read or loaded alike.
+                      data-loading-item
+                      style={{ visibility: isLoading || release ? 'visible' : 'hidden' }}
+                    >
+                      {!isLoading && release ? (
+                        <ReleaseRow release={release} basePath={basePath} buildCardProps={buildCardProps} />
+                      ) : (
+                        // Read, or a hidden slot past the page's last release: the card draws its own skeleton.
+                        <ProductReleaseCard loading size="lg" title="" version="" formattedDate="" />
+                      )}
+                    </div>
+                  );
+                }}
+              </LoadingItems>
             </LoadingRegion>
 
             {/* Pagination: always present at the bottom, one row height in every state (its skeleton while the list

package/src/components/shared/product-release/release-detail-page.tsx

@@ -27,11 +27,11 @@ import {
 import { GithubClassicIcon } from '../../icons-v2-generated/brand-logos/github-classic-icon';
 import { PageShell } from '../../layout/article-detail-layout';
 import { PageLayout } from '../../layout/page-layout';
-import { LoadingRegion } from '../../loading/loading-region';
+import { LoadingFallback } from '../../loading/loading-fallback';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Card, CardContent } from '../../ui/card';
 import { FadePreview } from '../../ui/fade-preview';
-import { LoadingScope, useLoadingScope } from '../../ui/loading-scope';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { RichMarkdownRenderer } from '../../ui/markdown';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { MediaGalleryStrip } from '../media-gallery-strip';
@@ -718,13 +718,5 @@ export function ReleaseDetailPage({
     </PageLayout>
   );
   // The loading state is the page itself in a scope, announced once unless a host's scope already did.
-  return renderShell(
-    loading ? (
-      <LoadingRegion label="Loading the release" announce={!scoped}>
-        <LoadingScope>{page}</LoadingScope>
-      </LoadingRegion>
-    ) : (
-      page
-    ),
-  );
+  return renderShell(loading ? <LoadingFallback label="Loading the release">{page}</LoadingFallback> : page);
 }

package/src/components/shared/roadmap/index.ts

@@ -14,7 +14,6 @@
  */
 
 export { RoadmapGrid, type RoadmapGridProps } from './roadmap-grid';
-export { RoadmapGridSkeleton, type RoadmapGridSkeletonProps } from './roadmap-grid-skeleton';
 // `VoteType` deliberately NOT re-exported — `./chat` already exports
 // the same-shape `VoteType` from `roadmap-card.tsx`; a duplicate path
 // triggers TS2308 ambiguous re-export at the top-level

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -29,12 +29,63 @@ import { contentFetch } from '../../../utils/embed-content-fetch';
 import { RoadmapCard } from '../../chat/entity-cards/roadmap-card';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import { EmptyState } from '../../empty-state';
+import { LoadingRegion } from '../../loading/loading-region';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../ui';
 import { useLoadingScope } from '../../ui/loading-scope';
-import { RoadmapGridSkeleton, roadmapGridClass } from './roadmap-grid-skeleton';
 import { useRoadmapVoting, type UseRoadmapVotingOptions } from './use-roadmap-voting';
 
+/**
+ * The grid's loading form: each placeholder is `RoadmapCard`'s own loading form.
+ */
+
+/**
+ * The grid's box, read by `RoadmapGrid` and by its skeleton: one column, two from `content-md` when `columns` is 2,
+ * and the desktop left margin that aligns it with the page hero's title. LITERAL class strings: an interpolated
+ * `content-md:grid-cols-${n}` is invisible to Tailwind's scanner and is never generated.
+ */
+function roadmapGridClass(columns: 1 | 2, showLeftMargin: boolean): string {
+  return `grid grid-cols-1 gap-6 ${columns === 2 ? 'content-md:grid-cols-2' : ''} ${
+    showLeftMargin ? 'content-md:ml-[120px]' : ''
+  }`;
+}
+
+/**
+ * Cards the grid's skeleton draws when its host states no count: a typical count. The roadmap lists every item it
+ * holds (no page, no limit); a host that reads a known number of items passes it as `count`.
+ */
+const ROADMAP_GRID_SKELETON_CARDS = 4;
+
+interface RoadmapGridSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  /** Skeleton cards: the number of items the host reads. Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count. */
+  count?: number;
+  /** Show the desktop left margin (~120px) that aligns the grid with
+   *  the page hero's title block. Default `true`. Related-content rails
+   *  inside narrower surfaces (e.g. the release detail page) pass `false`. */
+  showLeftMargin?: boolean;
+  /** The grid's columns from `content-md` (`RoadmapGrid`'s `columns`). Default `2`. */
+  columns?: 1 | 2;
+}
+
+function RoadmapGridSkeleton({
+  region = true,
+  count = ROADMAP_GRID_SKELETON_CARDS,
+  showLeftMargin = true,
+  columns = 2,
+}: RoadmapGridSkeletonProps) {
+  return (
+    <LoadingRegion label="Loading the roadmap" announce={region} className={roadmapGridClass(columns, showLeftMargin)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="min-w-0" data-loading-item>
+          <RoadmapCard loading />
+        </div>
+      ))}
+    </LoadingRegion>
+  );
+}
+
 const DEFAULT_BUILD_REFRESH_URL = (taskId: string) => `/api/roadmap/${taskId}`;
 const BACKLOG = 'Backlog';
 
@@ -131,7 +182,7 @@ export interface RoadmapGridProps {
    * Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count for a roadmap that lists everything it holds.
    */
   skeletonCount?: number;
-  /** @deprecated Use `skeletonCount`. */
+  /** @deprecated Ignored: the skeleton draws `skeletonCount` (a list draws its full count, never a fold). */
   fold?: number;
 }
 
@@ -186,7 +237,7 @@ const QUARTER_CONTENT_INNER_CLASS = 'pb-4';
  * The quarter-grouped grid while its items are read: one quarter, its heading and item count as bars, then the
  * grid's card skeletons.
  */
-export function RoadmapGridQuarterSkeleton({
+function RoadmapGridQuarterSkeleton({
   showLeftMargin = true,
   columns = 2,
   count,
@@ -226,9 +277,7 @@ export function RoadmapGrid({
   quartersToKeepClosed = 2,
   isLoading = false,
   skeletonCount,
-  fold,
 }: RoadmapGridProps) {
-  const skeletonCards = skeletonCount ?? fold;
   // ── Voting (shared across all quarters) ──
   const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
   const inScope = useLoadingScope();
@@ -323,9 +372,9 @@ export function RoadmapGrid({
   // empty state. The page's loading region announces a scope's; a host's own read announces itself.
   if (inScope || isLoading) {
     return groupByQuarter ? (
-      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} count={skeletonCards} />
+      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} count={skeletonCount} />
     ) : (
-      <RoadmapGridSkeleton region={!inScope} count={skeletonCards} showLeftMargin={showLeftMargin} columns={columns} />
+      <RoadmapGridSkeleton region={!inScope} count={skeletonCount} showLeftMargin={showLeftMargin} columns={columns} />
     );
   }
 

package/src/components/shared/roadmap/roadmap-view.tsx

@@ -22,10 +22,12 @@ import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import { usePageDataSync } from '../../layout/page-data-sync';
 import { DataSyncLine } from '../../ui/data-attribution';
 import { LoadError } from '../../ui/error-state';
-import { RoadmapGrid, RoadmapGridQuarterSkeleton } from './roadmap-grid';
+import { RoadmapGrid } from './roadmap-grid';
 import type { UseRoadmapVotingOptions } from './use-roadmap-voting';
 
 const DEFAULT_ENDPOINT = '/api/roadmap';
+/** The grid's items before the read answers (it draws its loading form). */
+const NO_ITEMS: RoadmapItem[] = [];
 /** The list under its sync line (the line the endpoint's `sync` states). */
 const SYNCED_LIST_CLASS = 'flex w-full flex-col gap-[var(--spacing-system-lf)]';
 // Defaults sourced from the ONE param-key registry the chrome (OPENFRAME_DEV_SECTIONS) also
@@ -102,8 +104,8 @@ export function RoadmapView({
     return (
       <div className={SYNCED_LIST_CLASS}>
         {!syncInPage && <DataSyncLine loading />}
-        {/* The view groups by quarter, so its skeleton is the quarter-grouped grid's. */}
-        <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} />
+        {/* The view groups by quarter: the quarter-grouped grid draws its own loading form. */}
+        <RoadmapGrid items={NO_ITEMS} isLoading groupByQuarter showLeftMargin={showLeftMargin} />
       </div>
     );
   }

package/src/components/smooth-accordion.tsx

@@ -46,8 +46,6 @@ export const SmoothAccordionTrigger = forwardRef<HTMLButtonElement, SmoothAccord
         <ChevronButton
           size="md"
           isExpanded={false}
-          backgroundColor="transparent"
-          borderColor="var(--color-border-default)"
           className="transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180"
         />
       </AccordionPrimitive.Trigger>

package/src/components/social-icon-row.tsx

@@ -20,6 +20,11 @@ interface SocialIconRowProps {
    *  presentation-only here — the caller must still gate which links it passes
    *  server-side. Default false keeps a single flat row. */
   groupByVisibility?: boolean;
+  /**
+   * The links are a read list (a person's profiles, whose number is the data's): every button carries
+   * `data-loading-item`, as the caller's loading state's buttons do. Default false (a fixed set, e.g. the defaults).
+   */
+  listItems?: boolean;
 }
 
 const defaultLinks: SocialIconLink[] = [
@@ -93,6 +98,7 @@ export function SocialIconRow({
   variant,
   compact = false,
   groupByVisibility = false,
+  listItems = false,
 }: SocialIconRowProps) {
   // ── Compact design rationale ──────────────────────────────────────────
   // Page-level identity/share rows read as METADATA, not CTAs. The major
@@ -110,6 +116,7 @@ export function SocialIconRow({
   // stretch untouched.
   const resolvedVariant = variant !== undefined ? variant : compact ? 'transparent' : 'outline';
 
+  const marker = { 'data-loading-item': listItems || undefined };
   const renderButton = (link: SocialIconLink, index: number) => {
     const ariaLabel = link.label || link.platform;
     return link.onClick ? (
@@ -120,6 +127,7 @@ export function SocialIconRow({
         {...socialIconButtonProps(compact)}
         aria-label={ariaLabel}
         onClick={link.onClick}
+        {...marker}
       >
         {renderSocialIcon(link.platform)}
       </Button>
@@ -134,6 +142,7 @@ export function SocialIconRow({
         href={link.href}
         openInNewTab
         aria-label={ariaLabel}
+        {...marker}
       >
         {renderSocialIcon(link.platform)}
       </Button>

package/src/components/tickets/help-center-card.tsx

@@ -16,18 +16,56 @@
  */
 
 import { useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn';
 import { formatRelativeTime } from '../../utils/date-utils';
 import { STICKY_HEADER_OFFSET_PX } from '../../utils/same-page-hash-nav';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { getStatusColorScheme } from '../chat/utils/agent-status-message';
 import { DevCardRowContent } from '../shared/dev-section/dev-card-row';
 import { StatusBadge, type StatusBadgeProps } from '../ui';
+import { Button } from '../ui/button';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { TicketDetailDrawer, type TicketDetailDrawerProps } from './ticket-detail-drawer';
 import { useOptionalTicketLive } from './ticket-live-provider';
 import type { AnyTicket } from './types';
 import { isOptimistic } from './types';
 
-export interface HelpCenterCardProps {
+/** A row whose ticket is still read (a list's loading form): only its DOM id and the list's markers. */
+export interface HelpCenterCardLoadingProps {
+  ticket: null;
+  id?: string;
+  /** The list's markers (`data-loading-item`), on the row's root. */
+  [key: `data-${string}`]: unknown;
+}
+
+/** The row's root and its summary's padding, loaded and loading (one box). */
+const HELP_CENTER_ROW_CLASS = 'border-b border-ods-border last:border-b-0';
+const HELP_CENTER_SUMMARY_PAD_CLASS = 'w-full p-[12px] content-md:p-[16px]';
+
+export type HelpCenterCardProps = HelpCenterCardLoadedProps | HelpCenterCardLoadingProps;
+
+/**
+ * One Help Center row, loaded and loading. ONE switch: in a loading scope, or with `ticket={null}` (the list's loading
+ * form), it is its own {@link HelpCenterCardSkeleton}; the list never picks it.
+ */
+export function HelpCenterCard(props: HelpCenterCardProps) {
+  const inScope = useLoadingScope();
+  if (inScope || props.ticket === null) return <HelpCenterCardSkeleton id={props.id} {...loadingItemProps(props)} />;
+  return <HelpCenterCardLoaded {...props} />;
+}
+
+/** A row while its ticket is read: the row's own box, its summary the shared row content's skeleton. */
+function HelpCenterCardSkeleton({ id, ...props }: { id?: string; [key: `data-${string}`]: unknown }) {
+  return (
+    <div id={id} className={HELP_CENTER_ROW_CLASS} aria-hidden {...loadingItemProps(props)}>
+      <div className={HELP_CENTER_SUMMARY_PAD_CLASS}>
+        <DevCardRowContent loading title="" subtitle="" description="" rightBadges={null} />
+      </div>
+    </div>
+  );
+}
+
+export interface HelpCenterCardLoadedProps {
   ticket: AnyTicket;
   expanded: boolean;
   onToggle: (id: string) => void;
@@ -47,9 +85,11 @@ export interface HelpCenterCardProps {
    *  offset is already baked in via `STICKY_HEADER_OFFSET_PX` so the row
    *  lands BELOW the chrome regardless of whether `id` is set. */
   id?: string;
+  /** The list's markers (`data-loading-item`), on the row's root. */
+  [key: `data-${string}`]: unknown;
 }
 
-export function HelpCenterCard({
+function HelpCenterCardLoaded({
   ticket,
   expanded,
   onToggle,
@@ -62,7 +102,8 @@ export function HelpCenterCard({
   replyError,
   onClearReplyError,
   id,
-}: HelpCenterCardProps) {
+  ...props
+}: HelpCenterCardLoadedProps) {
   const optimistic = isOptimistic(ticket);
   const rawStatus = (ticket.status ?? 'OPEN').toUpperCase();
   const priority = (ticket.priority ?? '').toUpperCase();
@@ -123,7 +164,9 @@ export function HelpCenterCard({
   const rightBadges = (
     <>
       {unreadCount > 0 && (
+        // Only rows with unread replies carry it; the row's loading form draws the status badge alone.
         <StatusBadge
+          data-loading-optional
           text={`${unreadCount} NEW`}
           colorScheme="warning"
           variant="card"
@@ -137,7 +180,9 @@ export function HelpCenterCard({
         className="border border-ods-border"
       />
       {priority && (
+        // Not every ticket states a priority; the row's loading form draws the status badge alone.
         <StatusBadge
+          data-loading-optional
           text={priority}
           colorScheme={mapPriorityScheme(priority)}
           variant="card"
@@ -152,25 +197,28 @@ export function HelpCenterCard({
       ref={rowRef}
       id={id}
       style={{ scrollMarginTop: STICKY_HEADER_OFFSET_PX }}
-      className={`border-b border-ods-border last:border-b-0 ${optimistic ? 'opacity-60' : ''}`}
+      className={`${HELP_CENTER_ROW_CLASS} ${optimistic ? 'opacity-60' : ''}`}
       aria-busy={optimistic || undefined}
+      {...loadingItemProps(props)}
     >
-      <button
+      <Button
+        variant="card"
         type="button"
         onClick={isExpandable ? handleClick : undefined}
         disabled={!isExpandable}
         aria-expanded={isExpandable ? isExpanded : undefined}
         aria-controls={isExpanded ? `help-center-drawer-${ticket.id}` : undefined}
-        className="w-full p-[12px] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent disabled:cursor-default content-md:p-[16px]"
       >
-        <DevCardRowContent
-          title={title}
-          subtitle={subtitle}
-          description={description}
-          emptyDescription="No description provided"
-          rightBadges={rightBadges}
-        />
-      </button>
+        <span className={cn('block', HELP_CENTER_SUMMARY_PAD_CLASS)}>
+          <DevCardRowContent
+            title={title}
+            subtitle={subtitle}
+            description={description}
+            emptyDescription="No description provided"
+            rightBadges={rightBadges}
+          />
+        </span>
+      </Button>
 
       {isExpanded && (
         <div id={`help-center-drawer-${ticket.id}`}>