From c4fe4abe2c04b438e5a1fb6b606a4994b08bf639 Mon Sep 17 00:00:00 2001
From: Nicole Harris <n.harris@kabucreative.com>
Date: Wed, 24 Sep 2025 07:11:27 +0100
Subject: [PATCH 1/5] Only show wheel filters if there is more than one wheel

---
 warehouse/templates/packaging/detail.html | 38 +++++++++++------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/warehouse/templates/packaging/detail.html b/warehouse/templates/packaging/detail.html
index b29903e561b7..fad2de4babcf 100644
--- a/warehouse/templates/packaging/detail.html
+++ b/warehouse/templates/packaging/detail.html
@@ -441,13 +441,13 @@ <h2 class="page-title split-layout">
          data-controller="filter-list">
       <h2 class="page-title">{% trans %}Download files{% endtrans %}</h2>
       <p>
-        {% trans href='https://packaging.python.org/tutorials/installing-packages/', title=gettext('External link') %}Download the file for your platform. If you're not sure which to choose, learn more about <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">installing packages</a>.{% endtrans %}
+        {% trans href='https://packaging.python.org/en/latest/discussions/package-formats/#package-formats', title=gettext('External link') %}For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the  <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">package formats documentation</a>.{% endtrans %}
       </p>
       <h3>
         {% trans count=sdists|length %}
-        Source Distribution
+        Source distribution (sdist)
       {% pluralize %}
-        Source Distributions
+        Source distributions (sdists)
       {% endtrans %}
     </h3>
     {% if sdists %}
@@ -457,30 +457,24 @@ <h3>
         <div class="file__graphic">
           <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
         </div>
-        <div class="card">
+        <div>
           {% trans %}No source distribution files available for this release.{% endtrans %}
           {% trans href='https://packaging.python.org/tutorials/packaging-projects/#generating-distribution-archives', title=gettext('External link') %}See tutorial on <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">generating distribution archives</a>.{% endtrans %}
         </div>
       </div>
     {% endif %}
+
     {% if bdists %}
+    {% set bdist_count = bdists|length %}
       <h3>
-        {% trans count=bdists|length %}
-        Built Distribution
+        {% trans count=bdist_count %}
+        Built distribution (wheel)
       {% pluralize %}
-        Built Distributions
+        Built distributions (wheels)
       {% endtrans %}
     </h3>
-    <p class="hidden initial-toggle-visibility">
-      {% trans %}Filter files by name, interpreter, ABI, and platform.{% endtrans %}
-    </p>
-    <p>
-      {% trans href='https://packaging.python.org/en/latest/specifications/binary-distribution-format/', title=gettext('External link') %}If you're not sure about the file name format, learn more about <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">wheel file names</a>.{% endtrans %}
-    </p>
+    {% if bdist_count > 1 %}
     <noscript>
-      <p class="initial-toggle-visibility">
-        {% trans %}The dropdown lists show the available interpreters, ABIs, and platforms.{% endtrans %}
-      </p>
       <p class="initial-toggle-visibility">
         {% trans %}Enable javascript to be able to filter the list of wheel files.{% endtrans %}
       </p>
@@ -499,9 +493,6 @@ <h3>
         {% trans %}Copy{% endtrans %}
       </button>
     </p>
-    <p class="hidden initial-toggle-visibility">
-      <span data-filter-list-target="summary"></span>
-    </p>
     <div>
       <div class="form-group hidden initial-toggle-visibility">
         <label class="form-group__label sr-only" for="bdist-filenames-filter">{% trans %}File name{% endtrans %}</label>
@@ -524,7 +515,16 @@ <h3>
         <div class="form-group col-third">{{ filter_select('platforms', 'Platform', wheel_filters_params) }}</div>
       </div>
     </div>
+    {% endif %}
+
     {{ file_table(bdists) }}
+
+    {% if bdist_count > 1 %}
+    <p class="hidden initial-toggle-visibility">
+      <span data-filter-list-target="summary"></span>
+    </p>
+    {% endif %}
+    
   {% endif %}
 </div>
 {# Tabs: file details #}

From b199e59eddfccfa084c0fd2d2ad9fc7bd43ac8ed Mon Sep 17 00:00:00 2001
From: Nicole Harris <n.harris@kabucreative.com>
Date: Thu, 25 Sep 2025 07:13:45 +0100
Subject: [PATCH 2/5] Update display of search and filters

---
 warehouse/static/sass/base/_forms.scss        |  4 ++
 warehouse/static/sass/blocks/_button.scss     | 15 ++++
 .../static/sass/blocks/_filter-wheels.scss    | 56 +++++++++++++++
 warehouse/static/sass/blocks/_form-group.scss | 38 +++++++++-
 warehouse/static/sass/warehouse.scss          |  1 +
 warehouse/templates/packaging/detail.html     | 71 ++++++++++---------
 6 files changed, 151 insertions(+), 34 deletions(-)
 create mode 100644 warehouse/static/sass/blocks/_filter-wheels.scss

diff --git a/warehouse/static/sass/base/_forms.scss b/warehouse/static/sass/base/_forms.scss
index ef0d1fb075b1..5a542619f0dc 100644
--- a/warehouse/static/sass/base/_forms.scss
+++ b/warehouse/static/sass/base/_forms.scss
@@ -48,6 +48,10 @@
   }
 }
 
+select {
+  height: 40px;
+}
+
 input[type="checkbox"] {
   &:focus,
   &:hover,
diff --git a/warehouse/static/sass/blocks/_button.scss b/warehouse/static/sass/blocks/_button.scss
index a0d3859a3784..e8bbbc8d7383 100644
--- a/warehouse/static/sass/blocks/_button.scss
+++ b/warehouse/static/sass/blocks/_button.scss
@@ -13,6 +13,7 @@
     - primary: Makes button bright blue.
     - danger: Makes button red.
     - warning: Makes button brown.
+    - link: styles button like a link (removes all padding, border, etc.)
     - disabled: Styles for when the button cannot be clicked.
     - switch-to-desktop: Switch to desktop button found in site footer.
     - switch-to-mobile: Switch to mobile button found in site header.
@@ -126,6 +127,20 @@
     }
   }
 
+  &--link {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    color: $text-color;
+    display: inline-block;
+
+    &:focus,
+    &:hover,
+    &:active {
+      color: $primary-color;
+    }
+  }
+
   &[disabled],
   &--disabled {
     cursor: not-allowed;
diff --git a/warehouse/static/sass/blocks/_filter-wheels.scss b/warehouse/static/sass/blocks/_filter-wheels.scss
new file mode 100644
index 000000000000..c5eff61cff01
--- /dev/null
+++ b/warehouse/static/sass/blocks/_filter-wheels.scss
@@ -0,0 +1,56 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/*
+  Search and filter wheels
+
+  <div class="filter-wheels">
+    <div class="wheel-filters__search">
+      Search bar here
+    </div>
+    <div class="wheel-filters__filters">
+      Filters here
+    </div>
+  </div>
+*/
+
+.filter-wheels {
+  display: flex;
+  gap: $spacing-unit / 2;
+  justify-content: space-between;
+
+  @media only screen and (max-width: $tablet) {
+    flex-wrap: wrap;
+  }
+
+  &__search {
+    flex-grow: 1;
+
+    .form-group input {
+      height: 40px;
+    }
+
+    @media only screen and (max-width: $tablet) {
+      width: 100%;
+    }
+  }
+
+  &__filters {
+    flex-shrink: 0; 
+    flex: 0 1 auto;
+    display: flex;
+    gap: $spacing-unit / 3;
+    align-items: flex-end;
+
+    div {
+      flex: 0 1 auto;
+    }
+
+    @media only screen and (max-width: $tablet) {
+      width: 100%;
+    }
+
+    @media only screen and (max-width: $small-tablet) {
+      display: block;
+    }
+  }
+}
diff --git a/warehouse/static/sass/blocks/_form-group.scss b/warehouse/static/sass/blocks/_form-group.scss
index c7334e82ec9f..d3bfbc76dd56 100644
--- a/warehouse/static/sass/blocks/_form-group.scss
+++ b/warehouse/static/sass/blocks/_form-group.scss
@@ -12,6 +12,10 @@
     <p class="form-group__text">When a field is not editable, you can use me instead</p>
     <p class="form-group__help-text">Some help text here</p>
   </div>
+
+
+    Modifiers:
+    - flex-width: makes fields inside the group flexible width (instead of 350px wide)
 */
 
 .form-group {
@@ -20,7 +24,7 @@
 
   &__label {
     display: block;
-    font-weight: bold;
+    font-weight: 600;
   }
 
   &__label:not(:first-child) {
@@ -109,6 +113,38 @@
     }
   }
 
+  &--flex-width {
+    max-width: unset;
+    :where(
+      input:not([type]),
+      select,
+      textarea,
+      [type="color"],
+      [type="date"],
+      [type="datetime"],
+      [type="datetime-local"],
+      [type="email"],
+      [type="month"],
+      [type="month"],
+      [type="number"],
+      [type="password"],
+      [type="search"],
+      [type="tel"],
+      [type="text"],
+      [type="time"],
+      [type="url"],
+      [type="week"]
+    ).form-group__field,
+      select.form-group__field {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    select.form-group__field {
+      padding-right: $spacing-unit;
+    }
+  }
+
   // Specific cases for input validation using `pattern` attribute
 
   /* stylelint-disable-next-line selector-id-pattern -- Form sets name */
diff --git a/warehouse/static/sass/warehouse.scss b/warehouse/static/sass/warehouse.scss
index 32119d746687..f0d9433f38fc 100644
--- a/warehouse/static/sass/warehouse.scss
+++ b/warehouse/static/sass/warehouse.scss
@@ -95,6 +95,7 @@
 @import "blocks/project-description";
 /*rtl:end:ignore*/
 @import "blocks/files";
+@import "blocks/filter-wheels";
 @import "blocks/radio-toggle-form";
 @import "blocks/release";
 @import "blocks/release-timeline";
diff --git a/warehouse/templates/packaging/detail.html b/warehouse/templates/packaging/detail.html
index fad2de4babcf..457e653bc6ed 100644
--- a/warehouse/templates/packaging/detail.html
+++ b/warehouse/templates/packaging/detail.html
@@ -458,7 +458,7 @@ <h3>
           <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
         </div>
         <div>
-          {% trans %}No source distribution files available for this release.{% endtrans %}
+          {% trans %}No source distribution files available for this release.{% endtrans %}&nbsp;
           {% trans href='https://packaging.python.org/tutorials/packaging-projects/#generating-distribution-archives', title=gettext('External link') %}See tutorial on <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">generating distribution archives</a>.{% endtrans %}
         </div>
       </div>
@@ -479,40 +479,45 @@ <h3>
         {% trans %}Enable javascript to be able to filter the list of wheel files.{% endtrans %}
       </p>
     </noscript>
-    <p class="hidden initial-toggle-visibility" data-controller="clipboard">
-      {% trans %}Copy a direct link to the current filters {% endtrans %}
-      <a class="hidden"
-         href="{% if request.matched_route %}{{ request.current_route_url() }}{% else %}{{ request.url }}{% endif %}#files"
-         data-clipboard-target="source"
-         data-filter-list-target="url"></a>
-      <button type="button"
-              class="button button--small copy-tooltip copy-tooltip-w"
+    <div class="filter-wheels">
+      <div class="filter-wheels__search hidden initial-toggle-visibility">
+        <div class="form-group form-group--flex-width">
+          <label class="form-group__label" for="bdist-filenames-filter">{% trans %}Search{% endtrans %}</label>
+          <input class="form-group__field"
+                type="text"
+                id="bdist-filenames-filter"
+                name="bdist-filenames-filter"
+                placeholder="{% trans %}Search by file name{% endtrans %}"
+                {% if wheel_filters_params['filename'] %}value="{{ wheel_filters_params['filename'] }}"{% endif %}
+                autocapitalize="none"
+                autocomplete=""
+                spellcheck="false"
+                data-action="filter-list#filter"
+                data-filter-list-target="filter"
+                data-filtered-source="filename">
+        </div>
+      </div>
+      <div class="filter-wheels__filters">
+        <div class="form-group form-group--flex-width">
+          <strong>Filters</strong>
+          <span class="hidden initial-toggle-visibility" data-controller="clipboard">
+            <a class="hidden"
+              href="{% if request.matched_route %}{{ request.current_route_url() }}{% else %}{{ request.url }}{% endif %}#files"
+              data-clipboard-target="source"
+              data-filter-list-target="url"></a>              
+            <button type="button"
+              class="button--link copy-tooltip copy-tooltip-n"
               data-action="clipboard#copy"
               data-clipboard-target="tooltip"
-              data-clipboard-tooltip-value="{% trans %}Copy to clipboard{% endtrans %}">
-        {% trans %}Copy{% endtrans %}
-      </button>
-    </p>
-    <div>
-      <div class="form-group hidden initial-toggle-visibility">
-        <label class="form-group__label sr-only" for="bdist-filenames-filter">{% trans %}File name{% endtrans %}</label>
-        <input class="form-group__field"
-               type="text"
-               id="bdist-filenames-filter"
-               name="bdist-filenames-filter"
-               placeholder="{% trans %}File name{% endtrans %}"
-               {% if wheel_filters_params['filename'] %}value="{{ wheel_filters_params['filename'] }}"{% endif %}
-               autocapitalize="none"
-               autocomplete=""
-               spellcheck="false"
-               data-action="filter-list#filter"
-               data-filter-list-target="filter"
-               data-filtered-source="filename">
-      </div>
-      <div class="col-grid">
-        <div class="form-group col-third">{{ filter_select('interpreters', 'Interpreter', wheel_filters_params) }}</div>
-        <div class="form-group col-third">{{ filter_select('abis', 'ABI', wheel_filters_params) }}</div>
-        <div class="form-group col-third">{{ filter_select('platforms', 'Platform', wheel_filters_params) }}</div>
+              data-clipboard-tooltip-value="{% trans %}Copy link to filters{% endtrans %}">
+                <i class="fa fa-link" aria-hidden="true"></i>
+                <span class="sr-only">{% trans %}Copy link to filters{% endtrans %}</span>
+              </button>
+          </span>
+          {{ filter_select('interpreters', 'Interpreter', wheel_filters_params) }}
+        </div>
+        <div class="form-group form-group--flex-width">{{ filter_select('abis', 'ABI', wheel_filters_params) }}</div>
+        <div class="form-group form-group--flex-width">{{ filter_select('platforms', 'Platform', wheel_filters_params) }}</div>
       </div>
     </div>
     {% endif %}

From 70d8f8376e04f8d01265aeaa7629870713b70743 Mon Sep 17 00:00:00 2001
From: Nicole Harris <n.harris@kabucreative.com>
Date: Sat, 27 Sep 2025 07:43:52 +0100
Subject: [PATCH 3/5] Display files in table

---
 warehouse/static/sass/blocks/_table.scss      |  19 ++-
 .../templates/manage/project/release.html     |   2 +-
 warehouse/templates/packaging/detail.html     | 140 ++++++++++++++----
 3 files changed, 131 insertions(+), 30 deletions(-)

diff --git a/warehouse/static/sass/blocks/_table.scss b/warehouse/static/sass/blocks/_table.scss
index de5e4947ceb7..2143ff269c70 100644
--- a/warehouse/static/sass/blocks/_table.scss
+++ b/warehouse/static/sass/blocks/_table.scss
@@ -30,8 +30,9 @@
 
    Modifiers:
      - downloads: specific styles for downloads table on project detail page
+     - files: specific styles for files table on project detail page
      - releases: specific styles for releases table on manage project page
-     - files: specific styles for files table on releases tab
+     - manage-files: specific styles for files table on the 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
@@ -58,6 +59,7 @@
   tbody tr td:last-child {
     display: block;
     width: 100%;
+    max-width: 100%;
     text-align: left;
     border-bottom: 0;
     padding: 2px 0;
@@ -175,6 +177,19 @@
     }
   }
 
+  &--files {
+    margin-bottom: $half-spacing-unit;
+
+    td.file-name {
+      word-wrap: break-word;
+      max-width: 250px;
+    }
+
+    @media only screen and (max-width: $desktop) {
+      @include mobile-friendly-table;
+    }
+  }
+
   &--releases {
     word-wrap: break-word;
     margin-bottom: $spacing-unit;
@@ -185,7 +200,7 @@
     }
   }
 
-  &--files,
+  &--manage-files,
   &--history {
     margin-top: $half-spacing-unit;
 
diff --git a/warehouse/templates/manage/project/release.html b/warehouse/templates/manage/project/release.html
index 6f3277ed9997..ec37bfbf1c0e 100644
--- a/warehouse/templates/manage/project/release.html
+++ b/warehouse/templates/manage/project/release.html
@@ -32,7 +32,7 @@ <h3 class="heading-wsubtitle__subtitle">
     </h3>
   </div>
   {% if files %}
-    <table class="table table--files">
+    <table class="table table--manage-files">
       <caption class="sr-only">{% trans version=release.version, project_name=project.name %}Files for release {{ version }} of {{ project_name }}{% endtrans %}</caption>
       <thead>
         <tr>
diff --git a/warehouse/templates/packaging/detail.html b/warehouse/templates/packaging/detail.html
index 457e653bc6ed..65ae6880d2d9 100644
--- a/warehouse/templates/packaging/detail.html
+++ b/warehouse/templates/packaging/detail.html
@@ -70,28 +70,117 @@ <h3 class="package-snippet__title">
     pip install{{ index_url }} {{ release.project.name }}{{ project_version }}
   {%- endif -%}
 {%- endmacro -%}
-{%- macro file_table(files) -%}
+
+{%- macro sdists_table(files) -%}
+<table class="table table--files">
+    <caption class="sr-only">{% trans name=release.project.name, release=release.version %}Source distribution for {{ name }} {{ version }}{% endtrans %}</caption>
+    <thead>
+      <th scope="col">{% trans %}File{% endtrans %}</th>
+      <th scope="col">{% trans %}Size{% endtrans %}</th>
+      <th scope="col">{% trans %}Type{% endtrans %}</th>
+      <th class="table__align-right"  scope="col">{% trans %}Details{% endtrans %}</th>
+    </thead>
   {% for file in files %}
-    <div class="file"
-         {% if 'source' not in file.python_version %} data-filter-list-target="item" data-filtered-target-filename='["{{ file.filename }}"]' {% for filter_name, filter_items in file.wheel_filters.items() %} data-filtered-target-{{ filter_name }}='{{ filter_items | tojson }}' {% endfor %}
-         {% endif %}>
-      <div class="file__graphic">
-        <i class="far fa-file" aria-hidden="true"></i>
-      </div>
-      <div class="card file__card">
+    <tr>
+      <td>
+        <span class="table__mobile-label">{% trans %}File{% endtrans %}</span>
+        <a href="{{ request.route_url('packaging.file', path=file.path) }}"><i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i></a>&nbsp;
         <a href="{{ request.route_url('packaging.file', path=file.path) }}">{{ file.filename }}</a>
-        ({{ file.size|filesizeformat() if file.size else 0|filesizeformat() }}
+        <br />
+        <small>{% trans upload_time=humanize(file.upload_time) %}Uploaded {{ upload_time }}{% endtrans %}</small>
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}Size{% endtrans %}</span>
+        {{ file.size|filesizeformat() if file.size else 0|filesizeformat() }}
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}Type{% endtrans %}</span>
+        <code>{% trans %}Source{% endtrans %}</code>
+      </td>
+      <td class="table__align-right">
+        <span class="table__mobile-label">{% trans %}View details{% endtrans %}</span>
         <a href="#{{ file.filename }}"
-           data-project-tabs-target="tab"
-           data-action="project-tabs#onTabClick">{%- trans -%}view details{%- endtrans -%}</a>)
-        <p class="file__meta">
-          Uploaded {{ humanize(file.upload_time) }}
-          {% for tag in file.pretty_wheel_tags %}<code>{{ tag }}</code>{% endfor %}
-        </p>
+            data-project-tabs-target="tab"
+            data-action="project-tabs#onTabClick">
+          {% trans %}Details{% endtrans %}
+        </a>
+      </td>
+    </tr>
+  {% endfor %}
+  </table>
+{%- endmacro -%}
+
+{%- macro bdists_table(files) -%}
+  <table class="table table--files">
+    <caption class="sr-only">{% trans name=release.project.name, release=release.version %}Table of built distributions (wheels) for {{ name }} {{ release }}{% endtrans %}</caption>
+    <thead>
+      <th scope="col">{% trans %}File{% endtrans %}</th>
+      <th scope="col">{% trans %}Size{% endtrans %}</th>
+      <th scope="col">{% trans %}Interpreter{% endtrans %}</th>
+      <th scope="col">{% trans %}ABI{% endtrans %}</th>
+      <th scope="col">{% trans %}Platform{% endtrans %}</th>
+      <th class="table__align-right" scope="col">{% trans %}Details{% endtrans %}</th>
+    </thead>
+  {% for file in files %}
+    <tr {% if 'source' not in file.python_version %} 
+        data-filter-list-target="item" data-filtered-target-filename='["{{ file.filename }}"]' 
+        {% for filter_name, filter_items in file.wheel_filters.items() %} data-filtered-target-{{ filter_name }}='{{ filter_items | tojson }}' {% endfor %}
+        {% endif %}>
+      <td class="file-name">
+        <span class="table__mobile-label">{% trans %}File{% endtrans %}</span>
+        <a href="{{ request.route_url('packaging.file', path=file.path) }}"><i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i></a>&nbsp;
+        <a href="{{ request.route_url('packaging.file', path=file.path) }}">{{ file.filename }}</a>
+        <br />
+        <small>{% trans upload_time=humanize(file.upload_time) %}Uploaded {{ upload_time }}{% endtrans %}</small>
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}Size{% endtrans %}</span>
+        {{ file.size|filesizeformat() if file.size else 0|filesizeformat() }}
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}Interpreter{% endtrans %}</span>
+        {% for key, value in file.wheel_filters.items() %}
+          {% if key == 'interpreters' %}
+            {% for interpreter in value %}
+              <code>{{ interpreter }}</code>
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}ABI{% endtrans %}</span>
+          {% for key, value in file.wheel_filters.items() %}
+          {% if key == 'abis' %}
+            {% for interpreter in value %}
+              <code>{{ interpreter }}</code>
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}Platform{% endtrans %}</span>
+          {% for key, value in file.wheel_filters.items() %}
+          {% if key == 'platforms' %}
+            {% for interpreter in value %}
+              <code>{{ interpreter }}</code>
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+      </td>
+      <td class="table__align-right">
+        <span class="table__mobile-label">{% trans %}View details{% endtrans %}</span>
+        <a href="#{{ file.filename }}"
+            data-project-tabs-target="tab"
+            data-action="project-tabs#onTabClick">
+          {% trans %}Details{% endtrans %}
+        </a>
+      </td>
       </div>
-    </div>
+    </tr>
   {% endfor %}
+  </table>
 {%- endmacro -%}
+
 {% macro filter_select(name, title, selected) %}
   <label class="form-group__label sr-only" for="bdist-tags-{{ name }}">{% trans %}{{ title }}{% endtrans %}</label>
   <select class="form-group__field"
@@ -107,6 +196,7 @@ <h3 class="package-snippet__title">
     {% endfor %}
   </select>
 {% endmacro %}
+
 {% block title %}{{ release.project.name }}{% endblock %}
 {% block description %}{{ release.summary }}{% endblock %}
 {% block additional_rss -%}
@@ -451,16 +541,12 @@ <h3>
       {% endtrans %}
     </h3>
     {% if sdists %}
-      {{ file_table(sdists) }}
+      {{ sdists_table(sdists) }}
     {% else %}
-      <div class="file">
-        <div class="file__graphic">
-          <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-        </div>
-        <div>
-          {% trans %}No source distribution files available for this release.{% endtrans %}&nbsp;
-          {% trans href='https://packaging.python.org/tutorials/packaging-projects/#generating-distribution-archives', title=gettext('External link') %}See tutorial on <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">generating distribution archives</a>.{% endtrans %}
-        </div>
+      <div>
+        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>&nbsp;
+        {% trans %}No source distribution files available for this release.{% endtrans %}&nbsp;
+        {% trans href='https://packaging.python.org/tutorials/packaging-projects/#generating-distribution-archives', title=gettext('External link') %}See tutorial on <a href="{{ href }}" title="{{ title }}" target="_blank" rel="noopener">generating distribution archives</a>.{% endtrans %}
       </div>
     {% endif %}
 
@@ -499,7 +585,7 @@ <h3>
       </div>
       <div class="filter-wheels__filters">
         <div class="form-group form-group--flex-width">
-          <strong>Filters</strong>
+          <strong>{% trans %}Filters{% endtrans %}</strong>
           <span class="hidden initial-toggle-visibility" data-controller="clipboard">
             <a class="hidden"
               href="{% if request.matched_route %}{{ request.current_route_url() }}{% else %}{{ request.url }}{% endif %}#files"
@@ -522,7 +608,7 @@ <h3>
     </div>
     {% endif %}
 
-    {{ file_table(bdists) }}
+    {{ bdists_table(bdists) }}
 
     {% if bdist_count > 1 %}
     <p class="hidden initial-toggle-visibility">

From 1b989d4769a6d4d34a73aad6c937b62614c8f8e4 Mon Sep 17 00:00:00 2001
From: Nicole Harris <n.harris@kabucreative.com>
Date: Mon, 29 Sep 2025 06:28:48 +0100
Subject: [PATCH 4/5] Show filters if more than 3 files are present

---
 warehouse/templates/packaging/detail.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/warehouse/templates/packaging/detail.html b/warehouse/templates/packaging/detail.html
index 65ae6880d2d9..08bdee893859 100644
--- a/warehouse/templates/packaging/detail.html
+++ b/warehouse/templates/packaging/detail.html
@@ -559,7 +559,7 @@ <h3>
         Built distributions (wheels)
       {% endtrans %}
     </h3>
-    {% if bdist_count > 1 %}
+    {% if bdist_count > 3 %}
     <noscript>
       <p class="initial-toggle-visibility">
         {% trans %}Enable javascript to be able to filter the list of wheel files.{% endtrans %}
@@ -610,7 +610,7 @@ <h3>
 
     {{ bdists_table(bdists) }}
 
-    {% if bdist_count > 1 %}
+    {% if bdist_count > 3 %}
     <p class="hidden initial-toggle-visibility">
       <span data-filter-list-target="summary"></span>
     </p>

From a13f39b2c5130548b3678f9348a52fdf8dbc4d09 Mon Sep 17 00:00:00 2001
From: Nicole Harris <n.harris@kabucreative.com>
Date: Mon, 29 Sep 2025 06:36:29 +0100
Subject: [PATCH 5/5] Adjust table columns to create more room for longer tag
 names

---
 warehouse/templates/packaging/detail.html | 31 ++++++++++++-----------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/warehouse/templates/packaging/detail.html b/warehouse/templates/packaging/detail.html
index 08bdee893859..240cf36a7324 100644
--- a/warehouse/templates/packaging/detail.html
+++ b/warehouse/templates/packaging/detail.html
@@ -76,6 +76,7 @@ <h3 class="package-snippet__title">
     <caption class="sr-only">{% trans name=release.project.name, release=release.version %}Source distribution for {{ name }} {{ version }}{% endtrans %}</caption>
     <thead>
       <th scope="col">{% trans %}File{% endtrans %}</th>
+      <th scope="col">{% trans %}Uploaded{% endtrans %}</th>
       <th scope="col">{% trans %}Size{% endtrans %}</th>
       <th scope="col">{% trans %}Type{% endtrans %}</th>
       <th class="table__align-right"  scope="col">{% trans %}Details{% endtrans %}</th>
@@ -86,8 +87,10 @@ <h3 class="package-snippet__title">
         <span class="table__mobile-label">{% trans %}File{% endtrans %}</span>
         <a href="{{ request.route_url('packaging.file', path=file.path) }}"><i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i></a>&nbsp;
         <a href="{{ request.route_url('packaging.file', path=file.path) }}">{{ file.filename }}</a>
-        <br />
-        <small>{% trans upload_time=humanize(file.upload_time) %}Uploaded {{ upload_time }}{% endtrans %}</small>
+      </td>
+      <td>
+        <span class="table__mobile-label">{% trans %}Uploaded{% endtrans %}</span>
+        {% trans upload_time=humanize(file.upload_time) %}Uploaded {{ upload_time }}{% endtrans %}
       </td>
       <td>
         <span class="table__mobile-label">{% trans %}Size{% endtrans %}</span>
@@ -95,7 +98,7 @@ <h3 class="package-snippet__title">
       </td>
       <td>
         <span class="table__mobile-label">{% trans %}Type{% endtrans %}</span>
-        <code>{% trans %}Source{% endtrans %}</code>
+        {% trans %}Source{% endtrans %}
       </td>
       <td class="table__align-right">
         <span class="table__mobile-label">{% trans %}View details{% endtrans %}</span>
@@ -115,7 +118,6 @@ <h3 class="package-snippet__title">
     <caption class="sr-only">{% trans name=release.project.name, release=release.version %}Table of built distributions (wheels) for {{ name }} {{ release }}{% endtrans %}</caption>
     <thead>
       <th scope="col">{% trans %}File{% endtrans %}</th>
-      <th scope="col">{% trans %}Size{% endtrans %}</th>
       <th scope="col">{% trans %}Interpreter{% endtrans %}</th>
       <th scope="col">{% trans %}ABI{% endtrans %}</th>
       <th scope="col">{% trans %}Platform{% endtrans %}</th>
@@ -131,18 +133,17 @@ <h3 class="package-snippet__title">
         <a href="{{ request.route_url('packaging.file', path=file.path) }}"><i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i></a>&nbsp;
         <a href="{{ request.route_url('packaging.file', path=file.path) }}">{{ file.filename }}</a>
         <br />
-        <small>{% trans upload_time=humanize(file.upload_time) %}Uploaded {{ upload_time }}{% endtrans %}</small>
-      </td>
-      <td>
-        <span class="table__mobile-label">{% trans %}Size{% endtrans %}</span>
-        {{ file.size|filesizeformat() if file.size else 0|filesizeformat() }}
+        <small>
+          {{ file.size|filesizeformat() if file.size else 0|filesizeformat() }}.&nbsp;
+          {% trans upload_time=humanize(file.upload_time) %}Uploaded {{ upload_time }}{% endtrans %}.
+        </small>
       </td>
       <td>
         <span class="table__mobile-label">{% trans %}Interpreter{% endtrans %}</span>
         {% for key, value in file.wheel_filters.items() %}
           {% if key == 'interpreters' %}
             {% for interpreter in value %}
-              <code>{{ interpreter }}</code>
+              {{ interpreter }}<br/>
             {% endfor %}
           {% endif %}
         {% endfor %}
@@ -151,18 +152,18 @@ <h3 class="package-snippet__title">
         <span class="table__mobile-label">{% trans %}ABI{% endtrans %}</span>
           {% for key, value in file.wheel_filters.items() %}
           {% if key == 'abis' %}
-            {% for interpreter in value %}
-              <code>{{ interpreter }}</code>
+            {% for abi in value %}
+             {{ abi }}<br/>
             {% endfor %}
-          {% endif %}
+          {% endif %} 
         {% endfor %}
       </td>
       <td>
         <span class="table__mobile-label">{% trans %}Platform{% endtrans %}</span>
           {% for key, value in file.wheel_filters.items() %}
           {% if key == 'platforms' %}
-            {% for interpreter in value %}
-              <code>{{ interpreter }}</code>
+            {% for platform in value %}
+              {{ platform }}<br/>
             {% endfor %}
           {% endif %}
         {% endfor %}