Fiks visning av «Delt fra innboks»-elementer på mobil (#3754)

src/features/amUI/common/InstanceList/InstanceList.stories.tsx

@@ -78,6 +78,22 @@ const noDialogLookup: InstanceDelegation = {
   permissions: [],
 };
 
+const longServiceTitle: InstanceDelegation = {
+  resource: {
+    ...digdirResource,
+    identifier: 'digdir-informasjonsmelding-modernisering',
+    title: 'Informasjonsmelding i forbindelse med modernisering av tilgangsstyring i Altinn',
+  },
+  instance: { refId: 'urn:altinn:instance-id:pqr6789012', type: null },
+  permissions: [],
+  dialogLookup: {
+    status: 'Success',
+    dialogId: 'df333e75-0000-0000-0000-000000000002',
+    instanceRef: 'urn:altinn:instance-id:pqr6789012',
+    title: [{ languageCode: 'nb', value: 'Gi fullmakt til tilgangspakker i nye Altinn' }],
+  },
+};
+
 const Wrapper = ({ children }: { children: ReactNode }) => (
   <Provider store={store}>
     <RootProvider>{children}</RootProvider>
@@ -106,10 +122,16 @@ export const AllTitleCases: Story = {
       dialogNotFoundCorrespondence,
       dialogForbidden,
       noDialogLookup,
+      longServiceTitle,
     ],
   },
 };
 
+export const Mobile: Story = {
+  args: { instances: [longServiceTitle, dialogSuccess] },
+  globals: { viewport: { value: 'mobile1', isRotated: false } },
+};
+
 export const Loading: Story = {
   args: { instances: [], isLoading: true },
 };

src/features/amUI/common/InstanceList/InstanceList.tsx

@@ -110,18 +110,17 @@ export const InstanceList = ({
               const item: DialogListItemProps = {
                 id: instanceRowId(instanceDelegation),
                 title,
-                description: `${instance.refId} ${title}`,
                 sender: {
                   name: resource.resourceOwnerName ?? '',
                   type: 'company',
                   imageUrl: providerLogoUrl ?? resource.resourceOwnerLogoUrl ?? undefined,
                   imageUrlAlt: resource.resourceOwnerName ?? '',
                 },
-                updatedAt: instance.refId,
-                updatedAtLabel: `${t('instance.instance_id_label')}: ${getInstanceShortId(instance.refId)}`,
-                extendedStatusLabel: serviceTitle
-                  ? `${t('instance.service_title_label')}: ${serviceTitle}`
-                  : undefined,
+                summary:
+                  serviceTitle && serviceTitle !== title
+                    ? `${t('instance.service_title_label')}: ${serviceTitle}`
+                    : undefined,
+                extendedStatusLabel: `${t('instance.instance_id_label')}: ${getInstanceShortId(instance.refId)}`,
               };
               const Component = getItemAs?.(instanceDelegation);
               const className =
@@ -131,6 +130,7 @@ export const InstanceList = ({
                 <InstanceListItemRow
                   key={item.id}
                   size='md'
+                  color='neutral'
                   as={Component ?? (onSelect ? 'button' : undefined)}
                   interactive={interactive || !!onSelect}
                   onClick={onSelect ? () => onSelect(instanceDelegation) : undefined}

src/features/amUI/common/InstanceList/InstanceListSkeleton.tsx

@@ -7,11 +7,11 @@ export const InstanceListSkeleton = () => {
         const item: DialogListItemProps = {
           id: `instance-loading-${index}`,
           title: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
-          description: 'xxxxxxxxx',
           sender: {
             name: 'xxxxxxxxx',
             type: 'company',
           },
+          summary: 'xxxxxxxxxxxxxxxxxxx',
           updatedAt: 'xxxxxxxxxx',
           updatedAtLabel: 'xxxxxxxxxx',
         };
@@ -20,6 +20,7 @@ export const InstanceListSkeleton = () => {
           <DialogListItem
             key={item.id}
             size='md'
+            color='neutral'
             loading={true}
             {...item}
           />