vertical scrolling neccessary on Galaxy Tab S2 in Chroma-Key-Editing

[danielh84]

Describe the bug
With the Galaxy Tab S2 (1024x762, Device-Pixel-Ratio:2) you get an vertical scrollbar by editing pictures with chroma key (chromakeying.php?filename=20201121_125652.jpg). Maybe the main picture should be smaller to get everything on the tablet without scrolling. You cant see the "save" and "close" buttons without scrolling:

To Reproduce
Steps to reproduce the behavior:

1. Use Ratio of the Galaxy Tab S2
2. Go to "Gallery" and use "Chroma Key"-Button
3. See error

Expected behavior
You have to see the save and close Buttons without scrolling.

Environment (please complete the following information):

• Android
• Fully Kiosk Browser

Photobooth

• Which version of Photobooth are you using? -> Develop-branch 21.11.2020

[andi34]

Hey and sorry for the late reply.

You can try to lower the width here:

photobooth/src/sass/chromakeying.scss

Lines 23 to 29 in 3c6a7bc

	.canvasWrapper {
	width: 1000px;
	display: inline-block;
	max-width: 100%;
	background-color: green;
	border: 4px solid $borderColor;
	}

[danielh84]

width: 850px; works fine with this device.

i will try to find a css-config that it will fit to all resolutions. maybe there is a good opinion.

[andi34]

Something like

@media (max-height: 765px) {
  .canvasWrapper {
    width: 850px;
  }
}

Maybe?

[andi34]

@danielh84 can you try from feature/livekeying branch?

[danielh84]

no, does not work. Tested with classic and modern styling

[andi34]

After #159 you're allowed to use your custom style

Needs all of them to work (can be copy of existing files):

template/custom.template.php
resources/css/custom_style.css
resources/css/custom_chromakeying.css
resources/css/custom_live_chromakeying.css

[andi34]

Any progress on the css changes to not affect all resolutions?