call view cut off on mobile

(#45) Bug Won't fix mobile ui voice

7mo agoby RexSystem edited originally by @uberfig on GitHub

Summary

When calling on mobile the call view is too wide and important buttons are cut off image

Steps to reproduce

join a voice channel on mobile

Environment (optional)

firefox pwa on android

549651795-1266958d-cea3-4170-90fa-0739daaabece.png
1080×2408 | 429 kB

History

1 comment

RexSystem 1 vote 7mo ago originally by @uberfig on GitHub OP

removing/reducing the padding in webpack://fluxer_app/src/components/voice/VoiceCallView.module.css

.controlBarContainer {
	grid-area: footer;
	position: relative;
	z-index: 30;
	display: flex;
	justify-content: center;
	background: var(--background-primary);
	--voice-control-horizontal-padding: 1.5rem;
	--voice-control-top-padding: 1.5rem;
	--voice-control-bottom-padding: calc(1rem + env(safe-area-inset-bottom, 0px));
	/* padding-left: var(--voice-control-horizontal-padding);  <- setting this to zero*/
	/* padding-right: var(--voice-control-horizontal-padding);  <- setting this to zero*/
	padding-top: var(--voice-control-top-padding);
	padding-bottom: var(--voice-control-bottom-padding);
	pointer-events: none;
}

and removing the spacing in webpack://fluxer_app/src/components/voice/VoiceControlBar.module.css

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	/* gap: 0.75rem; <- setting this to zero*/
}

makes it somewhat usable for mobile devices although I'm somewhat uncertain if it'll cause problems for other stuff and I haven't figured out the project structure yet so I can't really test it and make a pr yet demo of the improved call ui on mobile

549780222-94fd5b82-b158-4687-b889-04602c8674a6.png
415×838 | 35 kB

Permalink