fix grid repositioning on label change

[brad-decker]

resolves #8687

Takes advantage of visibility: hidden/visible which does not remove the space the element takes up on the screen from the dom... as well as a single column/row grid to overlap both off/on labels in the toggle button. I'm not used to BEM syntax so I'm sure the class naming could use some work.

This works for the alert screen because max-content will include visibility: hidden items.

For this demo i modified the HTML content to a longer off statement:

Mixed toggles

Both on

[Gudahtt]

This seems promising!

[metamaskbot]

Builds ready [f04029a]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (712 ± 65 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	32	99	49	18	9
		domContentLoaded	382	927	710	136	65
		load	384	929	712	136	65
		domInteractive	382	927	710	136	65

[metamaskbot]

Builds ready [bffabc8]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (712 ± 80 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	29	100	50	18	9
		domContentLoaded	454	918	710	167	80
		load	456	919	712	167	80
		domInteractive	453	918	709	167	80

[Gudahtt]

LGTM!

[Gudahtt]

Huh... I didn't know you could assign & to a variable! That's neat.