Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Values field card lacks width in mobile viewports #7230

Closed
harshit078 opened this issue Sep 24, 2024 · 3 comments
Closed

Values field card lacks width in mobile viewports #7230

harshit078 opened this issue Sep 24, 2024 · 3 comments
Labels
prio: low scope: front Issues that are affecting the frontend side only size: short type: design improvement

Comments

@harshit078
Copy link
Contributor

Note

Go to Settings/Data model/open any existing objects/open fields
In mobile viewports, Custom and standard chips clips through the card

Current Behaviour

Screenshot 2024-09-24 at 9 51 42 AM

Expected behavior

Since the header and chip can't fit in one row space for all mobile viewports so they can be arranged in the following possible way-

Screenshot 2024-09-23 at 1 10 18 PM
@harshit078
Copy link
Contributor Author

@Bonapara, Instead of passing flex-direction: row and altering other values which would result in a design disruptency. Can we pass flex direction: column only when there are 2 cards as a result it would only hamper that particular case. What are you views on this ? Is there ant better approach to follow.

Screenshot 2024-09-25 at 10 38 40 AM Screenshot 2024-09-25 at 10 38 52 AM

Instead of -

Screenshot 2024-09-25 at 10 40 08 AM Screenshot 2024-09-25 at 10 40 32 AM

@Bonapara
Copy link
Member

Much better @harshit078, thanks! 🙏

bosiraphael pushed a commit that referenced this issue Sep 25, 2024
## Description

- This PR fixes the issue #7230 

## Current Behaviour
<img width="411" alt="Screenshot 2024-09-24 at 9 51 42 AM"
src="https://github.com/user-attachments/assets/65d283b8-24fa-4e25-b3bd-2e35efabf768">

## After

<img width="556" alt="Screenshot 2024-09-25 at 10 38 40 AM"
src="https://github.com/user-attachments/assets/97a32497-4230-438f-b048-707bdcd9b674">

<img width="578" alt="Screenshot 2024-09-25 at 10 38 52 AM"
src="https://github.com/user-attachments/assets/74e7d055-96fc-4bf4-bddc-e84cf03a6599">
@ehconitin
Copy link
Contributor

fixed in #7248

@github-project-automation github-project-automation bot moved this from 🆕 New to ✅ Done in Product development ✅ Sep 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
prio: low scope: front Issues that are affecting the frontend side only size: short type: design improvement
Projects
Archived in project
Development

No branches or pull requests

3 participants