🐞 - Padding 0 Issues

[saiidhanna21]

Which @codeimage/* package(s) are the source of the bug?

codeimage

Please provide a screenshot or a video to a minimal reproduction of the bug

No response

Description

When padding is set to zero, we lose the radius on the code image. But once we click download it give us the rounded form, however it is cut on corners

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[AlLubila]

I forked the repository to try to fix this bug

[AlLubila]

@saiidhanna21 I forked the repository to try to fix this bug

[AlLubila]

@saiidhanna21 In which file can I find the sidebar code ? Thanks

[riccardoperra]

Hi @AlLubila, all sidebar code is here

https://github.com/riccardoperra/codeimage/tree/main/apps/codeimage/src/components/PropertyEditor

the border radius control is present in this file: https://github.com/riccardoperra/codeimage/blob/main/apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx

However, I think this could be a frame styling issue

https://github.com/riccardoperra/codeimage/tree/main/apps/codeimage/src/components/Terminal

[AlLubila]

@riccardoperra I see, I will do my best to help you then. I will check each link and see how I can fix it(●'◡'●)

[AlLubila]

@riccardoperra @saiidhanna21

My summary while I was debugging:

THE PROBLEM
When the padding is set to 0 the terminal loose its border-radius

OBSERVATION IN THE CONSOLE
When the padding is set to 0:
The class .terminal_wrapper is overlapping by the element.style(The highest container div of terminal) where the custom Radius(var--) is set to 0

SOLUTION
Find a way to disable the custom Radius of the element.style(The highest container div of terminal)

BUT, BUT
After writting code to remove the custom radius style in the highest div of terminal you must set the value of radius in the sidebar to 16 to avoid that background behind the terminal be seen.

VIDEO TO ILLUSTRATE WHAT I WROTE ⬇️ I hope it will help you to fix this issue 👌

CodeImage.-.A.tool.to.manage.and.beautify.your.code.screenshots.-.Brave.2024-05-06.15-00-23.1.1.mp4

[riccardoperra]

Hey @AlLubila, thanks for your explanation. I can investigate on this this weekend and give you more information on how to handle this.

Currently I think that the image backdrop should change his radius according to what the user choose.

However, if the user has set padding to 0, I think that we should disable the border type option (set to none/null) and the shadows (these could already be hidden since we are using overflow auto

[AlLubila]

@riccardoperra Got it, If I find a way to contibute again I will share with you