I have been working on a personal project where I added thumbnails for images that can be scrolled through and clicked to set the main image. However, I encountered a strange issue.
To demonstrate the problem, I created a Stackblitz project here: https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css
When I set the line height of .thumbnail-image-button-icon to 20px in thumbnails-display.component.css (or import ~@angular/material/prebuilt-themes/deeppurple-amber.css in style.css), the clickable area for "Next Thumbnail Page Clicked" extends beyond the .thumbnail-image-button-down button.
However, when the line-height is set to inherit, which computes to normal (without importing the angular theme), the clickable area for "Next Thumbnail Page Clicked" aligns exactly with the .thumbnail-image-button-down button.
I initially thought that reducing the line-height may only affect the visual appearance but not the actual size of the div. However, as evident from the screenshots, the difference in heights is significant. Additionally, upon inspecting the .thumbnail-image-button-down button, it is clear that it is not expanded.
Is there a way to decrease the size of the .thumbnail-image-button-down button along with the clickable area for "Next Thumbnail Page Clicked"?