<p></p>
<blockquote>
<p dir="auto">Does this table need <em>show</em> buttons? You can have a link from <em>Reason</em> to the block page. Maybe the <em>edit</em> and <em>revoke</em> buttons can also be removed and/or placed on individual block pages.</p>
</blockquote>
<p dir="auto">Sure, these are good ideas for this specific table.</p>
<blockquote>
<p dir="auto">Is it a statement about the existing design, which doesn't work well even with 960px in case there's a long username?</p>
</blockquote>
<p dir="auto">No, it's not related to long user names.</p>
<p dir="auto">What I mean is that our site has to be responsive, i.e. work at every width of screen. So the contents need to be appropriate for 400px wide screens, 800px wide screens, 1200px wide screens etc. When you are looking at content on a page, you need to think "does this also work at medium and narrow screens". Now there are lots of ways to achieve this, e.g. removing columns (or hiding low-priority ones on narrow screens?) from a table, ensuring wrapping works, splitting content into different sections and laying them out differently (e.g. see the user dashboard page) - it's a case-by-case thing, depending on the content. And in most cases I suspect by the time you've optimised the content for medium and narrow screens, it'll work just fine on large screens and you probably don't care so much about super-wide screens at that point anyway.</p>
<p dir="auto">It's important to follow a "mobile-first" (or more accurately, a "narrow-screen first") approach. i.e. make it work on narrow screens, make it work on medium screens, make it work on large screens.</p>
<p dir="auto">In this case, if it's not working on a large screen, and you want to fix this by making it wider, I bet it's not working on medium screens either. Making the content wider therefore isn't the right solution, it's just a workaround.</p>
<p dir="auto">If, however, it works well on narrow, medium and large, but there's also a way to make it work even better on xl screens (by including more information, or showing things side-by-side, or whatever) then that could be a good reason to add more width.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4199#issuecomment-1700673602">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLIQVN3PS4SY4QRJGDTXYBJK3ANCNFSM6AAAAAA34EDLLU">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLN2CXR3P4TZQG3BSQDXYBJK3A5CNFSM6AAAAAA34EDLLWWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTFLY4EE.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4199/c1700673602</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4199#issuecomment-1700673602",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4199#issuecomment-1700673602",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>