18

As of this morning, the following sections of user preferences are now fully responsive:

  1. Preferences
  2. Flair
  3. Applications
  4. My logins
  5. Hide communities
  6. Delete profile

If anything looks strange, please add an answer to this question and try to include some details about your browser and OS.

Remember, we're making the entire site responsive on our way to deprecating our mobile views. This is one of many sections like this one. More soon!

Improve this question
2

9 Answers 9

Reset to default
13

Applications page has overhanging borders

When two applications are shown, they’re shown within this border. They are separated by another border which is a few pixels too wide on either end.

These overhangs are marked with red freehand circles and drop shadows.

It looks fine on similar borders:

A section of the Preferences page is shown for comparison.

Reproducible in Firefox Nightly 94.0a1 and Chromium 93.0.4577.63.

Improve this answer
1
  • 2
    The same bug appears in My Logins, although there the border is only slightly too wide (but still visibly misaligned). Regular Firefox (92.0) on Ubuntu.
    – Marijn
    Sep 14, 2021 at 14:42
12

I'm not sure if this counts as "If anything looks strange" but the responsive view has a lot of whitespace compared to the mobile view, which pushes the settings down. See the following screenshots: enter image description here

Granted, the responsive view displays some more information and navigation, but the amount of extra information doesn't need this much space in my opinion. Quick mockup: enter image description here It may not be really clear from the way the screenshots are displayed but this is the same width as the screenshot above. I am not a web designer and obviously this mockup would have its own problems but a bit less empty space would be nice :)

Browser: Firefox 92.0 on Ubuntu.

Improve this answer
4
  • 4
    I agree with you. Most of the page is white space. You have to scroll in order to reach the actual settings.
    – Ghost
    Sep 14, 2021 at 15:51
  • Maybe this was fixed, or it looks completely different on FF Android - the excess whitespace is almost minimal.
    – Rob
    Sep 15, 2021 at 1:38
  • 2
    @Rob in your screenshot on the right (from a phone I think?) actually no settings are visible without scrolling, while in the old mobile view you would be able to see them. On the left side of your screenshot (a tablet?) it indeed looks better, but this is almost as wide as the previous, non-responsive design (which can still be seen in "email settings" for example, that part is not yet responsive). If you reduce the width a bit more (not possible on a tablet but for example a laptop with a few windows side by side) then the whitespace becomes much more prominent.
    – Marijn
    Sep 15, 2021 at 5:57
  • Martijn, both are from the same phone. In the left view is the "Desktop Site" (Full Site) and on the right is "Mobile" (assuming that you are in desktop mode, the "Mobile" link is in the Footer at the lower left). --- Your screenshot is radically different than mine, so the appearance on different devices is not comparable; that makes reporting bugs (layout errors / design) difficult. --- All devices in the same view should appear quite similar, identical wouldn't be possible without downloading fonts.
    – Rob
    Sep 15, 2021 at 7:47
7

While you are reworking the pages, can you add ids to important elements on them?

For example, the navigation element that contains all the buttons on the left looks like this

<nav class="flex--item fl-shrink0 mr32 md:d-none js-settings-nav" role="navigation">

In order to get to it, one needs to either locate it by the class list, hoping that none other contains the same, or go there by #content, the the 3rd div child, and then the first child of that. It would be helpful, if the pages contained more ids.

Improve this answer
5

"Applications" section: Button and text go outside the border on narrow screens

enter image description here

Tested on Chrome for Android and Chrome on Windows (with window size reduced).

Improve this answer
4
  • 2
    I'm also experiencing this issue. This is how it looks for me on my mobile device: i.stack.imgur.com/jbEaI.jpg
    – Cave Johnson
    Sep 14, 2021 at 16:41
  • 2
    This should be a bit better now. I've gotta figure out a good text-wrapping strategy on this. We should really be processing Markdown here. This page hasn't been touched in probably a decade.
    – Aaron Shekey
    Sep 14, 2021 at 21:12
  • 2
    @AaronShekey I'm not sure you need to process markdown there. From the Stack App Register App page: This text-only blurb will be shown to users during authentication. and that is what you have there. The description is used in other contexts as well and I assume the instruction is text-only because not all consumers will process markdown or markup for that matter. See also: meta.stackexchange.com/a/355034
    – rene
    Sep 14, 2021 at 21:21
  • @AaronShekey Yes, I agree that the text needs to be wrapped. Currently, the button is pushed to the next line even on desktop.
    – 41686d6564
    Sep 15, 2021 at 6:18
3

I’m using only a Google account to log in on SE sites, and tapping the “Remove” button does nothing for me:

"remove" button on My Logins page

Improve this answer
2
  • What do you expect to happen?
    – user707129
    Sep 16, 2021 at 21:06
  • @Xnero for example, a popup saying removing the only single log in account is not possible. Or just a button absence
    – αλεχολυτ
    Sep 17, 2021 at 5:19
3

“Remove” button horizontal position is different for apps with long and short descriptions:

enter image description here

I’m not a designer, but suggesting use only one horizontal position for these buttons to display them in one row. I.e. make the text line for the long description shorter.

Improve this answer
1
3

The navigation drop-down doesn't change selection when using the browser's 'Back' button:

It works fine with the full navigation bar to the left on higher resolutions.

Improve this answer
0
2

This issue is similar to the old one Theme support naming alignment (currently fixed), but happens on small screens (high dpi?) like my iPad Pro 10.5”:

Browser default option for light/dark themes has the text label off-center

This screenshot was taken on ruSO. Nevertheless you can find the same issue on Stack Overflow in Portuguese at least.

I’m using iPadOS 14.8 and Chrome 93.0.4577.39

Improve this answer
1

The text in the navigation drop-down is slightly cut off:

Text in the drop-down says: "My logins" with the 'y' and 'g' cutt off from the botton

Tested on the latest version of Chrome and Firefox on Windows.

Improve this answer
1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .