6

Profile pages across the network don't seem to be responsive. Unless I fully maximize the window on my 1280x800 screen, I'm stuck with horizontal scroll bars. Are there any plans to fix this?

enter image description here

An easy start might be collapsing the left navigation bar, and compacting the Reputation, Badges, and Impact boxes (before stacking them at very small widths.)

Tested on Firefox 72.0b9, Safari 13.0.3, and Chrome 78.0.3904

Improve this question
4
  • 1
    Just tried it on Chrome 49.0.2623.112 and Opera 36.0.2130.80 it works fine on legacy browsers apparently.
    – W.O.
    Commented Nov 15, 2019 at 18:12
  • I had the resolution wrong, forgot about the scaling on my display, so it's really only 1280px wide. Maybe that makes it show up on older browsers?
    – miken32
    Commented Nov 15, 2019 at 18:24
  • Even if I disable responsiveness I don't see it on FF 68.3b4 Mobile (desktop view). My browser is treated as 740 pixels wide despite having a 2960x1440 screen on my phone.
    – Rob
    Commented Nov 15, 2019 at 18:33
  • @Rob scaling and responsiveness on mobile browsers is a whole other thing completely.
    – miken32
    Commented Nov 15, 2019 at 18:55

1 Answer 1

Reset to default
1

Until this is resolved, this is working well for me as a userscript...

// ==UserScript==
// @name Responsive Profile
// @version 0.1
// @description Display a user's Stack Exchange profile without horizontal scroll bars
// @namespace miken32
// @author Michael Newton
// @grant none
// @license GNU GPL v3 or later (http://www.gnu.org/copyleft/gpl.html)
//
// @include https://stackoverflow.com/users/*
// @include https://meta.stackoverflow.com/users/*
// @include https://serverfault.com/users/*
// @include https://meta.serverfault.com/users/*
// @include https://superuser.com/users/*
// @include https://meta.superuser.com/users/*
// @include https://askubuntu.com/users/*
// @include https://meta.askubuntu.com/users/*
// @include https://stackapps.com/users/*
// @include https://*.stackexchange.com/users/*
// ==/UserScript==

var rules = [
  "html, body {min-width: 0}",
  ".user-show-new .user-rep-chart-summary .user-rep-chart-summary-tooltip {width: calc(100% / 32 - 3px)}",
  ".user-show-new .user-rep-chart-summary .user-rep-chart-summary-bar {width: 100%}",
  ".user-show-new .user-panel .answer-hyperlink, .user-show-new .user-panel .question-hyperlink {width: auto; padding-left: 10px}",
  ".user-show-new .user-panel table {table-layout: fixed}",
  ".user-show-new .user-rep .rep-amount {padding-right: 0}",
  ".user-show-new .count-cell, .user-show-new .icon-cell {width: 40px}",
  ".user-show-new #user-tab-answers .answer-votes, .user-show-new .user-panel .mini-counts, .user-show-new .user-rep .rep-amount .rep-down, .user-show-new .user-rep .rep-amount .rep-up {min-width: 0; width: 100%}"
];

if (document.querySelector("body.user-page")) {
    var style = document.createElement("style");
    style.textContent = rules.join("\n");
    document.getElementsByTagName("head")[0].appendChild(style);
}
Improve this answer

You must log in to answer this question.

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