diff --git a/packages/ui/src/components/asset-info/asset-info.tsx b/packages/ui/src/components/asset-info/asset-info.tsx
index 26bdb9d2c8..5954f4120d 100644
--- a/packages/ui/src/components/asset-info/asset-info.tsx
+++ b/packages/ui/src/components/asset-info/asset-info.tsx
@@ -14,7 +14,7 @@ import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
import { FlexStack } from '../../layout/flex-stack';
import { Tag } from '../../ui/tag';
import { ComponentLink } from '../component-link';
-import { EntryInfo } from '../entry-info';
+import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
import css from './asset-info.module.css';
interface ChunkModulesLinkProps {
@@ -134,12 +134,13 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
>
{item.fileType && (
-
{fileTypeLabel}
-
+
)}
diff --git a/packages/ui/src/components/entry-info/entry-info.module.css b/packages/ui/src/components/entry-info/entry-info.module.css
index 3040400aaa..aa12fddb00 100644
--- a/packages/ui/src/components/entry-info/entry-info.module.css
+++ b/packages/ui/src/components/entry-info/entry-info.module.css
@@ -84,7 +84,33 @@
}
.metaLabel {
+ padding: 2px 0;
display: inline-block;
margin-right: var(--space-xxxsmall);
- min-width: 5em;
+ min-width: 6em;
+ color: var(--color-text-light);
+}
+
+.metaLink {
+ padding: 2px var(--space-xxxsmall);
+ border-radius: var(--radius-small);
+ background: var(--color-highlight);
+ transition: var(--transition-out);
+
+ overflow-wrap: break-word;
+ text-decoration: none;
+ text-transform: none;
+ font-weight: normal;
+}
+
+.metaLink + .metaLink {
+ margin-left: var(--space-xxsmall);
+}
+
+.metaLink:hover,
+.metaLink:active,
+.metaLink:focus {
+ transition: var(--transition-in);
+ background: var(--color-outline);
+ color: var(--color-primary-dark);
}
diff --git a/packages/ui/src/components/entry-info/entry-info.tsx b/packages/ui/src/components/entry-info/entry-info.tsx
index c8669e3bd3..1a35a4898f 100644
--- a/packages/ui/src/components/entry-info/entry-info.tsx
+++ b/packages/ui/src/components/entry-info/entry-info.tsx
@@ -11,6 +11,15 @@ import { Table } from '../../ui/table';
import { RunInfo } from '../run-info';
import css from './entry-info.module.css';
+interface EntryInfoMetaLinkProps {
+ as?: React.ElementType;
+}
+
+export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.ComponentProps<'a'>) => {
+ const { as: BaseComponent = 'a', className = '', ...restProps } = props;
+ return ;
+};
+
interface EntryInfoMetaProps {
label: string;
}
diff --git a/packages/ui/src/components/module-info/module-info.module.css b/packages/ui/src/components/module-info/module-info.module.css
index 7b0f4d594b..e370226bfe 100644
--- a/packages/ui/src/components/module-info/module-info.module.css
+++ b/packages/ui/src/components/module-info/module-info.module.css
@@ -1,15 +1,3 @@
.chunksItems {
display: inline;
}
-
-.chunksItem {
- overflow-wrap: break-word;
- text-decoration: none;
- text-transform: none;
- font-weight: normal;
- font-size: 1em;
-}
-
-.chunksItem + .chunksItem {
- margin-left: var(--space-xxxsmall);
-}
diff --git a/packages/ui/src/components/module-info/module-info.tsx b/packages/ui/src/components/module-info/module-info.tsx
index 89e7c95675..2f914cd313 100644
--- a/packages/ui/src/components/module-info/module-info.tsx
+++ b/packages/ui/src/components/module-info/module-info.tsx
@@ -16,7 +16,7 @@ import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
import { Stack } from '../../layout/stack';
import { Tag } from '../../ui/tag';
import { ComponentLink } from '../component-link';
-import { EntryInfo } from '../entry-info';
+import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
import css from './module-info.module.css';
interface ModuleInfoProps {
@@ -83,12 +83,13 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
}
return (
-
{chunk.name}
-
+
);
})}
@@ -96,19 +97,23 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
{item?.fileType && (
-
+
{fileTypeLabel}
-
+
)}
-
{sourceTypeLabel}
-
+