[DevOverlay] Adjust border style for header and footer

[devjiwonchoi]

This PR removed margins and added paddings based on the new design, covering the style to not break on the change.
Note that the Call Stack's style (missing padding) is affected but will be followed up with the new style change.

Before

Light

Dark

After

Light

Dark

Closes NDX-622

[devjiwonchoi]

• [DevOverlay] Adjust border style for header and footer #74480 👈 (View in Graphite)
• [DevOverlay] Pass footer message from error containers #74493
• [DevOverlay] Remove temporary header children #74490
• [DevOverlay] Add error overlay footer and feedback #74472
• [DevOverlay] Implement New Overlay Layout with Bottom Stacks #74466
• [DevOverlay] Add color palette script #74465
• [DevOverlay] Remove Dialog Banner #74464
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
buildDuration	21s	19s	N/A
buildDurationCached	17.9s	15.1s	N/A
nodeModulesSize	417 MB	417 MB	⚠️ +19.4 kB
nextStartRea..uration (ms)	522ms	522ms	✓

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
1187-HASH.js gzip	52.6 kB	52.6 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.36 kB	5.36 kB	N/A
bccd1874-HASH.js gzip	52.8 kB	52.8 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.49 kB	4.49 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
_buildManifest.js gzip	749 B	746 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
index.html gzip	524 B	522 B	N/A
link.html gzip	538 B	536 B	N/A
withRouter.html gzip	520 B	519 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	206 kB	206 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
middleware-b..fest.js gzip	669 B	668 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	363 kB	363 kB	⚠️ +216 B
app-page-exp..prod.js gzip	129 kB	129 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	138 kB	138 kB	✓
app-page.run...dev.js gzip	351 kB	352 kB	⚠️ +197 B
app-page.run..prod.js gzip	125 kB	125 kB	✓
app-route-ex...dev.js gzip	37.5 kB	37.5 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	2.44 MB	2.44 MB	⚠️ +413 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03-_devoverlay_adjust_border_style_for_header_and_footer	Change
0.pack gzip	2.08 MB	2.09 MB	⚠️ +6.46 kB
index.pack gzip	74 kB	73.4 kB	N/A
Overall change	2.08 MB	2.09 MB	⚠️ +6.46 kB

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: 002eb4d

[ijjk]

Tests Passed

[devjiwonchoi]

Closing as this PR affects unnecessary style breaks, and would make hard to revert. Will bring back once we port and finalize the layouts.

[devjiwonchoi]

Merge activity

• Jan 3, 3:17 PM EST: A user merged this pull request with Graphite.