Fixed padding between icon and text in UI

[Muniir1]

Description

Fixed padding between icon and text in UI

Generated using OpenSauced.

What type of PR is this? (check all applicable)

• [ ] 🍕 Feature
• [x] 🐛 Bug Fix
• [ ] 📝 Documentation Update
• [x] 🎨 Style
• [ ] 🧑‍💻 Code Refactor
• [ ] 🔥 Performance Improvements
• [x] ✅ Test
• [ ] 🤖 Build
• [ ] 🔁 CI
• [ ] 📦 Chore (Release)
• [ ] ⏩ Revert

Related Tickets & Documents

Fixes #20

Mobile & Desktop Screenshots/Recordings

the problem

the result

Added tests?

• [ ] 👍 yes
• [x] 🙅 no, because they aren't needed
• [ ] 🙋 no, because I need help

Added to documentation?

• [ ] 📜 README.md
• [ ] 📓 docs.opensauced.pizza
• [ ] 🍕 dev.to/opensauced
• [ ] 📕 storybook
• [x] 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[netlify[bot]]

✅ Deploy Preview for sauced-intro ready!

Name	Link
🔨 Latest commit	e8054bd146b666b29312a899dc0f80aa0e324424
🔍 Latest deploy log	https://app.netlify.com/sites/sauced-intro/deploys/652318562139c600091521f3
😎 Deploy Preview	https://deploy-preview-27--sauced-intro.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Muniir1]

fixed no padding between icon and the text before after

the problem was not only the introduction page also the other pages and i fixed all of them

here are different sizes before

after

[Muniir1]

@bdougie please can you merge this?

[dev-phantom]

Please can you give this PR a descriptive title And also can you tag the issue this PR fixed You can use the (e.g Fixes #123) this helps to auto close the issue when this PR gets merged

[Muniir1]

@dev-phantom thanks for your replay i made those changes, have a look

[dev-phantom]

@dev-phantom thanks for your replay i made those changes, have a look

Ok nice But it is "text" not "tex"

And I don't feel you need to add "tag" to the PR template as it already has "related tickets and documents"

[Muniir1]

@dev-phantom i am really sorry, how about now!?

[dev-phantom]

@dev-phantom i am really sorry, how about now!?

No need to apologize The issue you fixed is #20 not #27 And you didn't change the "Tex" in the PR title

[Muniir1]

@dev-phantom what about now!

[bdougie]

I'll also point out that we could potentially ship a fix upstream to the docsify project. Seems like a straight forward contribution @Muniir1

[Muniir1]

@bdougie "Thank you for the insights! I understand the concern about using !important excessively and its potential impact on the custom UI. Considering the drawbacks, I agree that it would be best to explore other options and potentially build a custom solution to achieve the desired UI customizations. Additionally, I'll look into the possibility of contributing a fix or improvement to the 'docsify' project to address the issue more elegantly. Your input has been very helpful in guiding my approach. Thanks again!"

[Muniir1]

@bdougie can you please check the changes that i just made and it works the same as the result before. and i do not use !important please have a look thanks

[bdougie]

@bdougie can you please check the changes that i just made and it works the same as the result before. and i do not use !important please have a look thanks

The changes are great and work. I question the approach manually adding the ids. What happens when we add a new section? Or a new language?

Does it make sense to modify the class-name instead?

Also, does it make more sense to fix here in the theme? https://github.com/docsifyjs/docsify/blob/develop/src/themes/vue.styl

[NsdHSO]

@Muniir1 why in the section of the description is checked the test checkbox ???