aws-amplify / aws-amplify/amplify-ui

Liveness component video isn't responsive on desktop

Open
#4,422 2 comments 0 reactions 0 assignees View on GitHub
feature-request Liveness React
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).

### On which framework/platform are you having an issue?

React

### Which UI component?

Liveness

### How is your app built?

Create React App

### What browsers are you seeing the problem on?

Chrome

### Which region are you seeing the problem in?

eu-west-1

### Please describe your bug.

Liveness component video overflows on desktop causing the users to scroll to see the full oval.
Works fine on mobile.
![overflow](https://github.com/aws-amplify/amplify-ui/assets/79095120/63af43e2-101b-4d18-a393-fb8b7be8b66f)

### What's the expected behaviour?

Liveness component should resize to fit in the page without the user having to scroll.

### Help us reproduce the bug!

Create a new create-react-app project with aws-amplify@5.3.10, @aws-amplify/ui-react-liveness@2.0.6 and @aws-amplify/ui-react@5.3.0

### Code Snippet

```javascript
import {ThemeProvider} from '@aws-amplify/ui-react';
import {Amplify} from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import awsexports from './aws-exports';
import {FaceLivenessDetector} from '@aws-amplify/ui-react-liveness';

Amplify.configure(awsexports);

function App() {
const handleAnalysisComplete = () => {...};

return (

{
console.error(error);
}}
/>

);
}
```

### Console log output

_No response_

### Additional information and screenshots

I've tried wrapping the FaceLivenessDetector component around a div with width: 100%, height: 100vh and overflow: hidden and the issue persists.
Using a div with the max-width attribute will resize it, but it isn't pratical.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the listed Create React App and package versions, using the FaceLivenessDetector example and Chrome on desktop. Inspect the Liveness component's responsive layout behavior; it is done when the video and full oval fit the page without scrolling on desktop while remaining usable on mobile.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.