iOS Safari issues

[saxamaphone69]

It appears that sidedish itself doesn't run correctly (something that is becoming very apparent) when running on iOS. Though, this would mainly affect additional rice such as the bottom board footer and swapping file info.

Some of these issues are pure CSS issues, so should be easier to debug and fix.

• rotating the phone causes the text/layout to shift, which stems from text-size-adjust [1]
• animation-timeline: scroll() isnt yet supported in both firefox and safari, so that should probably be in a @supports or progressively enhanced/feature detected within sidedish
• anchor positioning isnt yet supported in both firefox and safari, again should be wrapped in @supports
• field-sizing isnt yet supported in both firefox and safari...
• #shortcuts, especially when within a thread, dominates #header-bar. ideally shortcut icons, as screen size shrinks, would join the menu in the header, but feasibly doing that seems tough
• the padding: 0 1rem on .board and .thread seems huge on the phone?
• stubs still look bad (they look bad on desktop too to be fair)
• settings (as a nav rail) doesnt correctly overflow and seems very "zoomed in"
• .navLinks looks bad because of no field-sizing, but it has always looked bad when at narrow resolutions
• .pagelist seems really impractical to use at that narrow resolution

https://github.com/user-attachments/assets/6d2ddce8-6c34-4535-95d4-2fc288be4547
https://github.com/user-attachments/assets/ca37c5b6-afbd-425a-a2fd-51291771070e
https://github.com/user-attachments/assets/7ab7f21c-6784-4233-ad18-6c3995d99e23
https://github.com/user-attachments/assets/25efca9e-f100-4680-bf37-df55ab096739
https://github.com/user-attachments/assets/8e963d01-30d8-480b-b035-6a36bea9802c
https://github.com/user-attachments/assets/de0ca2ad-adaa-4f67-9ac2-82e73ba0dd79
https://github.com/user-attachments/assets/21092731-e6fb-44c7-91b5-49a3478fa98a

[saxamaphone69]

I've added the following CSS and that's fixed the landscape iPhone rotation issue.

:root
	-webkit-text-size-adjust none
	text-size-adjust none

[saxamaphone69]

• .summary needs padding
• the fancy footer needs a fallback for when sidedish doesn't work, and a better way to handle the 5 columns

https://github.com/user-attachments/assets/803a5349-1818-4621-858e-0800e0044f41
https://github.com/user-attachments/assets/56b94619-2020-4d43-b5de-c110db6c1780
https://github.com/user-attachments/assets/1e654ab2-91e8-4f5d-9b3a-daa1d075a10a

[saxamaphone69]

Oh, and:

• #qr needs a max-width

[saxamaphone69]

.pagelist already has overflow-x: auto

[saxamaphone69]

• change "hitbox" size when on hover?
• #qr also needs a max-height, or make Comment not as tall

https://github.com/user-attachments/assets/8606de25-a137-4fd9-bf04-6de1804dad2f
https://github.com/user-attachments/assets/73037e15-9f9d-4b75-8385-6a69c8e81f13