From 46420fbe131c4925a92107daf780775764b84e2b Mon Sep 17 00:00:00 2001
From: Nicole Harris <n.harris@kabucreative.com>
Date: Mon, 2 Sep 2019 07:01:40 +0100
Subject: [PATCH] Ensure tables scale regardless of text size or length

---
 warehouse/static/js/warehouse/index.js        |   8 +-
 .../static/sass/blocks/_breadcrumbs.scss      |  14 +-
 warehouse/static/sass/blocks/_button.scss     |   1 +
 .../sass/blocks/_project-description.scss     |  38 +-
 warehouse/static/sass/blocks/_table.scss      | 690 ++++--------------
 .../static/sass/tools/_design-utilities.scss  |  42 --
 warehouse/templates/includes/hash-modal.html  |  32 +-
 warehouse/templates/manage/account.html       |  47 +-
 warehouse/templates/manage/history.html       |  12 +-
 warehouse/templates/manage/journal.html       |   7 +-
 warehouse/templates/manage/release.html       |  36 +-
 warehouse/templates/manage/releases.html      |  19 +-
 warehouse/templates/manage/roles.html         |  22 +-
 warehouse/templates/packaging/detail.html     |  22 +-
 14 files changed, 318 insertions(+), 672 deletions(-)

diff --git a/warehouse/static/js/warehouse/index.js b/warehouse/static/js/warehouse/index.js
index 0c005806bc53..4eb8c8af32e4 100644
--- a/warehouse/static/js/warehouse/index.js
+++ b/warehouse/static/js/warehouse/index.js
@@ -143,18 +143,18 @@ docReady(() => {
 });
 
 docReady(() => {
-  let changeRoleForms = document.querySelectorAll("form.change-role");
+  let changeRoleForms = document.querySelectorAll("form.table__change-role");
 
   if (changeRoleForms) {
     for (let form of changeRoleForms) {
-      let changeButton = form.querySelector("button.change-button");
-      let changeSelect = form.querySelector("select.change-field");
+      let changeButton = form.querySelector("button.table__change-button");
+      let changeSelect = form.querySelector("select.table__change-field");
 
       changeSelect.addEventListener("change", function (event) {
         if (event.target.value === changeSelect.dataset.original) {
           changeButton.style.display = "none";
         } else {
-          changeButton.style.display = "inline-block";
+          changeButton.style.display = "block";
         }
       });
     }
diff --git a/warehouse/static/sass/blocks/_breadcrumbs.scss b/warehouse/static/sass/blocks/_breadcrumbs.scss
index 76b5f008b0f8..570e4f221462 100644
--- a/warehouse/static/sass/blocks/_breadcrumbs.scss
+++ b/warehouse/static/sass/blocks/_breadcrumbs.scss
@@ -15,8 +15,8 @@
 /*
   Navigation breadcrumbs.
 
-  <nav aria-label="Breadcrumb">
-    <ul class="breadcrumbs">
+  <nav aria-label="Breadcrumb" class="breadcrumbs">
+    <ul>
       <li class="breadcrumbs__breadcrumb"></li>
       <li class="breadcrumbs__breadcrumb"></li>
     </ul>
@@ -25,9 +25,13 @@
 
 
 .breadcrumbs {
-  margin: 0;
-  padding: 0;
-  @include clearfix;
+  padding-bottom: ($spacing-unit / 2);
+
+  ul {
+    margin: 0;
+    padding: 0;
+    @include clearfix;
+  }
 
   &__breadcrumb {
     list-style-type: none;
diff --git a/warehouse/static/sass/blocks/_button.scss b/warehouse/static/sass/blocks/_button.scss
index d8ac7e18ea9f..93253ed9347d 100644
--- a/warehouse/static/sass/blocks/_button.scss
+++ b/warehouse/static/sass/blocks/_button.scss
@@ -41,6 +41,7 @@
   border: 1px solid $accessible-border-color;
   border-radius: 3px;
   display: inline-block;
+  text-align: center;
   @include link-without-underline;
 
   i.fa {
diff --git a/warehouse/static/sass/blocks/_project-description.scss b/warehouse/static/sass/blocks/_project-description.scss
index 1c1fbdd61df7..1d5c42ddafd1 100644
--- a/warehouse/static/sass/blocks/_project-description.scss
+++ b/warehouse/static/sass/blocks/_project-description.scss
@@ -153,8 +153,44 @@
   }
 
   table {
-    @include table;
+    @include card;
+    @include border-width(1px null);
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-align: left;
+    width: 100%;
     margin: $spacing-unit 0 0;
+
+    tr {
+      border-bottom: 1px solid $border-color;
+    }
+
+    th,
+    td {
+      margin: 0;
+      border: 0;
+      padding: 10px 7px;
+      border-right: 1px solid $border-color;
+    }
+
+    thead tr {
+      background-color: $white;
+
+      th {
+        vertical-align: bottom;
+        font-weight: $bold-font-weight;
+      }
+    }
+
+    tbody {
+      tr {
+        background-color: darken($background-color, 0.75);
+      }
+
+      tr:nth-child(even) {
+        background-color: darken($background-color, 2);
+      }
+    }
   }
 
   hr {
diff --git a/warehouse/static/sass/blocks/_table.scss b/warehouse/static/sass/blocks/_table.scss
index e135d8ec5b61..20654a365be1 100644
--- a/warehouse/static/sass/blocks/_table.scss
+++ b/warehouse/static/sass/blocks/_table.scss
@@ -34,358 +34,207 @@
     upload column on that table.
 
    Modifiers:
-     - light: removes borders and backgrounds from table - maintains only horizontal borders
      - downloads: specific styles for downloads table on project detail page
      - releases: specific styles for releases table on manage project page
      - files: specific styles for files table on releases tab
+     - history: specific styles for project journals
      - hashes: specific styles for the hashes table on an individual file
      - collaborators: specific styles for managing a project's collaborators
      - emails: specific styles for emails on the manage account page
      - 2fa: specific styles for 2fa methods on the manage account page
      - api-tokens: specific styles for API tokens on the manage account page
      - security-logs: specific styles for security logs on the manage account page
+
  */
 
 // TABLE
-@mixin mobile-friendly-dropdown {
-  .dropdown {
-    display: block;
-    float: none;
-
-    .button {
-      display: block;
-      width: 100%;
-    }
+@mixin mobile-friendly-table {
+  border-bottom: 1px solid $base-grey;
 
-    .dropdown__content,
-    .dropdown__link {
-      width: 100%;
-    }
+  thead {
+    display: none;
   }
-}
 
-.table {
-  @include table;
+  tbody tr th,
+  tbody tr td,
+  tbody tr th:first-child,
+  tbody tr td:first-child,
+  tbody tr th:last-child,
+  tbody tr td:last-child {
+    display: block;
+    width: 100%;
+    text-align: left;
+    border-bottom: 0;
+    padding: 2px 0;
+  }
 
-  &--light {
-    border: 0;
-    font-size: $base-font-size;
-    box-shadow: none;
-    background-color: transparent;
+  tbody tr td:first-child,
+  tbody tr th:first-child {
+    border-top: 1px solid $base-grey;
+    padding-top: 15px;
 
-    thead tr {
-      background-color: transparent;
-    }
-
-    tbody tr,
-    tbody tr:nth-child(2n),
-    th,
-    td {
-      border: 0;
-      background-color: transparent;
-      padding: 10px 0;
+    .table__mobile-label {
+      margin-top: 0;
     }
+  }
 
-    th,
-    td {
-      border-bottom: 1px solid $base-grey;
-    }
+  tbody tr td:last-child {
+    padding-bottom: 15px;
+  }
 
-    tbody tr:last-child td,
-    tbody tr:last-child th {
-      border-bottom: 0;
-    }
+  .table__mobile-label {
+    display: block;
+    margin-top: 5px;
   }
 
-  &--downloads {
-    box-sizing: border-box;
-    table-layout: fixed;
-    word-wrap: break-word;
-    margin-top: ($spacing-unit / 2);
-    margin-bottom: 10px;
+  .table__align-right {
+    text-align: left;
+  }
 
-    .table__filename {
-      width: 64%;
-    }
+  tbody tr td .dropdown {
+    display: block;
+    float: none;
 
-    .table__type {
-      width: 10%;
+    .dropdown__content,
+    .dropdown__link {
+      width: unset;
+      right: auto;
     }
+  }
 
-    .table__version {
-      width: 14%;
-    }
+  tbody tr td .button {
+    margin-top: 5px;
+  }
+}
 
-    .table__upload-date {
-      width: 12%;
-    }
+.table {
+  width: 100%;
+  border: 0;
+  box-sizing: border-box;
+  box-shadow: none;
+  background-color: transparent;
 
-    .table__sha256-link {
-      margin-left: 5px;
-    }
+  thead tr {
+    background-color: transparent;
+  }
 
-    @media only screen and (max-width: $large-desktop) {
-      // Hide "file type" column
-      th:nth-child(3),
-      td:nth-child(3) {
-        display: none;
-      }
-    }
+  tbody tr,
+  th,
+  td {
+    border: 0;
+    background-color: transparent;
+    padding: 10px;
+  }
 
-    @media only screen and (max-width: $desktop) {
-      // Hide "version" column
-      th:nth-child(5),
-      td:nth-child(5) {
-        display: none;
-      }
-    }
+  th,
+  td {
+    border-bottom: 1px solid $base-grey;
+  }
 
-    @media only screen and (max-width: $tablet) {
-      // Hide "upload date" column
-      th:nth-child(4),
-      td:nth-child(4) {
-        display: none;
-      }
+  tr th:first-child,
+  tr td:first-child {
+    padding-left: 0;
+  }
 
-      // Hide "upload date" column
-      th:nth-child(2),
-      td:nth-child(2) {
-        width: 20%;
-      }
+  tr th:last-child,
+  tr td:last-child {
+    padding-right: 0;
+  }
 
-      th:first,
-      td:first {
-        width: 80%;
-      }
-    }
+  tbody tr:last-child td,
+  tbody tr:last-child th {
+    border-bottom: 0;
+  }
 
-    @media only screen and (max-width: $mobile) {
-      // Hide "upload date" column
-      th:nth-child(2),
-      td:nth-child(2) {
-        display: none;
-      }
-    }
+  &__align-right {
+    text-align: right;
   }
 
-  &--releases {
-    box-sizing: border-box;
-    table-layout: fixed;
-    word-wrap: break-word;
+  &__mobile-label {
+    display: none;
+    font-weight: $bold-font-weight;
+  }
 
-    .table__version,
-    .table__date,
-    .table__summary {
-      padding-right: 20px;
-    }
+  // Custom table styles
 
-    .table__version,
-    .table__date {
-      width: 130px;
-    }
+  &--downloads {
+    word-wrap: break-word;
+    margin-top: ($spacing-unit / 2);
 
-    .table__options {
-      width: 110px;
-      text-align: right;
+    td .button span {
+      display: none;
     }
 
     @media only screen and (max-width: $tablet) {
-      .table__summary {
-        display: none;
-      }
-
-      .table__version,
-      .table__date,
-      .table__options {
-        width: auto;
-      }
+      @include mobile-friendly-table;
+      margin-bottom: ($spacing-unit / 2);
     }
 
-    @media only screen and (max-width: $mobile) and (min-width: 0px) {
-      thead {
+    @media only screen and (max-width: $mobile) {
+      .table__mobile-label--hashes {
         display: none;
       }
 
-      tbody tr {
-        padding: 10px;
-      }
-
-      .table__version,
-      .table__date,
-      .table__options {
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-        padding: 2px 0;
-      }
-
-      .table__version {
-        padding-top: 10px;
-      }
-
-      .table__options {
-        padding-bottom: 10px;
-        border-bottom: 1px solid $base-grey;
-
-        @include mobile-friendly-dropdown;
+      td .button span {
+        display: inline;
       }
     }
   }
 
-  &--files {
-    .table__name,
-    .table__type,
-    .table__version,
-    .table__upload {
-      padding-right: 20px;
-    }
-
-    .table__type {
-      width: 90px;
-    }
-
-    .table__version {
-      width: 140px;
-    }
-
-    .table__upload {
-      width: 130px;
-    }
-
-    .table__options {
-      width: 100px;
-    }
-
-    @media only screen and (max-width: $large-desktop) {
-      .table__version {
-        display: none;
-      }
-    }
-
-    @media only screen and (max-width: $desktop) {
-      .table__type {
-        display: none;
-      }
-    }
+  &--releases {
+    word-wrap: break-word;
+    margin-bottom: $spacing-unit;
 
     @media only screen and (max-width: $small-tablet) {
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
-
-      .table__name,
-      .table__upload,
-      .table__options {
-        display: block;
-        width: 100%;
-        text-align: left;
-        border-bottom: 0;
-        padding: 4px 0;
-      }
-
-      .table__name a {
-        font-weight: bold;
-      }
-
-      .table__options {
-        @include mobile-friendly-dropdown;
-      }
+      @include mobile-friendly-table;
+      margin-bottom: ($spacing-unit / 2);
     }
   }
 
-  &--hashes {
+  &--files,
+  &--history {
     margin-top: $spacing-unit / 2;
 
-    .table__algorithm,
-    .table__hash {
-      padding-right: 20px;
+    @media only screen and (max-width: $tablet) {
+      @include mobile-friendly-table;
     }
+  }
 
-    td.table__algorithm {
-      font-weight: 600;
-    }
+  &--hashes {
+    margin-top: $spacing-unit / 2;
 
-    td.table__hash {
+    td code {
       word-break: break-all;
     }
 
-    .table__copy {
-      width: 75px;
-      text-align: right;
-    }
-
     @media only screen and (max-width: $mobile) {
+      @include mobile-friendly-table;
       margin-top: 0;
 
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
-
-      tbody tr:last-of-type {
-        border-bottom: 0;
-      }
-
-      .table__algorithm,
-      .table__copy,
-      .table__hash {
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-        padding: 4px 0;
-      }
-
-      .table__copy {
-        width: 100%;
+      td .button {
+        &::after {
+          top: 100%;
+          right: 50%;
+          margin-top: 5px;
+          margin-right: auto;
+          bottom: auto;
+          transform: translate(50%, 0);
+        }
 
-        .button {
-          display: block;
-          text-align: center;
-
-          // Change direction of the copy tooltip on mobile
-          $tooltip-background-color: transparentize($black, 0.3) !default;
-
-          &::after {
-            top: 100%;
-            right: 50%;
-            margin-top: 5px;
-            margin-right: auto;
-            bottom: auto;
-            transform: translate(50%, 0);
-          }
-
-          &::before {
-            top: auto;
-            left: auto;
-            right: 50%;
-            bottom: -5px;
-            margin-right: -5px;
-            border-color: transparent;
-            border-bottom-color: $tooltip-background-color;
-          }
+        &::before {
+          top: auto;
+          left: auto;
+          right: 50%;
+          bottom: -5px;
+          margin-right: -5px;
+          border-color: transparent;
+          border-bottom-color: transparentize($black, 0.3);
         }
       }
     }
   }
 
   &--collaborators {
-    .table__user {
-      padding-right: 20px;
-    }
-
     .table__user-details {
       display: flex;
       align-items: center;
@@ -393,10 +242,14 @@
     }
 
     .table__user-gravatar {
-      margin-right: 10px;
+      display: block;
+      width: 50px;
+      flex-shrink: 0;
     }
 
     .table__user-text {
+      margin-left: 10px;
+
       > * {
         display: inline-block;
         background-position: 0 1.15em;
@@ -406,78 +259,25 @@
       }
     }
 
-    .change-role {
-      width: 330px;
-    }
-
-    .change-field {
-      float: left;
-    }
-
-    .change-button {
+    .table__change-button {
       display: none;
-      float: left;
-      margin-left: 5px;
-    }
-
-    .table__action {
-      width: 100px;
-    }
-
-    @media only screen and (max-width: 1120px) {
-      input[type="text"],
-      select {
-        min-width: 160px;
-        width: 160px;
-      }
-
-      .change-role {
-        width: 235px;
-      }
+      margin-top: 5px;
     }
 
     @media only screen and (max-width: $small-tablet) {
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
-
-      tbody tr:last-of-type {
-        border-bottom: 0;
-      }
-
-      tbody tr td,
-      .table__user {
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-        padding: 4px 0;
-      }
+      @include mobile-friendly-table;
 
-      .table__user a {
-        font-weight: bold;
+      .table__user-details {
+        margin-bottom: 5px;
       }
 
-      input[type="text"],
-      select,
-      .table__action,
-      .button,
-      .change-role,
-      .change-field,
-      .change-button {
-        float: none;
+      .table__change-role {
         width: 100%;
-        margin: 0;
-      }
 
-      .change-button {
-        margin-top: 8px;
+        .table__change-field,
+        .tabel__change-button {
+          width: 100%;
+        }
       }
     }
   }
@@ -485,16 +285,7 @@
   &--emails {
     margin: 0 0 $spacing-unit;
 
-    tr td {
-      padding-right: 20px;
-
-      &:last-of-type {
-        padding-right: 0;
-      }
-    }
-
     .table__email {
-      padding: 20px 20px 20px 0;
       word-wrap: break-word;
       word-break: break-all;
       font-family: $code-font;
@@ -502,219 +293,40 @@
     }
 
     .table__status-badges {
+      display: block;
       min-width: 160px;
     }
 
     .table__status-detail {
-      display: inline-block;
+      display: block;
+      max-width: 200px;
       font-size: $small-font-size;
       margin-top: 5px;
     }
 
-    .table__action {
-      width: 100px;
-    }
-
-    @media only screen and (max-width: $small-tablet) {
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
-
-      tbody tr:last-of-type {
-        border-bottom: 0;
-      }
-
-      .table__email,
-      .table__status,
-      .table__action {
-        width: 100%;
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-      }
-
-      .table__email,
-      .table__status {
-        padding: 4px 0;
-      }
-
-      .table__status-badges {
-        min-width: auto;
-      }
-
-      .table__action {
-        padding: 0;
-
-        @include mobile-friendly-dropdown;
-
-        .dropdown {
-          margin: 8px 0 4px 0;
-        }
-      }
-    }
-  }
-
-  &--2fa {
-    margin: 0 0 $spacing-unit;
-
-    tr td {
-      padding-right: 20px;
-
-      &:last-of-type {
-        padding-right: 0;
-      }
-    }
-
-    .table__action {
-      width: 100px;
-    }
-
     @media only screen and (max-width: $small-tablet) {
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
+      @include mobile-friendly-table;
 
-      tbody tr:last-of-type {
-        border-bottom: 0;
-      }
-
-      tbody tr td {
-        padding: 0;
-        width: 100%;
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-      }
-
-      .table__action {
-        margin: 8px 0 4px 0;
+      .table__status-detail {
+        max-width: initial;
       }
     }
   }
 
+  &--2fa,
   &--api-tokens {
     margin: 0 0 $spacing-unit;
 
-    tr td {
-      padding-right: 20px;
-
-      &:last-of-type {
-        padding-right: 0;
-      }
-    }
-
-    .table__scope,
-    .table__created-date,
-    .table__used-date {
-      span {
-        display: none;
-      }
-    }
-
-    .table__action {
-      width: 150px;
-      text-align: right;
-    }
-
     @media only screen and (max-width: $small-tablet) {
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
-
-      tbody tr:last-of-type {
-        border-bottom: 0;
-      }
-
-      .table__api-name,
-      .table__scope,
-      .table__created-date,
-      .table__used-date,
-      .table__action {
-        padding: 0;
-        width: 100%;
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-      }
-
-      .table__api-name {
-        font-weight: $bold-font-weight;
-      }
-
-      .table__scope,
-      .table__created-date,
-      .table__used-date {
-        span {
-          font-weight: $bold-font-weight;
-          display: inline;
-        }
-      }
-
-      .table__action {
-        @include mobile-friendly-dropdown;
-
-        .dropdown {
-          margin: 8px 0 4px 0;
-        }
-      }
+      @include mobile-friendly-table;
     }
   }
 
   &--security-logs {
     margin-top: 0;
 
-    tr td {
-      padding-right: 20px;
-
-      &:last-of-type {
-        padding-right: 0;
-      }
-    }
-
     @media only screen and (max-width: $small-tablet) {
-      thead {
-        display: none;
-      }
-
-      tbody tr,
-      tbody tr:nth-child(2n) {
-        display: block;
-        padding: 20px 0;
-        border-bottom: 1px solid $base-grey;
-      }
-
-      tbody tr:last-of-type {
-        border-bottom: 0;
-      }
-
-      tbody tr td {
-        padding: 0;
-        width: 100%;
-        display: block;
-        text-align: left;
-        border-bottom: 0;
-      }
+      @include mobile-friendly-table;
     }
   }
 }
diff --git a/warehouse/static/sass/tools/_design-utilities.scss b/warehouse/static/sass/tools/_design-utilities.scss
index e0a1040718bc..99d4b4903453 100644
--- a/warehouse/static/sass/tools/_design-utilities.scss
+++ b/warehouse/static/sass/tools/_design-utilities.scss
@@ -37,48 +37,6 @@
   transition: opacity 0.3s;
 }
 
-@mixin table {
-  @include card;
-  @include border-width(1px null);
-  border-collapse: collapse;
-  border-spacing: 0;
-  text-align: left;
-  margin: 25px 0 0 0;
-  font-size: $small-font-size;
-  width: 100%;
-
-  tr {
-    border-bottom: 1px solid $border-color;
-  }
-
-  th,
-  td {
-    margin: 0;
-    border: 0;
-    padding: 10px 7px;
-    border-right: 1px solid $border-color;
-  }
-
-  thead tr {
-    background-color: $white;
-
-    th {
-      vertical-align: bottom;
-      font-weight: $bold-font-weight;
-    }
-  }
-
-  tbody {
-    tr {
-      background-color: darken($background-color, 0.75);
-    }
-
-    tr:nth-child(even) {
-      background-color: darken($background-color, 2);
-    }
-  }
-}
-
 @mixin dismiss-button {
   background: transparent;
   border: 0;
diff --git a/warehouse/templates/includes/hash-modal.html b/warehouse/templates/includes/hash-modal.html
index 5134f5db1134..29c347874129 100644
--- a/warehouse/templates/includes/hash-modal.html
+++ b/warehouse/templates/includes/hash-modal.html
@@ -22,39 +22,39 @@
       <h3 class="modal__title">
         <a href="https://pip.pypa.io/en/stable/reference/pip_install/#hash-checking-mode" title="External link" target="_blank" rel="noopener">Hashes</a> for {{ file.filename }}
       </h3>
-      <table class="table table--light table--hashes">
+      <table class="table table--hashes">
         <caption class="sr-only">Hashes for {{ file.filename }}</caption>
         <thead>
           <tr>
-            <th scope="col" class="table__algorithm">Algorithm</th>
-            <th scope="col" class="table__hash">Hash digest</th>
-            <th class="table__copy"></th>
+            <th scope="col">Algorithm</th>
+            <th scope="col">Hash digest</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <th scope="row" class="table__algorithm">SHA256</th>
-            <td class="table__hash"><code>{{ file.sha256_digest }}</code></td>
-            <td class="table__copy">
-              <button type="button" class="button -js-copy-hash tooltipped tooltipped-w" aria-label="Copy to clipboard" data-original-label="Copy to clipboard" data-clipboard-text="{{ file.sha256_digest }}">
+            <th scope="row">SHA256</th>
+            <td><code>{{ file.sha256_digest }}</code></td>
+            <td class="table__align-right">
+              <button type="button" class="button button--small -js-copy-hash tooltipped tooltipped-w" aria-label="Copy to clipboard" data-original-label="Copy to clipboard" data-clipboard-text="{{ file.sha256_digest }}">
                 Copy
               </button>
             </td>
           </tr>
           <tr>
-            <th scope="row" class="table__algorithm">MD5</th>
-            <td class="table__hash"><code>{{ file.md5_digest }}</code></td>
-            <td class="table__copy">
-              <button type="button" class="button -js-copy-hash tooltipped tooltipped-w" aria-label="Copy to clipboard" data-original-label="Copy to clipboard" data-clipboard-text="{{ file.md5_digest }}">
+            <th scope="row">MD5</th>
+            <td><code>{{ file.md5_digest }}</code></td>
+            <td class="table__align-right">
+              <button type="button" class="button button--small -js-copy-hash tooltipped tooltipped-w" aria-label="Copy to clipboard" data-original-label="Copy to clipboard" data-clipboard-text="{{ file.md5_digest }}">
                 Copy
               </button>
             </td>
           </tr>
           <tr>
-            <th scope="row" class="table__algorithm">BLAKE2-256</th>
-            <td class="table__hash"><code>{{ file.blake2_256_digest }}</code></td>
-            <td class="table__copy">
-              <button type="button" class="button -js-copy-hash tooltipped tooltipped-w" aria-label="Copy to clipboard" data-original-label="Copy to clipboard" data-clipboard-text="{{ file.blake2_256_digest }}">
+            <th scope="row">BLAKE2-256</th>
+            <td><code>{{ file.blake2_256_digest }}</code></td>
+            <td class="table__align-right">
+              <button type="button" class="button button--small -js-copy-hash tooltipped tooltipped-w" aria-label="Copy to clipboard" data-original-label="Copy to clipboard" data-clipboard-text="{{ file.blake2_256_digest }}">
                 Copy
               </button>
             </td>
diff --git a/warehouse/templates/manage/account.html b/warehouse/templates/manage/account.html
index 8bc386ffeb5a..bd8f6d03620b 100644
--- a/warehouse/templates/manage/account.html
+++ b/warehouse/templates/manage/account.html
@@ -73,15 +73,15 @@
     <th class="table__email" scope="row">
       {{ email.email }}
     </th>
-    <td class="table__status">
-      <div class="table__status-badges">
+    <td>
+      <span class="table__status-badges">
         {% if email.primary %}
         <span class="badge">Primary</span>
         {% endif %}
         {{ email_verification_label(email) }}
-      </div>
+      </span>
     </td>
-    <td class="table__action">
+    <td class="table__align-right">
       {% if not email.verified or not email.primary %}
       <nav class="dropdown dropdown--with-icons dropdown--wide">
         <button type="button" class="button button--primary dropdown__trigger" aria-haspopup="true" aria-expanded="false">
@@ -156,11 +156,12 @@
 
 {% macro api_row(macaroon) -%}
   <tr>
-    <th class="table__api-name" scope="row">
+    <th scope="row">
+      <span class="table__mobile-label">Name</span>
       {{ macaroon.description }}
     </th>
-    <td class="table__scope">
-      <span>Scope:</span>
+    <td>
+      <span class="table__mobile-label">Scope</span>
       {% if macaroon.caveats.get("permissions") == 'user' %}
       All projects
       {% else %}
@@ -169,15 +170,15 @@
         {% endfor %}
       {% endif %}
     </td>
-    <td class="table__created-date">
-      <span>Created on:</span>
+    <td>
+      <span class="table__mobile-label">Created on</span>
       {{ humanize(macaroon.created) }}
     </td>
-    <td class="table__used-date">
-      <span>Last used:</span>
+    <td>
+      <span class="table__mobile-label">Last used</span>
       {{ humanize(macaroon.last_used) if macaroon.last_used else "Never" }}
     </td>
-    <td class="table__action">
+    <td class="table__align-right">
       <nav class="dropdown dropdown--with-icons dropdown--wide">
         <button type="button" class="button button--primary dropdown__trigger" aria-haspopup="true" aria-expanded="false">
           Options
@@ -307,7 +308,7 @@ <h2 class="sub-title">Account emails</h2>
     #}
     {% set sorted_emails = user.emails|sort(attribute="email")|sort(attribute="verified", reverse=true)|sort(attribute="primary", reverse=true) %}
 
-    <table class="table table--light table--emails">
+    <table class="table table--emails">
       <caption class="sr-only">Emails associated with your account</caption>
       <thead>
         <tr>
@@ -419,7 +420,7 @@ <h2 class="sub-title">Two factor authentication (2FA)</h2>
 
     {% if user.has_primary_verified_email %}
       {% if user.totp_secret or user.webauthn %}
-      <table class="table table--light table--2fa">
+      <table class="table table--2fa">
         <caption class="sr-only">Two factor authentication methods enabled</caption>
         <thead>
           <tr>
@@ -430,7 +431,7 @@ <h2 class="sub-title">Two factor authentication (2FA)</h2>
           {% if user.totp_secret %}
           <tr>
             <th scope="row">Authentication application (<abbr title="time-based one-time password">TOTP</abbr>)</th>
-            <td class="table__action">
+            <td class="table__align-right">
               <a href="#disable-totp" class="button button--primary">Remove</a>
               {% set title="Remove authentication application" %}
               {% set confirm_button_label="Remove application" %}
@@ -445,7 +446,7 @@ <h2 class="sub-title">Two factor authentication (2FA)</h2>
               <strong>"{{ credential.label }}"</strong> - Security device (<abbr title="web authentication">WebAuthn</abbr>)
               <span class="badge badge--warning">Beta feature</span>
             </th>
-            <td class="table__action">
+            <td class="table__align-right">
               <a href="#disable-webauthn-{{ credential.id }}" class="button button--primary">Remove</a>
               {% set title="Remove two factor security device - " + credential.label %}
               {% set confirm_button_label="Remove device" %}
@@ -479,7 +480,7 @@ <h2>API tokens <span class="badge badge--warning">Beta feature</span></h2>
     <p>API tokens provide an alternative way to authenticate when uploading packages to PyPI. <a href="/help#apitoken">Learn more about API tokens</a>.</p>
 
     {% if user.macaroons|length > 0 %}
-    <table class="table table--light table--api-tokens">
+    <table class="table table--api-tokens">
       <caption class="sr-only">Active API tokens for this account</caption>
       <thead>
         <tr>
@@ -604,7 +605,7 @@ <h2>Security history <span class="badge badge--warning">Beta feature</span></h2>
     {%- endmacro %}
 
     <p>Events appear here as security-related actions occur on your account.</p>
-    <table class="table table--light table--security-logs">
+    <table class="table table--security-logs">
       <caption class="sr-only">Recent account activity</caption>
       <thead>
         <th scope="col">Event</th>
@@ -615,8 +616,14 @@ <h2>Security history <span class="badge badge--warning">Beta feature</span></h2>
         {% for event in recent_events %}
         <tr>
           <td>{{ event_summary(event) }}</td>
-          <td>{{ humanize(event.time) }}</td>
-          <td>{{ event.ip_address }}</td>
+          <td>
+            <span class="table__mobile-label">Date / time</span>
+            {{ humanize(event.time) }}
+          </td>
+          <td>
+            <span class="table__mobile-label">IP address</span>
+            {{ event.ip_address }}
+          </td>
         </tr>
         {% endfor %}
       </tbody>
diff --git a/warehouse/templates/manage/history.html b/warehouse/templates/manage/history.html
index ea8c2c4b7302..bafb88088b20 100644
--- a/warehouse/templates/manage/history.html
+++ b/warehouse/templates/manage/history.html
@@ -81,7 +81,7 @@ <h2>Security history <span class="badge badge--warning">Beta feature</span></h2>
   {%- endmacro %}
 
   {% if events %}
-  <table class="table table--light table--security-logs">
+  <table class="table table--security-logs">
     <caption class="sr-only">Security history for {{ project.name }}</caption>
     <thead>
       <tr>
@@ -94,8 +94,14 @@ <h2>Security history <span class="badge badge--warning">Beta feature</span></h2>
       {% for event in events %}
       <tr>
         <td>{{ event_summary(event) }}</td>
-        <td>{{ humanize(event.time) }}</td>
-        <td>{{ event.ip_address }}</td>
+        <td>
+          <span class="table__mobile-label">Date / time</span>
+          {{ humanize(event.time) }}
+        </td>
+        <td>
+          <span class="table__mobile-label">IP address</span>
+          {{ event.ip_address }}
+        </td>
       </tr>
       {% endfor %}
     </tbody>
diff --git a/warehouse/templates/manage/journal.html b/warehouse/templates/manage/journal.html
index 9101897e3198..9f254f180a83 100644
--- a/warehouse/templates/manage/journal.html
+++ b/warehouse/templates/manage/journal.html
@@ -28,7 +28,7 @@ <h2>Project journal</h2>
     <p>This feature will be deprecated in the future, replaced by the <a href="{{ request.route_path('manage.project.history', project_name=project.normalized_name)}}">security history page</a>.
   </div>
 
-  <table class="table table--history margin-top">
+  <table class="table table--history">
     <caption class="sr-only">History for {{ project.name }}</caption>
     <thead>
       <tr>
@@ -40,13 +40,16 @@ <h2>Project journal</h2>
     <tbody>
       {% for journal in journals %}
       <tr>
-        <th scope="row" class="table__action">
+        <th scope="row">
+          <span class="table__mobile-label">Action</span>
           {% if journal.version %} Release {{ journal.version }}: {% endif %}{{ journal.action }}
         </th>
         <td>
+          <span class="table__mobile-label">Date</span>
           {{ journal.submitted_date|format_datetime() }}
         </td>
         <td>
+          <span class="table__mobile-label">User</span>
           {{ journal.submitted_by.username }}
           <span class="table__ip">from {{ journal.submitted_from }}</span>
         </td>
diff --git a/warehouse/templates/manage/release.html b/warehouse/templates/manage/release.html
index ce232ac9299e..b0c8a8f16a94 100644
--- a/warehouse/templates/manage/release.html
+++ b/warehouse/templates/manage/release.html
@@ -21,8 +21,8 @@
   <div class="heading-wsubtitle heading-wsubtitle--in-content">
     <h2 class="heading-wsubtitle__heading">Release version {{ release.version }}</h2>
 
-    <nav aria-label="Breadcrumb">
-      <ul class="heading-wsubtitle__subtitle breadcrumbs">
+    <nav aria-label="Breadcrumb" class="breadcrumbs">
+      <ul class="heading-wsubtitle__subtitle">
         <li class="breadcrumbs__breadcrumb"><a href="{{ request.route_path('manage.project.releases', project_name=project.normalized_name)}}">All {{ project.name }} releases</a></li>
         <li class="breadcrumbs__breadcrumb">Release version {{ release.version }} – <a href="{{ request.route_path('packaging.release', name=release.project.name, version=release.version) }}">view release</a></li>
       </ul>
@@ -30,21 +30,22 @@ <h2 class="heading-wsubtitle__heading">Release version {{ release.version }}</h2
   </div>
 
   {% if files %}
-  <table class="table table--light table--files">
+  <table class="table table--files">
     <caption class="sr-only">Files for release {{ release.version }} of {{ project.name }}</caption>
     <thead>
       <tr>
-        <th scope="col" class="table__name">Filename, size</th>
-        <th scope="col" class="table__type">Type</th>
-        <th scope="col" class="table__version">Python version</th>
-        <th scope="col" class="table__upload">Upload date</th>
+        <th scope="col">Filename, size</th>
+        <th scope="col">Type</th>
+        <th scope="col">Python version</th>
+        <th scope="col">Upload date</th>
         <th></th>
       </tr>
     </thead>
     <tbody>
     {% for file in files %}
       <tr>
-        <th scope="row" class="table__name">
+        <th scope="row">
+          <span class="table__mobile-label">Filename, size</span>
           <a href="{{ request.route_url('packaging.file', path=file.path) }}"
             {% if file.comment_text %}
               class="tooltipped tooltipped-e"
@@ -55,11 +56,20 @@ <h2 class="heading-wsubtitle__heading">Release version {{ release.version }}</h2
             {{ file.filename }}</a>
           {% if file.size %}({{ file.size|filesizeformat() }}){% endif %}<br>
         </th>
-        <td class="table__type">{{ file.packagetype|format_package_type }}</td>
-        <td class="table__version">{{ file.python_version if file.python_version != 'source' else 'None' }}</td>
-        <td class="table__upload">{{ file.upload_time|format_date() }}</td>
-        <td class="table__options">
-          <nav class="dropdown dropdown--with-icons pull-right">
+        <td>
+          <span class="table__mobile-label">Type</span>
+          {{ file.packagetype|format_package_type }}
+        </td>
+        <td>
+          <span class="table__mobile-label">Python version</span>
+          {{ file.python_version if file.python_version != 'source' else 'None' }}
+        </td>
+        <td>
+          <span class="table__mobile-label">Upload date</span>
+          {{ file.upload_time|format_date() }}
+        </td>
+        <td class="table__align-right">
+          <nav class="dropdown dropdown--with-icons">
             <button type="button" class="button button--primary dropdown__trigger" aria-haspopup="true" aria-expanded="false">
               Options
               <span class="dropdown__trigger-caret">
diff --git a/warehouse/templates/manage/releases.html b/warehouse/templates/manage/releases.html
index ab57d59be808..ee4c15686c8e 100644
--- a/warehouse/templates/manage/releases.html
+++ b/warehouse/templates/manage/releases.html
@@ -20,26 +20,26 @@
 {% block main %}
   <h2>Releases ({{ project.releases|length }})</h2>
   {% if project.releases %}
-    <table class="table table--light table--releases no-top-margin">
+    <table class="table table--releases">
       <caption class="sr-only">Releases for {{ project.name }}</caption>
       <thead>
         <tr>
-          <th scope="col" class="table__version">Version</th>
-          <th scope="col" class="table__date">Release date</th>
-          <th scope="col" class="table__summary">Files</th>
-          <th scope="col" class="table__options"></th>
+          <th scope="col">Version</th>
+          <th scope="col">Release date</th>
+          <th scope="col">Files</th>
+          <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
       {% for release in project.releases %}
         <tr>
-          <th scope="row" class="table__version">
+          <th scope="row">
             <a href="{{ request.route_path('manage.project.release', project_name=project.name, version=release.version) }}" title="Manage version">
               {{ release.version }}
             </a>
           </th>
-          <td class="table__date">{{ humanize(release.created) }}</td>
-          <td class="table__summary">
+          <td>{{ humanize(release.created) }}</td>
+          <td>
             {% set num_files = version_to_file_counts[release.version]['total'] %}
             {% if num_files %}
             {% trans count=num_files %}
@@ -56,7 +56,7 @@ <h2>Releases ({{ project.releases|length }})</h2>
             No files
             {% endif %}
           </td>
-          <td class="table__options">
+          <td class="table__align-right">
             <nav class="dropdown dropdown--with-icons">
               <button type="button" class="button button--primary dropdown__trigger" aria-haspopup="true" aria-expanded="false">
                 Options
@@ -99,7 +99,6 @@ <h2>Releases ({{ project.releases|length }})</h2>
       {% endfor %}
       </tbody>
     </table>
-    <br>
   {% endif %}
 
   <div class="callout-block" data-controller="dismissable" data-dismissable-identifier="releases">
diff --git a/warehouse/templates/manage/roles.html b/warehouse/templates/manage/roles.html
index 4a891aac14d9..74076e9539ab 100644
--- a/warehouse/templates/manage/roles.html
+++ b/warehouse/templates/manage/roles.html
@@ -19,7 +19,7 @@
 
 {% block main %}
   <h2>Collaborators</h2>
-  <p class="lede-paragraph">Use this page to control which PyPI users can help you to manage {{ project.name }}</p>
+  <p>Use this page to control which PyPI users can help you to manage {{ project.name }}</p>
   <div class="callout-block" data-controller="dismissable" data-dismissable-identifier="roles">
     <button type="button" title="Dismiss" data-action="click->dismissable#dismiss" class="callout-block__dismiss" aria-label="close"><i class="fa fa-times" aria-hidden="true"></i></button>
     <p>There are two possible roles for collaborators:</p>
@@ -30,13 +30,13 @@ <h2>Collaborators</h2>
       <dd>Can upload releases. Can add other collaborators. Can delete files, releases, or the entire project.</dd>
     </dl>
   </div>
-  <table class="table table--light table--collaborators">
+  <table class="table table--collaborators">
     <caption class="sr-only">Users who can manage {{ project.name }}</caption>
     <thead>
       <tr>
-        <th class="table__user" scope="col">User</th>
-        <th class="table__role" scope="col">Role</th>
-        <th class="table__action" scope="col">Action</th>
+        <th scope="col">User</th>
+        <th scope="col">Role</th>
+        <th></th>
       </tr>
     </thead>
     <tbody>
@@ -51,7 +51,7 @@ <h2>Collaborators</h2>
     {% for username, roles in roles_by_user|dictsort %}
       {% set role = roles|max %}
       <tr>
-        <th class="table__user" scope="row">
+        <th scope="row">
           <a href="{{ request.route_path('accounts.profile', username=role.user.username) }}" class="table__user-details">
             {% set alt = "Avatar for {} from gravatar.com".format(role.user.name|default(role.user.username, true)) %}
             <span class="table__user-gravatar">
@@ -65,31 +65,31 @@ <h2>Collaborators</h2>
             </span>
           </a>
         </th>
-        <td class="table__role">
+        <td>
         {% if role.user == request.user %}
           {{ role.role_name }}
         {% else %}
-          <form class="change-role" method="POST" action="{{ request.route_path('manage.project.change_role', project_name=project.name) }}">
+          <form class="table__change-role" method="POST" action="{{ request.route_path('manage.project.change_role', project_name=project.name) }}">
             <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
             {% for role in roles %}
               <input type="hidden" name="role_id" value="{{ role.id }}">
             {% endfor %}
 
             <label for="role-for-{{ role.id }}" class="sr-only">Role</label>
-            <select id="role-for-{{ role.id }}" class="change-field" name="role_name" data-original="{{ role.role_name }}" autocomplete="off">
+            <select id="role-for-{{ role.id }}" class="table__change-field" name="role_name" data-original="{{ role.role_name }}" autocomplete="off">
               {% for role_name in ['Owner', 'Maintainer'] %}
               <option value="{{ role_name }}" {{ 'selected' if role_name == role.role_name else '' }}>
                 {{ role_name }}
               </option>
               {% endfor %}
             </select>
-            <button type="submit" class="button button--primary change-button" title="Save role">
+            <button type="submit" class="button button--primary table__change-button" title="Save role">
               Save
             </button>
           </form>
         {% endif %}
         </td>
-        <td class="table__action">
+        <td class="table__align-right">
           <form method="POST" action="{{ request.route_path('manage.project.delete_role', project_name=project.name) }}">
             <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
             {#
diff --git a/warehouse/templates/packaging/detail.html b/warehouse/templates/packaging/detail.html
index e7c1ed8df0fe..3821fd2e599e 100644
--- a/warehouse/templates/packaging/detail.html
+++ b/warehouse/templates/packaging/detail.html
@@ -280,33 +280,43 @@ <h2 class="page-title">Download files</h2>
               <caption class="sr-only">Files for {{ release.project.name }}, version {{ release.version }}</caption>
               <thead>
                 <tr>
-                  <th scope="col" class="table__filename">Filename, size &amp; hash</th>
-                  <th scope="col" class="table__type">File type</th>
-                  <th scope="col" class="table__version">Python version</th>
-                  <th scope="col" class="table__upload-date">Upload date</th>
+                  <th scope="col">Filename, size</th>
+                  <th scope="col">File type</th>
+                  <th scope="col">Python version</th>
+                  <th scope="col">Upload date</th>
+                  <th scope="col" class="table__align-right">Hashes</th>
                 </tr>
               </thead>
               <tbody>
                 {% for file in files %}
                 <tr>
                   <th scope="row">
+                    <span class="table__mobile-label">Filename, size</span>
                     <a href="{{ request.route_url('packaging.file', path=file.path) }}">
                       {{ file.filename }}
                     </a>
                     {% if file.size %} ({{ file.size|filesizeformat() }}){% endif %}
-                    <a href="#copy-hash-modal-{{ file.id }}" class="button button--small">View hashes</a>
                   </th>
                   <td>
+                    <span class="table__mobile-label">File type</span>
                     {{ file.packagetype|format_package_type }}
                   </td>
                   <td>
+                    <span class="table__mobile-label">Python version</span>
                     {% if file.python_version != "source" %}
                       {{ file.python_version }}
                     {% else %}
                       None
                     {% endif %}
                   </td>
-                  <td>{{ localize(file.upload_time) }}</td>
+                  <td>
+                    <span class="table__mobile-label">Upload date</span>
+                    {{ localize(file.upload_time) }}
+                  </td>
+                  <td class="table__align-right">
+                    <span class="table__mobile-label table__mobile-label--hashes">Hashes</span>
+                    <a href="#copy-hash-modal-{{ file.id }}" class="button button--small button--primary">View <span>hashes</span></a>
+                  </td>
                 </tr>
                 {% endfor %}
               </tbody>