Issue with Subtitle Circle and Layout on Smaller Screens

[VitthalGund]

🗹 Requirements

• I have searched the issues for my issue and found nothing related and/or helpful
• I have searched the FAQ for help
• I have searched the Wiki for help

🎯 Subject of the issue

As discussed in Pull Request #1368, I've addressed an issue where the circle shrinks horizontally but not vertically. There's also an additional problem with the layout of the entire website.

Experienced behavior:
For screens with a width less than 767px, the subtitle inner circle inside the features section shrinks horizontally but not vertically. This results in an unusual appearance and overflow from its parent element.

Furthermore, while debugging this, I discovered a significant issue that breaks the layout of the entire website. Specifically, within the Font Patcher script section, the <details> tag overflows from its parent. This results in a horizontal scrollbar, which disrupts the website's layout.

Expected behavior:
I would expect the subtitle inner circle inside the features section to shrink both horizontally and vertically as the screen size decreases to ensure proper alignment.

Regarding the <details> tag, when a detail section is open, the <summary> section should overflow from its parent element without causing layout issues.

Assign this issue to me 🙋🏻‍♂️

🔧 Your Setup

• Operating System: Windows 11
• Browser: Chrome

★ Screenshots (Optional)

Before:

After:

Before:

After:

[Finii]

Very welcome!

[Finii]

Fixed via #1387

[Finii]

The fix via #1387 breaks all other subtitle circles, for example here:

wide version

small version

Fixed it the noob way via c88da98 instead.

[VitthalGund]

The fix via #1387 breaks all other subtitle circles, for example here:

wide version

small version

Fixed it the noob way via c88da98 instead.

Hi @Finii ,

Thank you for your thorough review of the changes made in PR #1387. I appreciate your feedback and the visual examples you've provided to illustrate the issue.

It's evident that the fix in the PR caused unintended problems with other subtitle circles, as demonstrated in the images you shared. I'm sorry for any inconvenience this may have caused.

I will take a closer look at the commit c88da98 to understand the adjustments you've made. If you believe that this is a more suitable approach, I'd be interested in exploring it further.

It's important to ensure that the fix addresses the issue without introducing new problems. Please let me know if there are any specific details or considerations I should be aware of while reviewing your solution.

Best regards,
@VitthalGund

[Finii]

Dear VitthalGund!

Thank you for your engagement :-)

What I (re)did was hard setting the size of the circle in pixels. I guess that fits to the approach to set some sizes depending on screen width - this is all not scaling in a ordinary sense, but just jumps in 2 or 3 distinct sizes that are pixel-wise hard coded. I know this has drawbacks for very high resolution displays (for example I work with a 4k display), but at least I usually just turn the in-browser magnification up on pages that seem unreadable (120% usually). That works ok-ish.

This method (not directly scaling with the width but just having some few discrete width-switch-points is how the whole website is designed. For example navbar on top etc.

If one hard codes both width and hight as pixels it is guaranteed to be circular. I have only rudimentary HTML knowledge, but the usual 'size to fit' can - as far as I know - not connect two size values. But we would need that to keep the aspect ratio 1:1 (i.e. circle circular). And I guess that works very well for all circular dividers except the all-icons-circle - because that contains so many things. All other circles contain just 1 thing (one icon-text block, or one image). With the multiple lines in the all-icons-circle this becomes a problem if font size, line size, character width, etc change...

I'm not really sure why it is only a problem with the all-icons-circle. The all-fonts-circle next to it is also multiline and it never had any problems.

Some circles this time shown with Safari

Here the left one is an image, but the other two are also multi lines of text and they work flawlessly.
They even seem like hiding text that is too wide, like a hole punched into the page and the text is behind it - the circle size independent of content:

Just text marked with the mouse cursor

That effect would be desirable, I guess, for the all-icons-circle also. Why is it (the all icons circle) different 🤔

I don't know.

Another thing that I noticed is that at some smaller width SOME of the circles loose/drop their outer ring, while other keep it??! But maybe this is specifically implemented as design choice. It does not bother me, just noticed.

"Features" circle without but "all icons" with backdrop

I'm not sure if anything needs to be done with this. I checked the website with Linux/Firefox, Linux/Chromium, Windows/Firefox, MacOs/Safari, Android/Firefox and it renders ok-ish on all. Often the circles are not really round or centered (which could be improved), but not drastically wrong either.

[github-actions]

This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a new issue, complete the issue template with all the details necessary to reproduce, and mention this issue as reference.