Profile fields redesign (#37513)

app/javascript/mastodon/components/mini_card/list.tsx

@@ -11,11 +11,13 @@ import classes from './styles.module.css';
 
 interface MiniCardListProps {
   cards?: (Pick<MiniCardProps, 'label' | 'value'> & { key?: Key })[];
+  className?: string;
   onOverflowClick?: MouseEventHandler;
 }
 
 export const MiniCardList: FC<MiniCardListProps> = ({
   cards = [],
+  className,
   onOverflowClick,
 }) => {
   const {
@@ -27,29 +29,37 @@ export const MiniCardList: FC<MiniCardListProps> = ({
     maxWidth,
   } = useOverflow();
 
+  if (!cards.length) {
+    return null;
+  }
+
   return (
-    <div className={classes.wrapper} ref={wrapperRef}>
+    <div className={classNames(classes.wrapper, className)} ref={wrapperRef}>
       <dl className={classes.list} ref={listRef} style={{ maxWidth }}>
         {cards.map((card, index) => (
           <MiniCard
             key={card.key ?? index}
             label={card.label}
             value={card.value}
-            hidden={index >= hiddenIndex}
+            hidden={hasOverflow && index >= hiddenIndex}
           />
         ))}
       </dl>
-      <button
-        type='button'
-        className={classNames(classes.more, !hasOverflow && classes.hidden)}
-        onClick={onOverflowClick}
-      >
-        <FormattedMessage
-          id='minicard.more_items'
-          defaultMessage='+ {count} more'
-          values={{ count: hiddenCount }}
-        />
-      </button>
+      {cards.length > 1 && (
+        <div>
+          <button
+            type='button'
+            className={classNames(classes.more, !hasOverflow && classes.hidden)}
+            onClick={onOverflowClick}
+          >
+            <FormattedMessage
+              id='minicard.more_items'
+              defaultMessage='+{count}'
+              values={{ count: hiddenCount }}
+            />
+          </button>
+        </div>
+      )}
     </div>
   );
 };

app/javascript/mastodon/components/mini_card/mini_card.stories.tsx

@@ -7,18 +7,6 @@ const meta = {
   title: 'Components/MiniCard',
   component: MiniCardList,
   args: {
-    cards: [
-      { label: 'Pronouns', value: 'they/them' },
-      {
-        label: 'Website',
-        value: <a href='https://example.com'>bowie-the-db.meow</a>,
-      },
-      {
-        label: 'Free playlists',
-        value: <a href='https://soundcloud.com/bowie-the-dj'>soundcloud.com</a>,
-      },
-      { label: 'Location', value: 'Purris, France' },
-    ],
     onOverflowClick: action('Overflow clicked'),
   },
   render(args) {
@@ -43,7 +31,22 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    cards: [
+      { label: 'Pronouns', value: 'they/them' },
+      {
+        label: 'Website',
+        value: <a href='https://example.com'>bowie-the-db.meow</a>,
+      },
+      {
+        label: 'Free playlists',
+        value: <a href='https://soundcloud.com/bowie-the-dj'>soundcloud.com</a>,
+      },
+      { label: 'Location', value: 'Purris, France' },
+    ],
+  },
+};
 
 export const LongValue: Story = {
   args: {
@@ -60,3 +63,9 @@ export const LongValue: Story = {
     ],
   },
 };
+
+export const OneCard: Story = {
+  args: {
+    cards: [{ label: 'Pronouns', value: 'they/them' }],
+  },
+};

app/javascript/mastodon/components/mini_card/styles.module.css

@@ -6,7 +6,6 @@
 }
 
 .list {
-  min-width: 0;
   display: flex;
   gap: 4px;
   overflow: hidden;
@@ -21,16 +20,19 @@
   flex-shrink: 0;
 }
 
-.card {
-  max-width: 20vw;
-  overflow: hidden;
-}
-
 .more {
   color: var(--color-text-secondary);
   font-weight: 600;
   appearance: none;
   background: none;
+  aspect-ratio: 1;
+  height: 100%;
+  transition: all 300ms linear;
+}
+
+.more:hover {
+  background-color: var(--color-bg-brand-softer);
+  color: var(--color-text-primary);
 }
 
 .hidden {