fix(APP-7376): Improve responsiveness of DefinitionList core component (

#335)

CHANGELOG.md

@@ -21,6 +21,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Removed `xs` size variant from `Avatar` component
 -   Update `DaoAvatar` to correctly set text size depending on `size` property
 
+### Fixed
+
+-   Improve responsiveness for `DefinitionList` container and items for middle breakpoints
+
 ## [1.0.54] - 2024-11-11
 
 ### Changed

src/core/components/definitionList/definitionListContainer/definitionListContainer.stories.tsx

@@ -14,18 +14,10 @@ const meta: Meta<typeof DefinitionList.Container> = {
 
 type Story = StoryObj<typeof DefinitionList.Container>;
 
-/**
- * Default usage of the DefinitionList.Container component with no definitions as children.
- */
-export const Default: Story = {
-    render: (props: IDefinitionListContainerProps) => (
-        <DefinitionList.Container {...props}>Empty Container</DefinitionList.Container>
-    ),
-};
 /**
  * Example usage of the DefinitionList.Container component with three definitions.
  */
-export const Loaded: Story = {
+export const Default: Story = {
     render: (props: IDefinitionListContainerProps) => (
         <DefinitionList.Container {...props}>
             <DefinitionList.Item term="Standard Definition Term">
@@ -51,7 +43,7 @@ export const Loaded: Story = {
                 aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse at
                 metus porttitor, laoreet elit eu, luctus orci. Sed volutpat elit ac mi porta facilisis.
             </DefinitionList.Item>
-            <DefinitionList.Item term="Third Term (with a super duper longer label which will clamp to 6 lines high & to 1 line high when smaller than 'md' breakpoint) ">
+            <DefinitionList.Item term="Third Term (with a super duper longer label which will to 1 line high when smaller than 'md' breakpoint and stacked) ">
                 <div className="flex h-48 w-full items-center justify-center border border-dashed bg-warning-100">
                     Any React Node Child
                 </div>

src/core/components/definitionList/definitionListContainer/definitionListContainer.tsx

@@ -7,7 +7,7 @@ export const DefinitionListContainer: React.FC<IDefinitionListContainerProps> =
     const { className, children, ...otherProps } = props;
 
     return (
-        <dl className={classNames('flex w-full flex-col', className)} {...otherProps}>
+        <dl className={classNames('w-full', className)} {...otherProps}>
             {children}
         </dl>
     );

src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx

@@ -55,7 +55,7 @@ export const TruncateDefinition: Story = {
     },
     render: (props: IDefinitionListItemProps) => (
         <DefinitionList.Item {...props}>
-            <div className="truncate text-neutral-500">
+            <div className="truncate">
                 5731588298112881474677942504380315442995089605930142380990784283931790335308357315882981128814746779425043803154429950896059301423809907842839317903353083
             </div>
         </DefinitionList.Item>

src/core/components/definitionList/definitionListItem/definitionListItem.tsx

@@ -14,15 +14,13 @@ export const DefinitionListItem: React.FC<IDefinitionListItemProps> = (props) =>
     return (
         <div
             className={classNames(
-                'flex w-full flex-col items-baseline justify-between gap-y-2 border-b border-neutral-100 py-3 last:border-none md:flex md:flex-row md:gap-x-6 md:py-4',
+                'flex flex-col gap-y-2 border-b border-neutral-100 py-3 last:border-none md:grid md:grid-cols-[1fr_2fr] md:gap-x-6 md:py-4',
                 className,
             )}
             {...otherProps}
         >
-            <dt className="line-clamp-1 shrink-0 text-base font-normal leading-relaxed text-neutral-800 md:line-clamp-6 md:w-40">
-                {term}
-            </dt>
-            <dd className="size-full min-w-0 text-base font-normal leading-relaxed text-neutral-800">{children}</dd>
+            <dt className="line-clamp-1 leading-tight text-neutral-800 md:line-clamp-none">{term}</dt>
+            <dd className="min-w-0 leading-tight text-neutral-500">{children}</dd>
         </div>
     );
 };