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.

Sign up for GitHub

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

Jump to bottom

Responsiveness Overlapping Text in QuestDB/demo-page #128

Closed
SyedImtiyaz-1 opened this issue Apr 18, 2023 · 8 comments · May be fixed by #129
Closed

Responsiveness Overlapping Text in QuestDB/demo-page #128

SyedImtiyaz-1 opened this issue Apr 18, 2023 · 8 comments · May be fixed by #129

Comments

@SyedImtiyaz-1
Copy link

Describe the bug

  1. Go To = QuestDB.io/Home

  2. Find "Live Demo" => Load Results

  3. Go to : Mobile ratio : 310
    Screenshot from 2023-04-18 16-17-07

  4. check down at Copyright 2023 - text it's overlapping.

  5. note: It is bug in every mobile devices, you can fix this from my given below method.

To reproduce

No response

Expected Behavior

No response

Environment

- **QuestDB version**:7.0.1
- **OS**:Ubuntu 20.04
- **Browser**:Firefox 93.0 (64-bit)

Additional context

Screenshot from 2023-04-18 16-22-50

I can easily fix this here is the example of that :
CSS =>

.jMkckG{
color: rgb(248, 248, 242);
font-size: inherit;
font-style: inherit;
margin-top: 10px
}

This CSS property will make the Copyright overlapping text to it's proper position.
I did this in inspect mode so you can make a proper fix using my code.
@SyedImtiyaz-1 SyedImtiyaz-1 changed the title Responsiveness Issue in QuestDB/demo-page Responsiveness Overlapping Text in QuestDB/demo-page Apr 18, 2023
@bluestreak01
Copy link
Member

Web Console is Open Source: https://github.com/questdb/ui/tree/main/packages/web-console

You can submit your fix there!

@bluestreak01 bluestreak01 transferred this issue from questdb/questdb Apr 18, 2023
@SyedImtiyaz-1
Copy link
Author

Ok, I'll fix this.

@insmac
Copy link
Contributor

insmac commented Apr 18, 2023

Hey @SyedImtiyaz-1 ,
Thanks for looking into this.

What you have proposed is changing rules in a CSS dynamically generated by Styled Components, therefore it's a solution prone to breaking. A better solution would be to extend the <Text> here:
https://github.com/questdb/ui/blob/main/packages/web-console/src/scenes/Footer/index.tsx#L112

i.e.

const FooterText = styled(Text)`
  put your rules here
`

@SyedImtiyaz-1
Copy link
Author

Fixed

@bluestreak01 bluestreak01 mentioned this issue Apr 18, 2023
Open
@bluestreak01
Copy link
Member

also, while this fixes the original issue:

  1. before:

image

  1. after

image

This solution does have side effects.

image

SyedImtiyaz-1 added a commit to SyedImtiyaz-1/ui that referenced this issue Apr 18, 2023
@SyedImtiyaz-1
bugFixed-questdb#128
a27e0e1
@SyedImtiyaz-1
Copy link
Author

Bug Fixed

Screenshot from 2023-04-19 00-16-20

Screenshot from 2023-04-19 00-15-56

This time no issues. @bluestreak01 👍

@SyedImtiyaz-1
Copy link
Author

@bluestreak01 Hello Sir,
Can you please assist to review the change.

@SyedImtiyaz-1
Copy link
Author

can you please review this ? @bluestreak01

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Bug Fixed - Overlapping Text (Footer) SyedImtiyaz-1/ui
3 participants
@insmac @bluestreak01 @SyedImtiyaz-1