Make Contributor Page Responsive for Small Screens

[VitthalGund]

🗹 Requirements

• I have searched the issues for my issue and found nothing related and/or helpful.
• I have searched the FAQ for help.
• I have searched the Wiki for help.

🎯 Subject of the issue

Experienced behavior:
As individuals new to open source, it's disheartening to notice that the Contributor page is no longer responsive. I discovered this issue when working on Issue #1384 and received a reply from @Finii here. As a responsible contributor, I decided to analyze and address this issue optimally.

The Contributor page functions well in desktop view. However, when the screen width falls below 715px, it starts causing problems by overflowing rows in the table that represents individual contributors. To resolve this issue, I made modifications to base.scss, as follows:

@media screen and (max-width: 715px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 0.625em;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 0.8em;
    text-align: right;
  }

  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
  tr {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
  td {
    display: flex;
    justify-content: center;
    margin: 15px;
    width: fit-content;
    text-align: center !important ;
  }
  a {
    justify-content: center;
  }
}

Expected behavior:
For screen sizes less than 715px (width), I've added media queries to change the display of table rows to flex, aligning elements and text at the center both vertically and horizontally. I also added flex-wrap: wrap to wrap elements when they start overflowing from their parent element, which is a table. This modification ensures that the Contributor page works smoothly across all screen sizes. Additionally, I introduced spacing between elements in rows to prevent overcrowding.

🔧 Your Setup

• Operating System: Windows 11
• Browser: Chrome

★ Screenshots (Optional)

Before:

After:

[Finii]

Thanks for raising the Issue and the proposed solution!! 🎉

The solution still has issues, because it does wrap the table rows, the table structure itself is still preserved:

Big divider after every 7 persons

It also has strange jumps of the padding when the screen width is changed, and the vertical alignment is jumping:

I believe the concept of a TABLE is wrong here.

Changed that to a free floating thing with a78dcd7
Let me update the gh-pages, 🔨

[Finii]

After:

[github-actions]

This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a new issue, complete the issue template with all the details necessary to reproduce, and mention this issue as reference.