transfem-org / Sharkey

🌎 A Sharkish microblogging platform 🚀
https://joinsharkey.org/
74 stars 19 forks source link

bug: minor styling tweak for rounded corners on search widget #198

Closed justdaj closed 7 months ago

justdaj commented 7 months ago

💡 Summary

The Search widget has rounded corner which are highlighted on focus. When "Corner Roundness" is set to "Misskey" the inner Input corners do not match the container, which gives an incomplete border radius.

image

There is no problem when "Sharkey" is selected as the "Corner Roundness"

🥰 Expected Behavior

The border radius should form a complete outline

🤬 Actual Behavior

The corners of the container are being distored.

📝 Steps to Reproduce

  1. Settings
  2. General
  3. Scroll down to "Corner Roundness"
  4. Change to Misskey
  5. Assuming the Search Widget is added, click the search input box

💻 Frontend Environment

* Model and OS of the device(s): Windows 11 or Ubuntu
* Browser: Vivaldi/Chrome or Firefox
* Sharkey: 2023.11.2

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:
justdaj commented 7 months ago

I have the fix for this, but I have no clue how to suggest it in the code as I have little experience of github for changes. I would love to learn, and this could be the simple change which helps.

the _panel class used by the search widget (and others) has it's border-radius set to --radius variable.

The input class used within (MkInput-inputCore-ndfW) has border radius set to --radius-sm

Either change the CSS for the Misskey settings to have --radius-sm match --radius (12px), or adjust the code for the input Class to use --radius

That's my thoughts. Does it help?