fix empty state

ui/address/mud/AddressMudBreadcrumbs.tsx

@@ -45,7 +45,7 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
 
   if (isLast) {
     return (
-      <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px">
+      <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px" alignItems="center">
         <Box
           overflow="hidden"
           whiteSpace="nowrap"
@@ -59,7 +59,7 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
   }
 
   return (
-    <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px">
+    <Grid gap={ 2 } overflow="hidden" templateColumns="auto 24px" alignItems="center">
       <LinkInternal
         href={ href }
         onClick={ onLinkClick }

ui/address/mud/AddressMudTable.pw.tsx

@@ -41,3 +41,19 @@ test('expanded view +@mobile', async({ render, mockApiResponse }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test('empty +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse(
+    'address_mud_records',
+    { ...mudRecords, items: [] },
+    { pathParams: { hash: ADDRESS_HASH, table_id: TABLE_ID } });
+
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressMudTable tableId={ TABLE_ID }/>
+    </Box>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/mud/AddressMudTable.tsx

@@ -129,6 +129,13 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
     />
   ) : null;
 
+  const emptyText = (
+    <>
+      <chakra.span>There are no records for </chakra.span>
+      { data?.table.table_full_name ? <chakra.span fontWeight={ 600 }>{ data?.table.table_full_name }</chakra.span> : 'this table' }
+    </>
+  );
+
   return (
     <>
       { isMobile && (
@@ -137,7 +144,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
       <DataListDisplay
         isError={ isError }
         items={ data?.items }
-        emptyText="There are no records for this table."
+        emptyText={ emptyText }
         filterProps={{
           emptyFilteredText: `Couldn${ apos }t find records that match your filter query.`,
           hasActiveFilters: Object.values(filters).some(Boolean),
@@ -145,6 +152,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
         content={ content }
         actionBar={ actionBar }
         showActionBarIfEmpty={ !isMobile }
+        mt={ data?.items.length ? 0 : 2 }
       />
     </>
   );

ui/shared/DataListDisplay.tsx

@@ -13,7 +13,7 @@ type FilterProps = {
 type Props = {
   isError: boolean;
   items?: Array<unknown>;
-  emptyText: string;
+  emptyText: string | React.ReactNode;
   actionBar?: React.ReactNode;
   showActionBarIfEmpty?: boolean;
   content: React.ReactNode;