Commit 194b66dd authored by Esmael El-Moslimany's avatar Esmael El-Moslimany Committed by Chromium LUCI CQ

WebUI NTP: explicitly add space to the bottom of the content area

When the NTP has a vertical scroll bar, the NTP contents had a 32px
empty space at the bottom. This was from the cr-button which was using
"position: sticky" to stick to the bottom right of the window. The empty
space looks good, but it should not be due to the height of the
cr-button (it is not obvious).

This CL introduces a div to explicitly set a 32px empty space at the
bottom of the NTP content area, removing the dependency on the cr-button
height.

Change-Id: Ib035affef92445d3c7f1effdc61b5daea108c4ae
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2638633
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: default avatarTibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845304}
parent 41a4fa2f
...@@ -105,17 +105,13 @@ ...@@ -105,17 +105,13 @@
display: none; display: none;
} }
#customizeButtonSpacer {
flex-grow: 1;
}
#customizeButtonContainer { #customizeButtonContainer {
align-self: flex-end; align-self: flex-end;
background-color: var(--ntp-background-override-color); background-color: var(--ntp-background-override-color);
border-radius: calc(.5 * var(--cr-button-height)); border-radius: calc(.5 * var(--cr-button-height));
bottom: 16px; bottom: 16px;
margin-inline-end: 16px; margin-inline-end: 16px;
position: sticky; position: fixed;
} }
:host([show-background-image_]) #customizeButtonContainer { :host([show-background-image_]) #customizeButtonContainer {
...@@ -235,6 +231,12 @@ ...@@ -235,6 +231,12 @@
font-size: .75rem; font-size: .75rem;
} }
#contentBottomSpacer {
flex-shrink: 0;
height: 32px;
width: 1px;
}
svg { svg {
position: fixed; position: fixed;
} }
...@@ -287,7 +289,6 @@ ...@@ -287,7 +289,6 @@
[[backgroundImageAttribution2_]] [[backgroundImageAttribution2_]]
</div> </div>
</a> </a>
<div id="customizeButtonSpacer"></div>
<!-- cr-button has a transparent background. This leads to incorrect <!-- cr-button has a transparent background. This leads to incorrect
results when a custom background is set. Therefore, wrap customize results when a custom background is set. Therefore, wrap customize
button in container to enfore solid background color. --> button in container to enfore solid background color. -->
...@@ -307,6 +308,7 @@ ...@@ -307,6 +308,7 @@
</div> </div>
</template> </template>
</dom-if> </dom-if>
<div id="contentBottomSpacer"></div>
</div> </div>
<dom-if if="[[showVoiceSearchOverlay_]]" restamp> <dom-if if="[[showVoiceSearchOverlay_]]" restamp>
<template> <template>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment