Improve download files page layout

warehouse/static/sass/base/_forms.scss

@@ -48,6 +48,10 @@
   }
 }
 
+select {
+  height: 40px;
+}
+
 input[type="checkbox"] {
   &:focus,
   &:hover,

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;

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;
+    }
+  }
+}

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 */

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;
 

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";

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>