@bundle-stats/ui 4.3.2 → 4.3.3

package/lib/app/app.module.css

@@ -12,6 +12,11 @@
   text-align: center;
 }
 
+.header {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .summaryContainer {
   padding-top: var(--space-medium);
   padding-bottom: var(--space-xsmall);
@@ -52,8 +57,6 @@
     top: 0;
     right: 0;
     height: var(--header-height);
-    background-color: var(--color-background);
-    border-bottom: 1px solid var(--color-outline);
   }
 
   .tabsContainer {

package/lib/components/jobs-header/jobs-header.js

@@ -9,7 +9,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const utils_1 = require("@bundle-stats/utils");
 const i18n_1 = __importDefault(require("../../i18n"));
 const flex_stack_1 = require("../../layout/flex-stack");
-const stack_1 = require("../../layout/stack");
 const icon_1 = require("../../ui/icon");
 const tag_1 = require("../../ui/tag");
 const jobs_header_module_css_1 = __importDefault(require("./jobs-header.module.css"));
@@ -17,23 +16,22 @@ const Item = (props) => {
     const { className, tag, job } = props;
     const { builtAt, hash } = job.meta?.webpack || {};
     const rootClassName = (0, classnames_1.default)(jobs_header_module_css_1.default.item, className);
-    return (react_1.default.createElement(stack_1.Stack, { className: rootClassName, space: "xxsmall" },
-        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xsmall", alignItems: "center" },
-            react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", as: "h1", className: jobs_header_module_css_1.default.itemTitle },
-                react_1.default.createElement("span", null, `#${job.internalBuildNumber}`),
-                tag && react_1.default.createElement(tag_1.Tag, { className: jobs_header_module_css_1.default.itemTag }, tag)),
-            builtAt && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: jobs_header_module_css_1.default.itemMeta },
-                react_1.default.createElement(icon_1.Icon, { glyph: "clock", className: jobs_header_module_css_1.default.itemMetaIcon }),
-                react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, (0, utils_1.formatDateTime)({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
-            hash && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash", className: jobs_header_module_css_1.default.itemMeta },
-                react_1.default.createElement(icon_1.Icon, { glyph: "commit", className: jobs_header_module_css_1.default.itemMetaIcon }),
-                react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, hash.slice(0, 7)))))));
+    return (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xsmall", alignItems: "center", className: rootClassName },
+        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", as: "h1", className: jobs_header_module_css_1.default.itemTitle },
+            react_1.default.createElement("span", null, `#${job.internalBuildNumber}`),
+            tag && react_1.default.createElement(tag_1.Tag, { className: jobs_header_module_css_1.default.itemTag }, tag)),
+        builtAt && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: jobs_header_module_css_1.default.itemMeta },
+            react_1.default.createElement(icon_1.Icon, { glyph: "clock", className: jobs_header_module_css_1.default.itemMetaIcon }),
+            react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, (0, utils_1.formatDateTime)({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+        hash && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: "Webpack bundle hash", className: jobs_header_module_css_1.default.itemMeta },
+            react_1.default.createElement(icon_1.Icon, { glyph: "commit", className: jobs_header_module_css_1.default.itemMetaIcon }),
+            react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, hash.slice(0, 7))))));
 };
 exports.Item = Item;
 const JobsHeader = (props) => {
     const { className, jobs } = props;
     const rootClassName = (0, classnames_1.default)(jobs_header_module_css_1.default.root, className);
-    return (react_1.default.createElement(flex_stack_1.FlexStack, { className: rootClassName }, jobs?.map((job, index) => (react_1.default.createElement(exports.Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? i18n_1.default.CURRENT : i18n_1.default.BASELINE })))));
+    return (react_1.default.createElement("header", { className: rootClassName }, jobs?.map((job, index) => (react_1.default.createElement(exports.Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? i18n_1.default.CURRENT : i18n_1.default.BASELINE })))));
 };
 exports.JobsHeader = JobsHeader;
 //# sourceMappingURL=jobs-header.js.map

package/lib/components/jobs-header/jobs-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAqD;AAErD,sDAA8B;AAC9B,wDAAoD;AACpD,8CAA2C;AAC3C,wCAAqC;AACrC,sCAAmC;AACnC,sFAA2C;AAepC,MAAM,IAAI,GAAG,CAAC,KAA8C,EAAE,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,aAAK,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,SAAS;QAC9C,8BAAC,sBAAS,IAAC,KAAK,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ;YAC3C,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,gCAAG,CAAC,SAAS;gBAC1D,4CAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;gBAC3C,GAAG,IAAI,8BAAC,SAAG,IAAC,SAAS,EAAE,gCAAG,CAAC,OAAO,IAAG,GAAG,CAAO,CACtC;YAEX,OAAO,IAAI,CACV,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,gCAAG,CAAC,QAAQ;gBAEvB,8BAAC,WAAI,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;gBACnD,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAC9B,IAAA,sBAAc,EAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;YAEA,IAAI,IAAI,CACP,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,gCAAG,CAAC,QAAQ;gBAEvB,8BAAC,WAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;gBACpD,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ,CAClD,CACb,CACS,CACN,CACT,CAAC;AACJ,CAAC,CAAC;AA7CW,QAAA,IAAI,QA6Cf;AAMK,MAAM,UAAU,GAAG,CAAC,KAAuD,EAAE,EAAE;IACpF,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,SAAS,EAAE,aAAa,IAChC,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,8BAAC,YAAI,IACH,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB"}
+{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAqD;AAErD,sDAA8B;AAC9B,wDAAoD;AAEpD,wCAAqC;AACrC,sCAAmC;AACnC,sFAA2C;AAepC,MAAM,IAAI,GAAG,CAAC,KAA8C,EAAE,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,KAAK,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,aAAa;QACpE,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,gCAAG,CAAC,SAAS;YAC1D,4CAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,8BAAC,SAAG,IAAC,SAAS,EAAE,gCAAG,CAAC,OAAO,IAAG,GAAG,CAAO,CACtC;QAEX,OAAO,IAAI,CACV,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,gCAAG,CAAC,QAAQ;YAEvB,8BAAC,WAAI,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;YACnD,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAC9B,IAAA,sBAAc,EAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;QAEA,IAAI,IAAI,CACP,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,gCAAG,CAAC,QAAQ;YAEvB,8BAAC,WAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;YACpD,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ,CAClD,CACb,CACS,CACb,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,IAAI,QA4Cf;AAMK,MAAM,UAAU,GAAG,CAAC,KAAuD,EAAE,EAAE;IACpF,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,0CAAQ,SAAS,EAAE,aAAa,IAC7B,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,8BAAC,YAAI,IACH,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB"}

package/lib/components/jobs-header/jobs-header.module.css

@@ -1,13 +1,33 @@
 .root {
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
   padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
@@ -32,3 +52,12 @@
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/lib/components/summary/summary.js

@@ -10,7 +10,6 @@ const get_1 = __importDefault(require("lodash/get"));
 const utils_1 = require("@bundle-stats/utils");
 const constants_1 = require("../../constants");
 const box_1 = require("../../layout/box");
-const flex_stack_1 = require("../../layout/flex-stack");
 const component_link_1 = require("../component-link");
 const metric_run_info_1 = require("../metric-run-info");
 const summary_module_css_1 = __importDefault(require("./summary.module.css"));
@@ -22,6 +21,6 @@ const SummaryItem = (props) => {
         react_1.default.createElement(metric_run_info_1.MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showDelta && componentLink?.showDelta, showBaseline: showBaseline, size: size, loading: loading })));
 };
 const Summary = ({ className = '', size = 'medium', keys = constants_1.METRICS_WEBPACK_GENERAL, data = null, loading = false, showSummaryItemDelta = true, showSummaryItemBaseline = true, summaryItemLink = component_link_1.ComponentLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
-    react_1.default.createElement(flex_stack_1.FlexStack, { space: "small", className: summary_module_css_1.default.items }, keys.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, customLink: summaryItemLink, size: size, loading: loading, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))));
+    react_1.default.createElement("div", { className: summary_module_css_1.default.items }, keys.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, customLink: summaryItemLink, size: size, loading: loading, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))));
 exports.Summary = Summary;
 //# sourceMappingURL=summary.js.map

package/lib/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA2C;AAC3C,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAA0D;AAC1D,0CAAuC;AACvC,wDAAoD;AACpD,sDAAkD;AAClD,wDAAuE;AACvE,8EAAuC;AAYvC,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,8BAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAA,aAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,EAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,8BAAC,+BAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,EAChD,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAiBK,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,mCAAuB,EAC9B,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,8BAAa,GACY,EAAE,EAAE,CAAC,CAChD,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,8BAAC,sBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,4BAAG,CAAC,KAAK,IAC1C,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,4BAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACQ,CACR,CACP,CAAC;AA3BW,QAAA,OAAO,WA2BlB"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA2C;AAC3C,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAA0D;AAC1D,0CAAuC;AAEvC,sDAAkD;AAClD,wDAAuE;AACvE,8EAAuC;AAYvC,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,8BAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAA,aAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,EAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,8BAAC,+BAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,EAChD,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAiBK,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,mCAAuB,EAC9B,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,8BAAa,GACY,EAAE,EAAE,CAAC,CAChD,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACpB,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,4BAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACE,CACJ,CACP,CAAC;AA3BW,QAAA,OAAO,WA2BlB"}

package/lib/components/summary/summary.module.css

@@ -1,10 +1,20 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
 }
 
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + var(--summary-gap));
+  margin-top: calc(0px - var(--summary-gap));
+  margin-left: calc(0px - var(--summary-gap));
+}
+
 .item {
+  margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 16em;
+  min-width: 14em;
   text-decoration: none;
 }
 
@@ -25,4 +35,3 @@
   color: var(--color-primary-dark);
   text-decoration: none;
 }
-

package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.module.css

@@ -3,6 +3,8 @@
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
+  width: 100%;
+  overflow: hidden;
 }
 
 .item {

package/lib-esm/app/app.module.css

@@ -12,6 +12,11 @@
   text-align: center;
 }
 
+.header {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .summaryContainer {
   padding-top: var(--space-medium);
   padding-bottom: var(--space-xsmall);
@@ -52,8 +57,6 @@
     top: 0;
     right: 0;
     height: var(--header-height);
-    background-color: var(--color-background);
-    border-bottom: 1px solid var(--color-outline);
   }
 
   .tabsContainer {

package/lib-esm/components/jobs-header/jobs-header.js

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import { formatDateTime } from '@bundle-stats/utils';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import { Tag } from '../../ui/tag';
 import css from './jobs-header.module.css';
@@ -12,21 +11,20 @@ export const Item = (props) => {
     const { className, tag, job } = props;
     const { builtAt, hash } = ((_a = job.meta) === null || _a === void 0 ? void 0 : _a.webpack) || {};
     const rootClassName = cx(css.item, className);
-    return (React.createElement(Stack, { className: rootClassName, space: "xxsmall" },
-        React.createElement(FlexStack, { space: "xsmall", alignItems: "center" },
-            React.createElement(FlexStack, { space: "xxxsmall", as: "h1", className: css.itemTitle },
-                React.createElement("span", null, `#${job.internalBuildNumber}`),
-                tag && React.createElement(Tag, { className: css.itemTag }, tag)),
-            builtAt && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: css.itemMeta },
-                React.createElement(Icon, { glyph: "clock", className: css.itemMetaIcon }),
-                React.createElement("span", { className: css.itemMetaText }, formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
-            hash && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash", className: css.itemMeta },
-                React.createElement(Icon, { glyph: "commit", className: css.itemMetaIcon }),
-                React.createElement("span", { className: css.itemMetaText }, hash.slice(0, 7)))))));
+    return (React.createElement(FlexStack, { space: "xsmall", alignItems: "center", className: rootClassName },
+        React.createElement(FlexStack, { space: "xxxsmall", as: "h1", className: css.itemTitle },
+            React.createElement("span", null, `#${job.internalBuildNumber}`),
+            tag && React.createElement(Tag, { className: css.itemTag }, tag)),
+        builtAt && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: css.itemMeta },
+            React.createElement(Icon, { glyph: "clock", className: css.itemMetaIcon }),
+            React.createElement("span", { className: css.itemMetaText }, formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+        hash && (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: "Webpack bundle hash", className: css.itemMeta },
+            React.createElement(Icon, { glyph: "commit", className: css.itemMetaIcon }),
+            React.createElement("span", { className: css.itemMetaText }, hash.slice(0, 7))))));
 };
 export const JobsHeader = (props) => {
     const { className, jobs } = props;
     const rootClassName = cx(css.root, className);
-    return (React.createElement(FlexStack, { className: rootClassName }, jobs === null || jobs === void 0 ? void 0 : jobs.map((job, index) => (React.createElement(Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? I18N.CURRENT : I18N.BASELINE })))));
+    return (React.createElement("header", { className: rootClassName }, jobs === null || jobs === void 0 ? void 0 : jobs.map((job, index) => (React.createElement(Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? I18N.CURRENT : I18N.BASELINE })))));
 };
 //# sourceMappingURL=jobs-header.js.map

package/lib-esm/components/jobs-header/jobs-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/jobs-header/jobs-header.module.css

@@ -1,13 +1,33 @@
 .root {
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
   padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
@@ -32,3 +52,12 @@
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/lib-esm/components/summary/summary.js

@@ -4,7 +4,6 @@ import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
 import { Box } from '../../layout/box';
-import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo } from '../metric-run-info';
 import css from './summary.module.css';
@@ -16,5 +15,5 @@ const SummaryItem = (props) => {
         React.createElement(MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showDelta && (componentLink === null || componentLink === void 0 ? void 0 : componentLink.showDelta), showBaseline: showBaseline, size: size, loading: loading })));
 };
 export const Summary = ({ className = '', size = 'medium', keys = METRICS_WEBPACK_GENERAL, data = null, loading = false, showSummaryItemDelta = true, showSummaryItemBaseline = true, summaryItemLink = ComponentLink, }) => (React.createElement(Box, { className: cx(css.root, className) },
-    React.createElement(FlexStack, { space: "small", className: css.items }, keys.map((metricId) => (React.createElement(SummaryItem, { key: metricId, className: css.item, metricId: metricId, data: data, customLink: summaryItemLink, size: size, loading: loading, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))));
+    React.createElement("div", { className: css.items }, keys.map((metricId) => (React.createElement(SummaryItem, { key: metricId, className: css.item, metricId: metricId, data: data, customLink: summaryItemLink, size: size, loading: loading, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))));
 //# sourceMappingURL=summary.js.map

package/lib-esm/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAsB,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAYvC,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,sBAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAA,EAChD,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAiBF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,uBAAuB,EAC9B,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,aAAa,GACY,EAAE,EAAE,CAAC,CAChD,oBAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,CAAC,KAAK,IAC1C,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,oBAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,GAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACQ,CACR,CACP,CAAC"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAsB,MAAM,oBAAoB,CAAC;AACvE,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAYvC,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,sBAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAA,EAChD,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAiBF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,uBAAuB,EAC9B,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,aAAa,GACY,EAAE,EAAE,CAAC,CAChD,oBAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,IACpB,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,oBAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,GAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACE,CACJ,CACP,CAAC"}

package/lib-esm/components/summary/summary.module.css

@@ -1,10 +1,20 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
 }
 
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + var(--summary-gap));
+  margin-top: calc(0px - var(--summary-gap));
+  margin-left: calc(0px - var(--summary-gap));
+}
+
 .item {
+  margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 16em;
+  min-width: 14em;
   text-decoration: none;
 }
 
@@ -25,4 +35,3 @@
   color: var(--color-primary-dark);
   text-decoration: none;
 }
-

package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.module.css

@@ -3,6 +3,8 @@
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
+  width: 100%;
+  overflow: hidden;
 }
 
 .item {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,7 @@
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.0.35",
+    "@types/react": "18.0.37",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
@@ -56,7 +56,7 @@
     "jest-date-mock": "1.0.8",
     "jest-environment-jsdom": "29.5.0",
     "lodash": "4.17.21",
-    "postcss": "8.4.21",
+    "postcss": "8.4.23",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-docgen-typescript-plugin": "^1.0.5",
@@ -76,11 +76,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.3.2",
+    "@bundle-stats/utils": "^4.3.3",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "9c09c9504f6cf796860662a1db9617a5b70e9f47"
+  "gitHead": "572057f29bb9cbbbdbdeb7b91002170105c16ac6"
 }

package/src/app/app.module.css

@@ -12,6 +12,11 @@
   text-align: center;
 }
 
+.header {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .summaryContainer {
   padding-top: var(--space-medium);
   padding-bottom: var(--space-xsmall);
@@ -52,8 +57,6 @@
     top: 0;
     right: 0;
     height: var(--header-height);
-    background-color: var(--color-background);
-    border-bottom: 1px solid var(--color-outline);
   }
 
   .tabsContainer {

package/src/components/jobs-header/jobs-header.module.css

@@ -1,13 +1,33 @@
 .root {
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
   padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
@@ -32,3 +52,12 @@
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/src/components/jobs-header/jobs-header.tsx

@@ -29,43 +29,42 @@ export const Item = (props: ItemProps & React.ComponentProps<'div'>) => {
   const rootClassName = cx(css.item, className);
 
   return (
-    <Stack className={rootClassName} space="xxsmall">
-      <FlexStack space="xsmall" alignItems="center">
-        <FlexStack space="xxxsmall" as="h1" className={css.itemTitle}>
-          <span>{`#${job.internalBuildNumber}`}</span>
-          {tag && <Tag className={css.itemTag}>{tag}</Tag>}
-        </FlexStack>
+    <FlexStack space="xsmall" alignItems="center" className={rootClassName}>
+      <FlexStack space="xxxsmall" as="h1" className={css.itemTitle}>
+        <span>{`#${job.internalBuildNumber}`}</span>
+        {tag && <Tag className={css.itemTag}>{tag}</Tag>}
+      </FlexStack>
 
-        {builtAt && (
-          <FlexStack
-            space="xxxsmall"
-            alignItems="center"
-            inline
-            as="span"
-            title={builtAt}
-            className={css.itemMeta}
-          >
-            <Icon glyph="clock" className={css.itemMetaIcon} />
-            <span className={css.itemMetaText}>
-              {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
-            </span>
-          </FlexStack>
-        )}
+      {builtAt && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title={builtAt}
+          className={css.itemMeta}
+        >
+          <Icon glyph="clock" className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>
+            {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
+          </span>
+        </FlexStack>
+      )}
 
-        {hash && (
-          <FlexStack
-            space="xxxsmall"
-            alignItems="center"
-            inline
-            title="Webpack bundle hash"
-            className={css.itemMeta}
-          >
-            <Icon glyph="commit" className={css.itemMetaIcon} />
-            <span className={css.itemMetaText}>{hash.slice(0, 7)}</span>
-          </FlexStack>
-        )}
-      </FlexStack>
-    </Stack>
+      {hash && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title="Webpack bundle hash"
+          className={css.itemMeta}
+        >
+          <Icon glyph="commit" className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>{hash.slice(0, 7)}</span>
+        </FlexStack>
+      )}
+    </FlexStack>
   );
 };
 
@@ -78,7 +77,7 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
   const rootClassName = cx(css.root, className);
 
   return (
-    <FlexStack className={rootClassName}>
+    <header className={rootClassName}>
       {jobs?.map((job, index) => (
         <Item
           key={job.internalBuildNumber || index}
@@ -86,6 +85,6 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
           tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
         />
       ))}
-    </FlexStack>
+    </header>
   );
 };

package/src/components/summary/summary.module.css

@@ -1,10 +1,20 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
 }
 
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + var(--summary-gap));
+  margin-top: calc(0px - var(--summary-gap));
+  margin-left: calc(0px - var(--summary-gap));
+}
+
 .item {
+  margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 16em;
+  min-width: 14em;
   text-decoration: none;
 }
 
@@ -25,4 +35,3 @@
   color: var(--color-primary-dark);
   text-decoration: none;
 }
-

package/src/components/summary/summary.tsx

@@ -84,20 +84,20 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <FlexStack space="small" className={css.items}>
-      {keys.map((metricId) => (
-        <SummaryItem
-          key={metricId}
-          className={css.item}
-          metricId={metricId}
-          data={data}
-          customLink={summaryItemLink}
-          size={size}
-          loading={loading}
-          showDelta={showSummaryItemDelta}
-          showBaseline={showSummaryItemBaseline}
-        />
-      ))}
-    </FlexStack>
+    <div className={css.items}>
+        {keys.map((metricId) => (
+          <SummaryItem
+            key={metricId}
+            className={css.item}
+            metricId={metricId}
+            data={data}
+            customLink={summaryItemLink}
+            size={size}
+            loading={loading}
+            showDelta={showSummaryItemDelta}
+            showBaseline={showSummaryItemBaseline}
+          />
+        ))}
+      </div>
   </Box>
 );

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.module.css

@@ -3,6 +3,8 @@
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
+  width: 100%;
+  overflow: hidden;
 }
 
 .item {