Theme creator coding hidden by keyboard in ipad on iOS

Bug
, ,
1

not sure if fixable but this is kind of brutal to work with if a person needs to put code at the end of any existing CSS - keyboard hiding code text box:

repro:

  1. in Safari iOS on iPad (6th gen)
  2. go to Discourse Theme Creator
  3. try to add more code to end of some existing CSS in a theme
4 Likes
2

Priority/Severity: Medium - While this may not directly affect the functionality of Discourse, it’s a crucial usability issue that could frustrate administrators and designers trying to edit themes on mobile devices.

Platform: iPad (6th generation), Safari browser on iOS.

Description:

When editing CSS in Discourse Theme Creator on Safari using an iPad, the iOS keyboard obscures the text input box. This makes it challenging to view or edit code at the end of the CSS file.

Reproducible Steps:

  1. Open the Safari browser on an iPad (6th generation).
  2. Navigate to the Discourse Theme Creator website.
  3. Select an existing theme to edit.
  4. Navigate to the CSS editing section of the selected theme.
  5. Scroll to the end of the existing CSS.
  6. Click into the textbox at the end of the CSS to bring up the keyboard.
  7. Attempt to add a new CSS rule at the end of the existing CSS.
  8. Notice that the iOS keyboard appears and obscures the view of the text box, making it difficult to see or edit the code.
1 Like
3

Certainly fixable Lilly, but given the edge casey ness of this I am afraid I can’t quite prioritize this at the moment.

I am putting a pr-welcome on this for now.

Keep in mind getting sizing right in iOS is really hard… it took @pmusaraj and @joffreyjaffeux and myself many many iterations just to sort out chat and core composers.

This is not a trivial fix sadly.

4 Likes
4

oh it’s fine for me personally, i don’t use the Theme Creator on my ipad often anyways. sometimes i like using it for a quick code test if i’m not near my laptop. code can be placed anywhere higher in the text box as well so very edgy. thanks @sam ! :slight_smile:

3 Likes